From af460536d11b0422cdf27c7a6c6db4d9324b78bd Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 9 Aug 2023 09:08:56 +0200 Subject: [PATCH 1/5] :lipstick: Fix css left-header --- frontend/resources/styles/common/refactor/mixins.scss | 2 +- frontend/src/app/main/ui/components/tab_container.scss | 5 ++--- frontend/src/app/main/ui/components/title_bar.scss | 2 ++ frontend/src/app/main/ui/workspace/left_header.scss | 3 +-- frontend/src/app/main/ui/workspace/sidebar.scss | 2 +- frontend/src/app/main/ui/workspace/sidebar/layers.scss | 3 +-- frontend/src/app/main/ui/workspace/sidebar/sitemap.scss | 2 +- 7 files changed, 9 insertions(+), 10 deletions(-) diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 87f891796..e7c452709 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -31,7 +31,7 @@ @mixin titleTipography { font-family: "worksans", sans-serif; - font-size: $fs-12; + font-size: $fs-14; font-weight: $fw400; line-height: 1.2; } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index d5263e34f..16ffc2408 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -26,7 +26,6 @@ flex-direction: row; gap: $s-2; height: $s-32; - padding: $s-2 $s-2 $s-2 $s-2; border-radius: $br-8; background: var(--color-background-secondary); cursor: pointer; @@ -40,7 +39,7 @@ .tab-container-tab-title { @include flexCenter; @include tabTitleTipography; - height: $s-28; + height: 100%; width: 100%; padding: 0 $s-8; margin: 0; @@ -65,7 +64,7 @@ height: 100%; width: $s-24; min-width: $s-24; - padding: 0 $s-6 0 0; + padding: 0 $s-6; border-radius: $br-5; svg { @include flexCenter; diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 9f4a9549c..ac3a6b77c 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -13,7 +13,9 @@ height: $s-32; width: 100%; min-height: $s-32; + margin: $s-4 0; background-color: var(--title-background-color); + padding-right: $s-8; .title, .title-only { @include tabTitleTipography; diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index cd06e8c7b..7f7b00bdb 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -10,7 +10,6 @@ display: flex; align-items: center; height: $s-48; - max-width: var(--width, $s-256); padding: $s-8 $s-8 $s-4 $s-8; .main-icon { @include flexCenter; @@ -49,7 +48,7 @@ border: 0; border-radius: $br-8; background-color: var(--input-background-color); - font-size: $fs-12; + font-size: $fs-14; color: var(--input-foreground-color); z-index: 20; white-space: break-spaces; diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 9be412d6a..b7b95448b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -43,7 +43,7 @@ $width-settings-bar-max: $s-500; } } :global(.tab-spacing) { - margin: $s-4 $s-4 0 $s-4; + margin: $s-4 $s-8 0 $s-8; } .right-settings-bar { grid-area: right-sidebar; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index a09f2a0cf..995e3e2a2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -20,7 +20,6 @@ min-height: $s-32; margin-top: $s-2; margin-bottom: $s-4; - padding-right: $s-8; .page-name { @include tabTitleTipography; padding: 0 $s-12; @@ -238,7 +237,7 @@ width: 100%; overflow-y: auto; overflow-x: hidden; - scrollbar-gutter: stable; + // scrollbar-gutter: stable; overflow-y: overlay; .element-list { width: 100%; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 41c6120e7..95b21bac9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -52,7 +52,7 @@ flex-direction: column; overflow-y: auto; overflow-x: hidden; - scrollbar-gutter: stable; + // scrollbar-gutter: stable; overflow-y: overlay; height: 100%; width: 100%; From bc14f59153fc1ab046327029bb785b8c0167253b Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 9 Aug 2023 11:11:51 +0200 Subject: [PATCH 2/5] :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); From 8b9781f3457e3bb8c260304c87b0d00af35a7dc9 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 9 Aug 2023 11:31:50 +0200 Subject: [PATCH 3/5] :lipstick: Adds new components styles --- .../app/main/ui/workspace/sidebar/assets/components.scss | 7 ++++--- .../src/app/main/ui/workspace/sidebar/assets/graphics.scss | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index a185ff063..c816f3471 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -10,7 +10,7 @@ .drop-space { height: $s-12; border-radius: $br-8; - background-color: var(--assets-item-background-color); + background-color: var(--color-foreground-secondary); } .asset-grid { display: grid; @@ -24,7 +24,7 @@ padding: $s-8; border: $s-2 solid transparent; border-radius: $br-8; - background-color: var(--assets-item-background-color); + background-color: var(--color-foreground-secondary); overflow: hidden; cursor: pointer; img { @@ -126,11 +126,12 @@ svg, img { @include flexCenter; + flex-shrink: 0; padding: $s-2; height: $s-32; width: $s-32; border-radius: $br-6; - background-color: var(--assets-item-background-color); + background-color: var(--color-foreground-secondary); } .item-name { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss index 1f200316c..4640ced8c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -10,7 +10,7 @@ .drop-space { height: $s-12; border-radius: $br-8; - background-color: var(--assets-item-background-color); + background-color: var(--color-foreground-secondary); } .asset-grid { display: grid; @@ -24,7 +24,7 @@ border: $s-2 solid transparent; border-radius: $br-8; aspect-ratio: 1/1; - background-color: var(--assets-item-background-color); + background-color: var(--color-foreground-secondary); overflow: hidden; cursor: pointer; img { From 6420188675894d69d8ff055738677a8b9f367783 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Thu, 10 Aug 2023 08:57:32 +0200 Subject: [PATCH 4/5] :lipstick: Adds new CSS polishing --- frontend/src/app/main/ui/components/title_bar.scss | 1 - frontend/src/app/main/ui/workspace/sidebar/layers.scss | 1 + frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss | 1 - .../src/app/main/ui/workspace/sidebar/sitemap.css.json | 2 +- frontend/src/app/main/ui/workspace/sidebar/sitemap.scss | 7 +++++++ 5 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 7fa24ca25..7fb78cd99 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -15,7 +15,6 @@ min-height: $s-32; margin: $s-4 0; background-color: var(--title-background-color); - padding-right: $s-8; .title, .title-only { @include tabTitleTipography; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 995e3e2a2..43852c6d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -20,6 +20,7 @@ min-height: $s-32; margin-top: $s-2; margin-bottom: $s-4; + padding-right: $s-8; .page-name { @include tabTitleTipography; padding: 0 $s-12; diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index d58f12e1b..71ffc5589 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -105,7 +105,6 @@ height: 90%; padding: $s-12; margin-bottom: $s-12; - scrollbar-gutter: stable; overflow-y: overlay; font-size: $fs-12; color: var(--title-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json index bf92e7793..e68668f17 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"} \ No newline at end of file +{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","title-bar":"sidebar_sitemap_title-bar_tIJtT","title":"sidebar_sitemap_title_HmFc4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 95b21bac9..bd30a246e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -14,10 +14,17 @@ width: 100%; height: var(--height, 200px); + .title-bar { + .title { + margin-left: $s-2; + } + } + .add-page { @extend .button-tertiary; height: $s-32; width: calc($s-24 + $s-4); + margin-right: $s-8; padding: 0; border-radius: $br-8; svg { From bf0a676b831ea270393fcd55a500054103b4d8a0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Thu, 10 Aug 2023 11:40:13 +0200 Subject: [PATCH 5/5] :lipstick: Adds new modal and toolbar styles --- .../styles/common/refactor/design-tokens.scss | 4 +--- frontend/resources/styles/common/refactor/mixins.scss | 7 +++++++ frontend/src/app/main/ui/components/title_bar.scss | 2 +- frontend/src/app/main/ui/workspace/left_header.scss | 3 ++- .../src/app/main/ui/workspace/left_toolbar.css.json | 2 +- frontend/src/app/main/ui/workspace/left_toolbar.scss | 7 ++++--- frontend/src/app/main/ui/workspace/libraries.scss | 10 +++++++--- frontend/src/app/main/ui/workspace/palette.scss | 2 +- frontend/src/app/main/ui/workspace/sidebar/layers.scss | 1 + 9 files changed, 25 insertions(+), 13 deletions(-) diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index a13ca94b6..ebdd92ce0 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/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); } diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index e7c452709..c54c57612 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/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; diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 7fb78cd99..029015e5c 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index a80349e9a..b85729050 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/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); } diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.css.json b/frontend/src/app/main/ui/workspace/left_toolbar.css.json index 63277a027..e44ecc0cf 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.css.json +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.scss b/frontend/src/app/main/ui/workspace/left_toolbar.scss index e478db05f..6dc12cb92 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index b117b0193..06e330f26 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 692b9689f..3a9d2cb83 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/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%; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 43852c6d2..d4f67b695 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/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;