💄 Adds new modal and toolbar styles

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -159,8 +159,6 @@
   --radio-btn-foreground-color-selected: var(--color-accent-primary);
   --radio-btn-border-color-selected: var(--color-background-quaternary);
 
-  --modal-background-color: var(--color-background-primary);
-
   --library-name-foreground-color: var(--color-foreground-primary);
   --library-content-foreground-color: var(--color-foreground-secondary);
 
@@ -188,7 +186,7 @@
   --user-count-background-color: var(--color-background-secondary);
   --user-count-foreground-color: var(--color-accent-primary);
 
-  --modal-background-color: var(--color-background-quaternary);
+  --modal-background-color: var(--color-background-primary);
   --modal-foreground-color: var(--color-foreground-primary);
   --modal-foreground-color-secondary: var(--color-foreground-secondary);
 }

frontend/resources/styles/common/refactor/mixins.scss

@@ -30,6 +30,13 @@
 }
 
 @mixin titleTipography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-12;
+  font-weight: $fw400;
+  line-height: 1.2;
+}
+
+@mixin titleBigTipography {
   font-family: "worksans", sans-serif;
   font-size: $fs-14;
   font-weight: $fw400;

frontend/src/app/main/ui/components/title_bar.scss

@@ -27,7 +27,7 @@
     color: var(--title-foreground-color);
   }
   .title-only {
-    margin-left: $s-8;
+    // margin-left: $s-8;
   }
 
   .toggle-btn {

frontend/src/app/main/ui/workspace/left_header.scss

@@ -32,11 +32,12 @@
       height: $s-16;
       width: 100%;
       padding-bottom: $s-2;
+      margin-top: -2px;
       color: var(--title-foreground-color);
       cursor: pointer;
     }
     .file-name {
-      @include titleTipography;
+      @include titleBigTipography;
       text-transform: none;
       color: var(--title-foreground-color-hover);
     }

frontend/src/app/main/ui/workspace/left_toolbar.css.json

@@ -1 +1 @@
-{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}
+{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}

frontend/src/app/main/ui/workspace/left_toolbar.scss

@@ -18,7 +18,7 @@
   border-radius: $s-8;
   z-index: $z-index-2;
   background-color: var(--color-background-primary);
-  transition: top 1s, height 1s, opacity 1s;
+  transition: top 0.3s, height 0.3s, opacity 0.3s;
 
   .main-toolbar-options {
     position: relative;
@@ -26,18 +26,19 @@
     align-items: center;
     margin: 0;
     opacity: $op-10;
-    transition: opacity 1s ease;
+    transition: opacity 0.3s ease;
     li {
       position: relative;
 
       button {
-        @extend .button-primary;
+        @extend .button-tertiary;
         height: $s-36;
         width: $s-36;
         flex-shrink: 0;
         background-color: transparent;
         border-radius: $s-8;
         border: none;
+        margin: 0 $s-2;
 
         svg {
           @extend .button-icon;

frontend/src/app/main/ui/workspace/libraries.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+
 .modal-overlay {
   @include flexCenter;
   position: fixed;
@@ -15,6 +16,7 @@
   z-index: $z-index-modal;
   background-color: var(--overlay-color);
   pointer-events: none; // This is to allow outside click that closes modal.
+
   .modal-dialog {
     position: relative;
     height: $s-520;
@@ -50,11 +52,13 @@
       .updates-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: $s-24;
+        gap: $s-32;
         padding-top: $s-24;
         height: 100%;
         max-height: $s-400;
         .section {
+          display: flex;
+          flex-direction: column;
           height: calc(100% - $s-12);
           :global(.title-spacing-lib) {
             margin: 0 0 $s-24 calc(-1 * $s-8);
@@ -63,8 +67,8 @@
           .section-list-shared {
             height: 100%;
             max-height: $s-320;
+            margin-top: $s-12;
             overflow: auto;
-            scrollbar-gutter: stable;
             .section-list-item {
               display: grid;
               grid-template-columns: 1fr auto;
@@ -128,7 +132,7 @@
             margin-bottom: $s-12;
           }
           .libraries-search {
-            margin-bottom: $s-12;
+            margin: $s-12 0;
             .search-icon {
               @include flexCenter;
               padding: 0 0 0 $s-8;

frontend/src/app/main/ui/workspace/palette.scss

@@ -30,7 +30,7 @@
   padding: $s-0 $s-0 $s-8 $s-8;
   border-radius: $br-8;
   background-color: var(--palette-background-color);
-  transition: right 1s, opacity 1s, width 1s;
+  transition: right 0.3s, opacity 0.2s, width 0.3s;
   &.wide {
     width: 100%;
   }

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -21,6 +21,7 @@
     margin-top: $s-2;
     margin-bottom: $s-4;
     padding-right: $s-8;
+    margin-left: $s-8;
     .page-name {
       @include tabTitleTipography;
       padding: 0 $s-12;