Merge pull request #4034 from penpot/eva-bugfixing-ui-9

🐛 Fix some frontend errors

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

@@ -293,11 +293,11 @@
 
   // ALERTS & STATUS
   --alert-background-color-ok: var(--ok-color);
-  --alert-foreground-color-ok: var(--color-background-secondary);
+  --alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
   --alert-background-color-warning: var(--warning-color);
-  --alert-foreground-color-warning: var(--color-foreground-primary);
+  --alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
   --alert-background-color-error: var(--error-color);
-  --alert-foreground-color-error: var(--color-foreground-primary);
+  --alert-foreground-color-error: var(--white); // We don't want this color to change with theme
   --alert-background-color-neutral: var(--color-background-quaternary);
   --alert-foreground-color-neutral: var(--color-foreground-secondary);
   --alert-foreground-color-neutral-active: var(--color-foreground-primary);

frontend/src/app/main/ui/dashboard/sidebar.scss

@@ -46,7 +46,7 @@
     height: $s-48;
     display: flex;
     width: 100%;
-    border: $s-1 solid transparent;
+    border: $s-1 solid $db-tertiary;
     align-items: center;
 
     svg {
@@ -76,7 +76,6 @@
     padding: 0 $s-12;
     background-color: transparent;
     border: none;
-    border-right: $s-1 solid $db-primary;
   }
 
   .team-name {
@@ -114,16 +113,13 @@
   }
 
   .switch-options {
-    display: flex;
+    @include buttonStyle;
+    @include flexCenter;
     max-width: $s-24;
     min-width: $s-28;
-    border-left: $s-1 solid $df-primary;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
     height: 100%;
+    border-left: $s-1 solid $db-primary;
+    background-color: transparent;
 
     svg {
       fill: $df-secondary;

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

@@ -9,7 +9,11 @@
 .comments-section {
   position: relative;
   background-color: var(--panel-background-color);
-  .comments-section-title {
+  display: grid;
+  grid-template-rows: $s-40 $s-48 1fr;
+}
+
+.comments-section-title {
   @include flexCenter;
   @include tabTitleTipography;
   display: flex;
@@ -25,8 +29,9 @@
     flex-grow: 1;
     color: var(--title-foreground-color-hover);
   }
+}
 
-    .close-button {
+.close-button {
   @extend .button-tertiary;
   height: $s-28;
   width: $s-28;
@@ -35,9 +40,9 @@
     @extend .button-icon;
     stroke: var(--icon-foreground);
   }
-    }
+}
-  }
+
-  .mode-dropdown-wrapper {
+.mode-dropdown-wrapper {
   @include buttonStyle;
   @extend .asset-element;
   background-color: var(--color-background-tertiary);
@@ -49,13 +54,16 @@
   margin: $s-16 auto 0 auto;
   cursor: pointer;
   position: relative;
-    .mode-label {
+}
+
+.mode-label {
   padding-right: 8px;
   flex-grow: 1;
   display: flex;
   justify-content: flex-start;
-    }
+}
-    .icon {
+
+.icon {
   @include flexCenter;
   padding-right: 8px;
   height: $s-24;
@@ -65,14 +73,16 @@
     transform: rotate(90deg);
     stroke: var(--icon-foreground);
   }
-    }
+}
-  }
+
-  .comment-mode-dropdown {
+.comment-mode-dropdown {
   @extend .dropdown-wrapper;
   top: $s-80;
   left: $s-12;
   width: $s-256;
-    .dropdown-item {
+}
+
+.dropdown-item {
   @extend .dropdown-element-base;
   justify-content: space-between;
   .icon {
@@ -100,23 +110,31 @@
       stroke: var(--icon-foreground-hover);
     }
   }
-    }
+}
-    .separator {
+
+.separator {
   height: $s-12;
-    }
+}
-  }
+
-  .comments-section-content {
+.comments-section-content {
-    .thread-groups {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.thread-groups {
   display: flex;
   flex-direction: column;
   gap: $s-24;
-    }
+}
-    .thread-group-placeholder {
+
+.thread-group-placeholder {
   @include flexColumn;
   align-items: center;
   justify-content: flex-start;
   margin-top: $s-36;
-      .placeholder-icon {
+}
+
+.placeholder-icon {
   @include flexCenter;
   height: $s-48;
   width: $s-48;
@@ -128,13 +146,11 @@
     width: $s-28;
     stroke: var(--empty-message-foreground-color);
   }
-      }
+}
-      .placeholder-label {
+
+.placeholder-label {
   @include titleTipography;
   text-align: center;
   width: $s-184;
   color: var(--empty-message-foreground-color);
-      }
-    }
-  }
 }

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

@@ -105,8 +105,8 @@
                   (mf/deps last-path)
                   (constantly {:asset-name last-path}))
         form     (fm/use-form :spec ::name-group-form
-                           :validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space"))
+                              :validators [(fm/validate-not-empty :asset-name (tr "auth.name.not-all-space"))
-                                        (fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))]
+                                           (fm/validate-length :asset-name fm/max-length-allowed (tr "auth.name.too-long"))]
                               :initial initial)
 
         create?  (empty? path)
@@ -122,6 +122,7 @@
                (accept asset-name)
                (accept path asset-name))
              (modal/hide!))))]
+
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}

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

@@ -17,7 +17,6 @@
 
 .tab-spacing {
   margin-right: $s-12;
-  margin-bottom: $s-8;
 }
 
 .content-class {
@@ -33,4 +32,5 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-top: $s-8;
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -55,6 +55,9 @@
         toggle-more-options
         (mf/use-fn #(swap! state* update :show-more-options not))
 
+        close-more-options
+        (mf/use-fn #(swap! state* assoc :show-more-options false))
+
         handle-toggle-visibility
         (mf/use-fn
          (mf/deps grid)
@@ -125,10 +128,15 @@
                             (assoc-in [:color :color] color)
                             (update :color dissoc :value))]
              (when on-change
-               (on-change (assoc grid :params params))))))
+               (on-change (assoc grid :params params)))
+             (close-more-options))))
 
         handle-set-as-default
-        (mf/use-fn (mf/deps grid) #(on-save-default grid))
+        (mf/use-fn
+         (mf/deps grid)
+         (fn []
+           (on-save-default grid)
+           (close-more-options)))
 
         is-default (= (->> grid :params)
                       (->> grid :type default-grid-params))]
@@ -269,15 +277,14 @@
 
             [:button {:class (stl/css-case :show-more-options true
                                            :selected show-more-options?)
-                      :on-click toggle-more-options}
+                      :on-click toggle-more-options
+                      :disabled is-default}
              i/menu-refactor]
             (when show-more-options?
               [:div {:class (stl/css :more-options)}
-               [:button {:disabled is-default
+               [:button {:class (stl/css :option-btn)
-                         :class (stl/css :option-btn)
                          :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
-               [:button {:disabled is-default
+               [:button {:class (stl/css :option-btn)
-                         :class (stl/css :option-btn)
                          :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]))
 
 (mf/defc frame-grid

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -144,8 +144,7 @@
                 :width 12
                 :height 12
                 :class "workspace-frame-icon"
-                :style {:stroke-width (/ 1 zoom)
+                :style {:stroke color
-                        :stroke color
                         :fill "none"}
                 :visibility (if show-artboard-names? "visible" "hidden")}
           (cond