💄 Small visual fixes

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

@@ -31,6 +31,7 @@
       margin-top: 0;
       width: 100%;
       height: 100%;
+      padding: 0 $s-16;
 
       &:focus {
         outline: none;
@@ -82,7 +83,7 @@
   position: relative;
   width: var(--input-width, calc(100% - $s-1));
   min-width: var(--input-min-width);
-  height: var(--input-height, $s-32);
+  height: var(--input-height, $s-40);
 }
 
 .help-icon {

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

@@ -14,12 +14,13 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  padding: 0 $s-16;
 }
 
 .grid-row {
   display: flex;
   width: 100%;
-  gap: 24px;
+  gap: $s-24;
 }
 
 .grid-item {
@@ -45,7 +46,6 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
   .grid-item-th {
     border-radius: $br-4;
     text-align: initial;
-
     width: var(--th-width, #{$thumbnail-default-width});
     height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
 
@@ -56,7 +56,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
 
   &.dragged {
     border-radius: $br-4;
-    border: $br-2 solid $da-primary;
+    outline: $br-4 solid $da-primary;
     text-align: initial;
     width: calc(var(--th-width) + $s-12);
     height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
@@ -200,7 +200,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
 
   .selected {
     .grid-item-th {
-      border: 2px solid $da-tertiary;
+      outline: $s-4 solid $da-tertiary;
     }
   }
 }
@@ -302,7 +302,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
   flex-direction: column;
   height: 90%;
   justify-content: flex-start;
-  max-height: 550px;
+  max-height: $s-580;
   padding: $s-32;
 
   .asset-section {

frontend/src/app/main/ui/dashboard/placeholder.cljs

@@ -36,8 +36,7 @@
 
         :else
         [:div
-         {:class (stl/css :grid-empty-placeholder)
+         {:class (stl/css :grid-empty-placeholder)}
-          :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
          [:button {:class (stl/css :create-new)
                    :on-click on-click}
           i/add-refactor]])

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

@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "common/refactor/common-refactor.scss" as *;
-@use "./grid.scss";
+@use "./grid.scss" as g;
 
 .grid-empty-placeholder {
   border-radius: $br-12;
@@ -64,6 +64,8 @@
     margin: $s-8;
     text-transform: uppercase;
     border: $s-2 solid transparent;
+    width: var(--th-width, #{g.$thumbnail-default-width});
+    height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration});
 
     svg {
       width: $s-32;

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

@@ -147,7 +147,7 @@
 
   .grid-container {
     width: 100%;
-    padding: 0 $s-16;
+    padding: 0 $s-4;
   }
 
   &:hover,

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

@@ -321,7 +321,7 @@
     width: $s-32;
 
     position: absolute;
-    top: $s-12;
+    top: calc(50% - $s-12);
     right: $s-2;
 
     svg {

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

@@ -623,6 +623,10 @@
     height: $s-32;
     border-radius: $br-8;
     background-color: var(--alert-background-color-warning);
+    padding: $s-24 $s-8;
+    gap: $s-8;
+    margin-bottom: $s-16;
+
     .icon {
       @include flexCenter;
       width: $s-16;

frontend/src/app/main/ui/hooks.cljs

@@ -366,7 +366,8 @@
          limit    (mth/min 10 nitems)
          limit    (mth/max 1 limit)
 
-         th-size (- (/ (- width (* (dec limit) 24)) limit) 12)]
+         th-size (when width
+                   (- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
 
      (mf/with-effect
        [th-size]

frontend/src/app/main/ui/settings/profile.scss

@@ -48,7 +48,7 @@
   }
 
   .fields-row {
-    --input-height: $s-40;
+    --input-height: #{$s-40};
     margin-bottom: $s-20;
     flex-direction: column;
 

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

@@ -81,7 +81,8 @@
         node-ref (use-resize-observer on-resize)]
     [:*
      (if new-css-system
-       [:& palette {:layout layout}]
+       (when (not hide-ui?)
+         [:& palette {:layout layout}])
        [:*
         (when (and colorpalette? (not hide-ui?))
           [:& colorpalette])

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

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport.top-bar
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.files.helpers :as cfh]
    [app.common.types.shape.layout :as ctl]
@@ -18,6 +19,35 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(mf/defc view-only-actions
+  []
+  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
+        handle-close-view-mode
+        (mf/use-callback
+         (fn []
+           (st/emit! :interrupt
+                     (dw/set-options-mode :design)
+                     (dw/set-workspace-read-only false))))]
+    (if new-css-system
+      [:div {:class (stl/css :viewport-actions)}
+       [:div {:class (stl/css :viewport-actions-container)}
+        [:div {:class (stl/css :viewport-actions-title)}
+         [:& i18n/tr-html {:tag-name "span"
+                           :label "workspace.top-bar.read-only"}]]
+        [:button {:class (stl/css :done-btn)
+                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
+        [:button {:class (stl/css :close-btn)
+                  :on-click handle-close-view-mode} i/close-refactor]]]
+
+      ;; OLD
+      [:div.viewport-actions
+       [:div.viewport-actions-container
+        [:div.viewport-actions-title
+         [:& i18n/tr-html {:tag-name "span"
+                           :label "workspace.top-bar.read-only"}]]
+        [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
+        [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]])))
+
 (mf/defc top-bar
   {::mf/wrap [mf/memo]}
   []
@@ -40,24 +70,11 @@
                                     (not (cfh/frame-shape? shape))))
                           draw-path?)
 
-        grid-edition? (and single? editing? (ctl/grid-layout? shape))
+        grid-edition? (and single? editing? (ctl/grid-layout? shape))]
-
-        handle-close-view-mode
-        (mf/use-callback
-         (fn []
-           (st/emit! :interrupt
-                     (dw/set-options-mode :design)
-                     (dw/set-workspace-read-only false))))]
 
     (cond
       workspace-read-only?
-      [:div.viewport-actions
+      [:& view-only-actions]
-       [:div.viewport-actions-container
-        [:div.viewport-actions-title
-         [:& i18n/tr-html {:tag-name "span"
-                           :label "workspace.top-bar.read-only"}]]
-        [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
-        [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]]
 
       path-edition?
       [:div.viewport-actions

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

@@ -0,0 +1,47 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.viewport-actions {
+  pointer-events: none;
+  position: absolute;
+  top: $s-44;
+  left: 50%;
+
+  .viewport-actions-container {
+    @include flexRow;
+    background: var(--panel-background-color);
+    border-radius: $br-12;
+    box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
+    gap: $s-8;
+    height: $s-48;
+    margin-left: -50%;
+    padding: $s-8;
+    pointer-events: initial;
+    width: $s-512;
+  }
+
+  .viewport-actions-title {
+    flex: 1;
+    font-size: $fs-12;
+    color: var(--color-foreground-secondary);
+    padding-left: $s-8;
+  }
+
+  .done-btn {
+    @extend .button-primary;
+    text-transform: uppercase;
+    padding: $s-8 $s-20;
+    font-size: $fs-11;
+  }
+  .close-btn {
+    @extend .button-tertiary;
+    svg {
+      @extend .button-icon;
+    }
+  }
+}