From bc14f59153fc1ab046327029bb785b8c0167253b Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 9 Aug 2023 11:11:51 +0200 Subject: [PATCH] :lipstick: Fix color assets and styles --- .../resources/styles/common/refactor/design-tokens.scss | 4 ++-- frontend/resources/styles/common/refactor/spacing.scss | 1 + frontend/src/app/main/ui/components/title_bar.scss | 4 +--- frontend/src/app/main/ui/workspace/left_header.scss | 6 +++--- .../src/app/main/ui/workspace/sidebar/assets/colors.scss | 5 +++-- .../src/app/main/ui/workspace/sidebar/assets/common.scss | 3 ++- .../main/ui/workspace/sidebar/assets/file_library.cljs | 3 +-- .../ui/workspace/sidebar/assets/file_library.css.json | 2 +- .../main/ui/workspace/sidebar/assets/file_library.scss | 9 +++------ .../src/app/main/ui/workspace/sidebar/layer_item.scss | 1 + 10 files changed, 18 insertions(+), 20 deletions(-) diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 7c09ab72f..a13ca94b6 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/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); diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index 67274242f..abff5efeb 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/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); diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index ac3a6b77c..7fa24ca25 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/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); diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index 7f7b00bdb..a80349e9a 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index e8d9b6bed..09b0ce80f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 16a95d238..001117143 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index b47e9247e..65acc9ccf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/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") - [:span {:class (dom/classnames (css :special-subtitle) true)} file-name]]) + (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)} file-name]))} (when-not local? diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json index cbea40395..174513347 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 5513216c0..f4e6377b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index d43daf24d..bc5194d68 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/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);