From 0b3cff1a9f32f2633533bc81d315049d67e568ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 1 Feb 2024 14:29:08 +0100 Subject: [PATCH 1/4] :bug: Fix spacing in Design tab / Text options --- .../main/ui/workspace/sidebar/options/menus/typography.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 85a8222c4..420a35dcd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -247,14 +247,13 @@ .text-options { @include flexColumn; - margin-bottom: $s-8; &:not(.text-options-full-size) { position: relative; } .font-option { @include titleTipography; @extend .asset-element; - padding-right: 0; + padding: $s-8 0 $s-8 $s-8; cursor: pointer; .name { flex-grow: 1; @@ -292,6 +291,7 @@ padding: 0; .numeric-input { @extend .input-base; + padding-inline-start: $s-8; } } From 669d928bbf41ae824914facd948d9fa03ae6c4e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 1 Feb 2024 15:09:04 +0100 Subject: [PATCH 2/4] :bug: Fix font-selector not autofocusing and remove its inner drop shadow --- frontend/src/app/main/ui/components/search_bar.cljs | 2 ++ frontend/src/app/main/ui/components/search_bar.scss | 1 + .../app/main/ui/workspace/sidebar/options/menus/typography.cljs | 1 + .../app/main/ui/workspace/sidebar/options/menus/typography.scss | 1 - 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index 24f362cd2..f6f70a8b9 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -21,6 +21,7 @@ on-clear (unchecked-get props "clear-action") placeholder (unchecked-get props "placeholder") icon (unchecked-get props "icon") + autofocus (unchecked-get props "auto-focus") handle-change (mf/use-fn @@ -52,6 +53,7 @@ icon [:input {:on-change handle-change :value value + :auto-focus autofocus :placeholder placeholder :on-key-down handle-key-down}] (when (not= "" value) diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index ae5cbe1e1..b67317ba2 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -30,6 +30,7 @@ background-color: var(--input-background-color); font-size: $fs-12; color: var(--input-foreground-color); + border-radius: $br-8; &:focus { outline: none; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 1f9d39d1b..f637274cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -176,6 +176,7 @@ [:div {:class (stl/css :header)} [:& search-bar {:on-change on-filter-change :value (:term @state) + :auto-focus true :placeholder (tr "workspace.options.search-font")}] (when (and recent-fonts show-recent) [:section {:class (stl/css :show-recent)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 420a35dcd..2b5d617ef 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -418,7 +418,6 @@ } .fonts-list { - @include menuShadow; position: relative; display: flex; flex-direction: column; From 229825237979ff8088ed4d3e1d9421796687030f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 1 Feb 2024 16:01:57 +0100 Subject: [PATCH 3/4] :bug: Fix font-selector current font tick being misaligned in full size dropdown --- .../sidebar/options/menus/typography.scss | 63 ++++++++++--------- 1 file changed, 35 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 2b5d617ef..f69ab2804 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -375,39 +375,40 @@ padding: $s-12; } } +} - .font-wrapper { - padding-bottom: $s-4; - cursor: pointer; - .font-item { - @extend .asset-element; - margin-bottom: $s-4; - border-radius: $br-8; - display: flex; - .icon { - @include flexCenter; - height: $s-28; - width: $s-28; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } - } - &.selected { - color: var(--assets-item-name-foreground-color-hover); - .icon { - svg { - stroke: var(--assets-item-name-foreground-color-hover); - } - } - } +.font-wrapper { + padding-bottom: $s-4; + cursor: pointer; +} - .label { - @include titleTipography; - flex-grow: 1; +.font-item { + @extend .asset-element; + margin-bottom: $s-4; + border-radius: $br-8; + display: flex; + .icon { + @include flexCenter; + height: $s-28; + width: $s-28; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + &.selected { + color: var(--assets-item-name-foreground-color-hover); + .icon { + svg { + stroke: var(--assets-item-name-foreground-color-hover); } } } + + .label { + @include titleTipography; + flex-grow: 1; + } } .font-selector-dropdown-full-size { @@ -438,4 +439,10 @@ border-start-start-radius: 0; border-start-end-radius: 0; border: $s-1 solid var(--color-background-quaternary); + + // TODO: this should belong to typography-entry , but atm we don't have a clear + // way of accessing whether we are in fullsize mode or not + .selected { + padding-inline-end: 0; + } } From a5239c1cb69642bcff7d917fd8289e26b6a3d249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 1 Feb 2024 16:14:27 +0100 Subject: [PATCH 4/4] :bug: Fix bad background for new team button in light theme --- frontend/resources/styles/common/refactor/design-tokens.scss | 4 ++++ frontend/src/app/main/ui/dashboard/sidebar.scss | 5 +---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 45c677671..9b8d5bfff 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -361,6 +361,10 @@ // TEXT SELECTION --text-editor-selection-background-color: var(--da-tertiary-70); --text-editor-selection-foreground-color: var(--app-white); + + // NEW TEAM BUTTON + // TODO: we should not put these functional tokens here, but rather in the components they belong to + --new-team-button-background-color: var(--color-background-primary); } #app { diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 27b31d569..7a7f69a7d 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -232,13 +232,10 @@ width: $s-168; } - .new-team { - background-color: $db-quaternary; - } - &.action { .team-icon { background-color: #2e3434; + background-color: var(--new-team-button-background-color); border-radius: 50%; height: $s-24; margin-right: $s-12;