Merge pull request #3805 from penpot/alotor-ui-polish-2

💄 New UI polishing

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -65,7 +65,8 @@
       stroke: var(--button-primary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
+  &:global(.disabled),
+  &[disabled] {
     background-color: var(--button-background-color-disabled);
     border: $s-1 solid var(--button-border-color-disabled);
     color: var(--button-foreground-color-disabled);
@@ -105,7 +106,8 @@
       stroke: var(--button-secondary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
+  &:global(.disabled),
+  &[disabled] {
     background-color: var(--button-background-color-disabled);
     border: $s-1 solid var(--button-border-color-disabled);
     color: var(--button-foreground-color-disabled);
@@ -144,11 +146,16 @@
       stroke: var(--button-tertiary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
+  &:global(.disabled),
-    background-color: var(--button-background-color-disabled);
+  &[disabled] {
-    border: $s-1 solid var(--button-border-color-disabled);
     color: var(--button-foreground-color-disabled);
     cursor: unset;
+    pointer-events: none;
+
+    svg,
+    span svg {
+      stroke: var(--button-background-color-disabled);
+    }
   }
 }
 

frontend/src/app/main/ui/components/tab_container.scss

@@ -14,10 +14,13 @@
   .tab-container-content {
     overflow-y: auto;
     overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .tab-element {
-    height: fit-content;
+    flex: 1;
+    height: 100%;
   }
 }
 .tab-container-tabs {

frontend/src/app/main/ui/viewer/inspect/code.scss

@@ -17,6 +17,7 @@
     }
   }
   .code-block {
+    padding: 0 $s-4 $s-8 0;
     .code-row-lang {
       display: flex;
       justify-content: space-between;

frontend/src/app/main/ui/viewer/inspect/exports.scss

@@ -7,6 +7,8 @@
 @import "refactor/common-refactor.scss";
 
 .element-set {
+  padding-bottom: $s-16;
+
   .element-title {
     .title-spacing-export-viewer {
       @extend .attr-title;

frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss

@@ -15,6 +15,9 @@
   right: unset;
   grid-area: right-sidebar;
   .tool-windows {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     .shape-row {
       display: flex;
       gap: $s-8;
@@ -61,4 +64,9 @@
       padding: $s-8 $s-24;
     }
   }
+
+  .inspect-content {
+    flex: 1;
+    overflow: hidden;
+  }
 }

frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss

@@ -8,6 +8,8 @@
 
 .color-values {
   @include flexColumn;
+  margin-top: $s-8;
+
   &.disable-opacity {
     grid-template-columns: 3.5rem repeat(3, 1fr);
   }
@@ -16,6 +18,8 @@
     .input-wrapper {
       @extend .input-element;
       width: $s-84;
+      display: flex;
+      align-items: baseline;
     }
   }
   .hex-alpha-wrapper {
@@ -25,6 +29,9 @@
       width: $s-84;
       &.hex {
         width: $s-172;
+        display: flex;
+        align-items: baseline;
+        gap: $s-8;
       }
     }
   }

frontend/src/app/main/ui/workspace/colorpicker/ramp.scss

@@ -12,7 +12,7 @@
   height: $s-140;
   width: $s-256;
   margin-top: $s-12;
-  margin-bottom: $s-6;
+  margin-bottom: $s-12;
   cursor: pointer;
 
   .handler {
@@ -44,3 +44,6 @@
   height: $s-52;
   cursor: pointer;
 }
+.sliders-wrapper {
+  @include flexColumn;
+}

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

@@ -62,7 +62,7 @@
           flex-direction: column;
           height: calc(100% - $s-12);
           .title-spacing-lib {
-            margin: 0 0 $s-24 calc(-1 * $s-8);
+            margin: 0 0 0 calc(-1 * $s-8);
           }
           .section-list,
           .section-list-shared {
@@ -70,6 +70,7 @@
             max-height: $s-320;
             margin-top: $s-12;
             overflow: auto;
+            padding-right: $s-8;
             .section-list-item {
               display: grid;
               grid-template-columns: 1fr auto;

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

@@ -112,6 +112,7 @@
   .palette {
     grid-area: palette;
     width: 100%;
+    min-width: 0;
   }
   .handler {
     @include buttonStyle;

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

@@ -32,18 +32,16 @@ $width-settings-bar-max: $s-500;
     left: 0;
     width: 100%;
     height: $s-12;
-    border-top: 2px solid var(--color-background-secondary);
+    border-top: 2px solid var(--color-background-quaternary);
     background-color: var(--color-background-primary);
     cursor: ns-resize;
-    &:hover {
-      border-color: var(--color-background-quaternary);
-    }
   }
   .settings-bar-inside {
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 100%;
     height: calc(100vh - $s-52);
+    overflow: hidden;
     .tabs-wrapper {
       .layers-tab {
         display: grid;
@@ -63,6 +61,8 @@ $width-settings-bar-max: $s-500;
   width: $width-settings-bar;
   background-color: var(--panel-background-color);
   height: 100%;
+  display: flex;
+  flex-direction: column;
   &.not-expand {
     max-width: $width-settings-bar;
   }

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

@@ -11,6 +11,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   padding-left: $s-12;
 
   .tab-spacing {
@@ -27,6 +28,7 @@
 
   .element-options {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     gap: $s-16;

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

@@ -98,6 +98,7 @@
             @extend .input-element;
             width: $s-60;
             min-width: $s-60;
+            align-items: baseline;
             input {
               width: $s-32;
             }
@@ -109,6 +110,9 @@
               width: $s-44;
             }
           }
+          .spread-input {
+            gap: $s-8;
+          }
         }
       }
     }

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

@@ -24,6 +24,10 @@
       border-radius: $br-8 0 0 $br-8;
       padding: 0;
       margin-right: 0;
+      gap: $s-4;
+      input {
+        padding: 0;
+      }
       &.no-opacity {
         border-radius: $br-8;
       }

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

@@ -12,13 +12,12 @@
     @include flexRow;
     .stroke-width-input-element {
       @extend .input-element;
-      width: $s-60;
+      width: $s-96;
       border-radius: $br-8;
       .icon {
         @include flexCenter;
         height: $s-32;
-        width: $s-12;
+        width: $s-20;
-        margin-right: $s-4;
       }
     }
     .select-wrapper {

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

@@ -115,14 +115,14 @@
       [:div {:class (stl/css :sub-actions)}
        [:div {:class (stl/css :sub-actions-group)}
 
-      ;; Draw Mode
+        ;; Draw Mode
         [:button
          {:class  (stl/css-case :is-toggled (= edit-mode :draw))
           :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
           :on-click on-select-draw-mode}
          i/pentool-refactor]
 
-      ;; Edit mode
+        ;; Edit mode
         [:button
          {:class (stl/css-case :is-toggled (= edit-mode :move))
           :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@@ -130,59 +130,58 @@
          i/move-refactor]]
 
        [:div {:class (stl/css :sub-actions-group)}
-
+        ;; Add Node
-      ;; Add Node
         [:button
-         {:class  (stl/css-case :is-disabled (not (:add-node enabled-buttons)))
+         {:disabled (not (:add-node enabled-buttons))
           :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
           :on-click on-add-node}
          i/add-refactor]
 
-      ;; Remove node
+        ;; Remove node
         [:button
-         {:class (stl/css-case :is-disabled (not (:remove-node enabled-buttons)))
+         {:disabled (not (:remove-node enabled-buttons))
           :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
           :on-click on-remove-node}
          i/remove-refactor]]
 
        [:div {:class (stl/css :sub-actions-group)}
-      ;; Merge Nodes
+        ;; Merge Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:merge-nodes enabled-buttons)))
+         {:disabled (not (:merge-nodes enabled-buttons))
           :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
           :on-click on-merge-nodes}
          i/merge-nodes-refactor]
 
-      ;; Join Nodes
+        ;; Join Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:join-nodes enabled-buttons)))
+         {:disabled (not (:join-nodes enabled-buttons))
           :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
           :on-click on-join-nodes}
          i/join-nodes-refactor]
 
-      ;; Separate Nodes
+        ;; Separate Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:separate-nodes enabled-buttons)))
+         {:disabled (not (:separate-nodes enabled-buttons))
           :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
           :on-click on-separate-nodes}
          i/separate-nodes-refactor]]
 
-     ;; Make Corner
+       ;; Make Corner
        [:div {:class (stl/css :sub-actions-group)}
         [:button
-         {:class (stl/css-case :is-disabled (not (:make-corner enabled-buttons)))
+         {:disabled (not (:make-corner enabled-buttons))
           :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
           :on-click on-make-corner}
          i/to-corner-refactor]
 
-      ;; Make Curve
+        ;; Make Curve
         [:button
-         {:class (stl/css-case :is-disabled (not (:make-curve enabled-buttons)))
+         {:disabled (not (:make-curve enabled-buttons))
           :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
           :on-click on-make-curve}
          i/to-curve-refactor]]
 
-     ;; Toggle snap
+       ;; Toggle snap
        [:div {:class (stl/css :sub-actions-group)}
         [:button
          {:class  (stl/css-case :is-toggled snap-toggled)
@@ -195,14 +194,14 @@
       [:div.path-actions
        [:div.viewport-actions-group
 
-      ;; Draw Mode
+        ;; Draw Mode
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when (= edit-mode :draw) "is-toggled")
           :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
           :on-click on-select-draw-mode}
          i/pen]
 
-      ;; Edit mode
+        ;; Edit mode
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when (= edit-mode :move) "is-toggled")
           :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@@ -210,14 +209,14 @@
          i/pointer-inner]]
 
        [:div.viewport-actions-group
-      ;; Add Node
+        ;; Add Node
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:add-node enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
           :on-click on-add-node}
          i/nodes-add]
 
-      ;; Remove node
+        ;; Remove node
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:remove-node enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
@@ -225,28 +224,28 @@
          i/nodes-remove]]
 
        [:div.viewport-actions-group
-      ;; Merge Nodes
+        ;; Merge Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:merge-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
           :on-click on-merge-nodes}
          i/nodes-merge]
 
-      ;; Join Nodes
+        ;; Join Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:join-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
           :on-click on-join-nodes}
          i/nodes-join]
 
-      ;; Separate Nodes
+        ;; Separate Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:separate-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
           :on-click on-separate-nodes}
          i/nodes-separate]]
 
-     ;; Make Corner
+       ;; Make Corner
        [:div.viewport-actions-group
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:make-corner enabled-buttons) "is-disabled")
@@ -254,14 +253,14 @@
           :on-click on-make-corner}
          i/nodes-corner]
 
-      ;; Make Curve
+        ;; Make Curve
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:make-curve enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
           :on-click on-make-curve}
          i/nodes-curve]]
 
-     ;; Toggle snap
+       ;; Toggle snap
        [:div.viewport-actions-group
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when snap-toggled "is-toggled")

frontend/src/app/main/ui/workspace/viewport/path_actions.scss

@@ -41,10 +41,6 @@
       border-radius: $s-8;
       border: none;
       margin: 0 $s-2;
-      &.is-disabled {
-        pointer-events: none;
-        opacity: 40%;
-      }
       &.is-toggled {
         background-color: var(--button-radio-background-color-active);
         svg {