💄 Fix color assets and styles

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

@@ -80,7 +80,7 @@
   --layer-row-foreground-color: var(--color-foreground-secondary);
   --layer-row-foreground-color-hover: var(--color-accent-primary);
   --layer-row-foreground-color-selected: var(--color-accent-primary);
-  --layer-row-foreground-color-drag: var(--color-accent-primary);
+  --layer-row-foreground-color-drag: var(--color-select);
   --layer-row-foreground-color-focus: var(--color-foreground-primary);
   --layer-row-border-color-focus: var(--color-accent-primary);
   --layer-child-row-background-color: var(--color-background-tertiary);
@@ -150,7 +150,7 @@
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-border-color: var(--color-accent-primary);
   --assets-item-background-color-drag: var(--color-accent-primary-muted);
-  --assets-item-border-color-drag: var(--color-accent-primary);
+  --assets-item-border-color-drag: var(--color-select);
   --assets-component-background-color: var(--white); // We don't want this color to change with palette
 
   --radio-btns-background-color: var(--color-background-tertiary);

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

@@ -41,6 +41,7 @@ $s-148: calc(var(--s-4) * 37);
 $s-152: calc(var(--s-4) * 38);
 $s-160: calc(var(--s-4) * 40);
 $s-168: calc(var(--s-4) * 42);
+$s-180: calc(var(--s-4) * 45);
 $s-184: calc(var(--s-4) * 46);
 $s-192: calc(var(--s-4) * 48);
 $s-196: calc(var(--s-4) * 49);

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

@@ -36,16 +36,14 @@
     display: flex;
     align-items: center;
     flex-grow: 1;
-    gap: $s-4;
     padding: 0;
     color: var(--title-foreground-color);
     stroke: var(--title-foreground-color);
     .collased-icon {
       @include flexCenter;
       height: $s-24;
-      width: $s-24;
       border-radius: $br-8;
-      padding: 0 $s-4 0 $s-8;
+      padding-left: $s-8;
       svg {
         @extend .button-icon-small;
         transform: rotate(90deg);

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

@@ -46,7 +46,7 @@
       width: 100%;
       margin: 0;
       border: 0;
-      border-radius: $br-8;
+      border-radius: $br-4;
       background-color: var(--input-background-color);
       font-size: $fs-14;
       color: var(--input-foreground-color);
@@ -81,7 +81,7 @@
     @extend .menu-dropdown;
     position: absolute;
     top: $s-48;
-    left: calc(var(--width, $s-256) - $s-32);
+    left: calc(var(--width, $s-256) - $s-16);
     margin: 0;
 
     .menu-item {
@@ -121,7 +121,7 @@
   .sub-menu {
     @extend .menu-dropdown;
     position: absolute;
-    left: calc(var(--width, $s-256) + $s-168);
+    left: calc(var(--width, $s-256) + $s-180);
     width: 270px;
     .shortcut {
       @extend .shortcut;

frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss

@@ -26,7 +26,7 @@
       display: flex;
       align-items: center;
       height: $s-32;
-      padding: $s-8 $s-12 $s-8 $s-8;
+      padding: $s-8;
       margin-bottom: $s-4;
       border-radius: $br-8;
       background-color: var(--assets-item-background-color);
@@ -34,7 +34,8 @@
       .bullet-block {
         @include flexCenter;
         height: 100%;
-        width: $s-32;
+        justify-content: flex-start;
+        margin-right: $s-4;
       }
       .name-block {
         @include titleTipography;

frontend/src/app/main/ui/workspace/sidebar/assets/common.scss

@@ -15,7 +15,7 @@
     width: 100%;
     .section-icon {
       @include flexCenter;
-      padding-right: $s-8;
+      padding-right: $s-2;
       svg {
         @include flexCenter;
         height: $s-16;
@@ -27,6 +27,7 @@
     .section-name {
       display: flex;
       align-items: center;
+      margin: 0 $s-2;
     }
     .num-assets {
       @include flexCenter;

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs

@@ -58,8 +58,7 @@
                       :collapsed?   (not open?)
                       :on-collapsed  toggle-open
                       :title        (if local?
-                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")
+                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
-                                                [:span {:class (dom/classnames (css :special-subtitle) true)} file-name]])
 
                                       (mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))}
         (when-not local?

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json

@@ -1 +1 @@
-{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}
+{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss

@@ -20,14 +20,11 @@
 
   .special-title {
     @include textEllipsis;
-    width: calc(var(--width, 256px) - $s-80);
     color: var(--title-foreground-color-hover);
+    margin-left: $s-2;
+    text-align: left;
   }
-  .special-subtitle {
+
-    padding-left: $s-4;
-    color: var(--title-foreground-color);
-    text-transform: initial;
-  }
   .file-link {
     @extend .button-tertiary;
     height: $s-32;

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

@@ -19,6 +19,7 @@
     height: $s-32;
     width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
     padding-right: $s-12;
+    cursor: pointer;
 
     &.filtered {
       width: calc(100% - $s-12);