Merge pull request #4094 from penpot/ladybenko-6828-fix-text-selection

🐛 Fix text options & font selector in design tab

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 {

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)

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;
     }

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;

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)}

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;
         }
       }
 
@@ -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 {
@@ -418,7 +419,6 @@
 }
 
 .fonts-list {
-  @include menuShadow;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -439,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;
+  }
 }