From 76a2f9bc8cf3e40da7942fd57b0030584a8ac69e Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 1 Dec 2023 11:59:06 +0100
Subject: [PATCH 1/2] :sparkles: Dashboard respect ratio for thumbnails

---
 frontend/src/app/main/ui/dashboard.scss       |  2 ++
 frontend/src/app/main/ui/dashboard/grid.cljs  | 26 ++++++++--------
 frontend/src/app/main/ui/dashboard/grid.scss  | 30 +++++++++----------
 .../src/app/main/ui/dashboard/libraries.cljs  |  4 +--
 .../src/app/main/ui/dashboard/libraries.scss  |  4 ---
 .../app/main/ui/dashboard/placeholder.scss    |  4 +--
 .../src/app/main/ui/dashboard/projects.cljs   | 16 +++++-----
 .../src/app/main/ui/dashboard/projects.scss   |  5 ++++
 frontend/src/app/main/ui/hooks.cljs           | 19 +++++++-----
 9 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index 42c45ba1a..fa287e7fa 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -25,4 +25,6 @@
   position: relative;
   grid-row: 1 / span 2;
   padding: $s-16 $s-16 0 0;
+  overflow: hidden;
+  width: 100%;
 }
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 96ff30aa8..66a3f9860 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -459,6 +459,7 @@
        [:button
         {:class (stl/css-case :selected selected? :library library-view?)
          :ref node-ref
+         :title (:name file)
          :draggable true
          :on-click on-select
          :on-key-down handle-key-down
@@ -634,20 +635,17 @@
          [:& loading-placeholder]
 
          (seq files)
-         [:ul
-          {:class (stl/css :grid-row)
-           :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
-
-          (when @dragging?
-            [:li {:class (stl/css :grid-item)}])
-
-          (for [item files]
-            [:& grid-item
-             {:file item
-              :key (:id item)
-              :navigate? true
-              :origin origin
-              :library-view? library-view?}])]
+         (for [slice (partition-all limit files)]
+           [:ul {:class (stl/css :grid-row)}
+            (when @dragging?
+              [:li {:class (stl/css :grid-item)}])
+            (for [item slice]
+              [:& grid-item
+               {:file item
+                :key (:id item)
+                :navigate? true
+                :origin origin
+                :library-view? library-view?}])])
 
          :else
          [:& empty-placeholder
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index cd64a5cd7..777381711 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -6,17 +6,20 @@
 
 @import "refactor/common-refactor.scss";
 
+$thumbnail-default-width: $s-252; // Default width
+$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
+
 .dashboard-grid {
   font-size: $fs-14;
   height: 100%;
   overflow-y: auto;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .grid-row {
-  display: grid;
+  display: flex;
   width: 100%;
-  padding: 0 $s-12;
+  gap: 24px;
 }
 
 .grid-item {
@@ -24,9 +27,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  flex: 1 0 $s-260;
-  height: $s-232;
-  margin: $s-12 $s-16 $s-16 $s-8;
+  margin: $s-12 0;
   position: relative;
   text-align: center;
 
@@ -38,17 +39,16 @@
   button {
     background-color: transparent;
     border: none;
-  }
-
-  @media #{$bp-max-1366} {
-    height: $s-200;
-    flex: 1 0 $s-232;
+    padding: 0 $s-6;
   }
 
   .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});
+
     img {
       object-fit: contain;
     }
@@ -58,7 +58,8 @@
     border-radius: $br-4;
     border: $br-2 solid $da-primary;
     text-align: initial;
-    max-height: $s-160;
+    width: calc(var(--th-width) + $s-12);
+    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
   }
 
   &.overlay {
@@ -81,6 +82,7 @@
     display: grid;
     grid-template-columns: 1fr auto;
     cursor: pointer;
+    max-width: var(--th-width, $thumbnail-default-width);
   }
 
   .item-info {
@@ -261,8 +263,7 @@
   background-size: auto 80%;
   background-repeat: no-repeat;
 
-  height: $s-232;
-  max-height: $s-160;
+  height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -294,7 +295,6 @@
 
 .grid-item.project-th.library {
   height: $s-612;
-  width: $s-300;
 }
 
 .grid-item-th.library {
diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs
index a08cec20f..2b80c8439 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.cljs
+++ b/frontend/src/app/main/ui/dashboard/libraries.cljs
@@ -51,10 +51,10 @@
 
     (if new-css-system
       [:*
-       [:header {:class (stl/css :dashboard-header) :ref rowref}
+       [:header {:class (stl/css :dashboard-header)}
         [:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
          [:h1 (tr "dashboard.libraries-title")]]]
-       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
+       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)  :ref rowref}
         [:& grid {:files files
                   :project default-project
                   :origin :libraries
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index 72b0485a5..eb7864c9e 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -17,10 +17,6 @@
   &.dashboard-projects {
     user-select: none;
   }
-  &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
-  }
 
   &.search {
     margin-top: $s-12;
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 5b0b45df8..38a62c6b5 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -10,9 +10,7 @@
 .grid-empty-placeholder {
   border-radius: $br-12;
   display: grid;
-  padding: $s-12;
-  margin-right: $s-12;
-  height: $s-232;
+  padding: $s-12 0;
 
   &.loader {
     justify-items: center;
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index 9213bebb7..b017c2020 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -246,7 +246,6 @@
                                   :edition? (= (:id project) edit-id)})
 
         [rowref limit] (hooks/use-dynamic-grid-item-width)
-
         on-nav
         (mf/use-fn
          (mf/deps project-id team-id)
@@ -344,7 +343,7 @@
 
     (if new-css-system
       [:article {:class (stl/css-case :dashboard-project-row true :first first?)}
-       [:header {:class (stl/css :project) :ref rowref}
+       [:header {:class (stl/css :project)}
         [:div {:class (stl/css :project-name-wrapper)}
          (if (:edition? @local)
            [:& inline-edition {:content (:name project)
@@ -403,12 +402,13 @@
             :on-key-down handle-menu-click}
            i/actions]]]]
 
-       [:& line-grid
-        {:project project
-         :team team
-         :files files
-         :create-fn create-file
-         :limit limit}]
+       [:div {:class (stl/css :grid-container) :ref rowref}
+        [:& line-grid
+         {:project project
+          :team team
+          :files files
+          :create-fn create-file
+          :limit limit}]]
 
        (when (and (> limit 0)
                   (> file-count limit))
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index ff6d6cdbc..33f686b62 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -145,6 +145,11 @@
     }
   }
 
+  .grid-container {
+    width: 100%;
+    padding: 0 $s-16;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {
diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs
index c4a653320..6610c84b1 100644
--- a/frontend/src/app/main/ui/hooks.cljs
+++ b/frontend/src/app/main/ui/hooks.cljs
@@ -1,3 +1,4 @@
+
 ;; 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/.
@@ -350,9 +351,7 @@
 (defn use-dynamic-grid-item-width
   ([] (use-dynamic-grid-item-width nil))
   ([itemsize]
-   (let [;; NOTE: we pass a function to use-state for avoid repeatedly
-         ;; lookup `:items-width` on storage on each render
-         width*   (mf/use-state #(:items-width @storage))
+   (let [width*   (mf/use-state nil)
          width    (deref width*)
 
          rowref   (mf/use-ref)
@@ -365,20 +364,26 @@
          ratio    (if (some? width) (/ width itemsize) 0)
          nitems   (mth/floor ratio)
          limit    (mth/min 10 nitems)
-         limit    (mth/max 1 limit)]
+         limit    (mth/max 1 limit)
+
+         th-size (- (/ (- width (* (dec limit) 24)) limit) 12)]
+
+     (mf/with-effect
+       [th-size]
+       (when th-size
+         (let [node (mf/ref-val rowref)]
+           (.setProperty (.-style node) "--th-width" (str th-size "px")))))
 
      (mf/with-effect []
        (let [node (mf/ref-val rowref)
              mnt? (volatile! true)
              sub  (->> (wapi/observe-resize node)
-                       (rx/observe-on :af)
                        (rx/subs (fn [entries]
                                   (let [row       (first entries)
                                         row-rect  (.-contentRect ^js row)
                                         row-width (.-width ^js row-rect)]
                                     (when @mnt?
-                                      (reset! width* row-width)
-                                      (swap! storage assoc :items-width row-width))))))]
+                                      (reset! width* row-width))))))]
          (fn []
            (vreset! mnt? false)
            (rx/dispose! sub))))

From e9a42bbc697de63cbcda2c57bcd0ed7ecc8d581a Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 1 Dec 2023 14:26:17 +0100
Subject: [PATCH 2/2] :lipstick: Small visual fixes

---
 .../src/app/main/ui/components/forms.scss     |  3 +-
 frontend/src/app/main/ui/dashboard/grid.scss  | 10 ++--
 .../app/main/ui/dashboard/placeholder.cljs    |  3 +-
 .../app/main/ui/dashboard/placeholder.scss    |  4 +-
 .../src/app/main/ui/dashboard/projects.scss   |  2 +-
 .../src/app/main/ui/dashboard/sidebar.scss    |  2 +-
 frontend/src/app/main/ui/dashboard/team.scss  |  4 ++
 frontend/src/app/main/ui/hooks.cljs           |  3 +-
 .../src/app/main/ui/settings/profile.scss     |  2 +-
 frontend/src/app/main/ui/workspace.cljs       |  3 +-
 .../main/ui/workspace/viewport/top_bar.cljs   | 47 +++++++++++++------
 .../main/ui/workspace/viewport/top_bar.scss   | 47 +++++++++++++++++++
 12 files changed, 101 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/app/main/ui/workspace/viewport/top_bar.scss

diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 2bb900528..e0d10993b 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 777381711..55d63faee 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs
index 6125dd166..37fd949f3 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.cljs
+++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs
@@ -36,8 +36,7 @@
 
         :else
         [:div
-         {:class (stl/css :grid-empty-placeholder)
-          :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
+         {:class (stl/css :grid-empty-placeholder)}
          [:button {:class (stl/css :create-new)
                    :on-click on-click}
           i/add-refactor]])
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 38a62c6b5..9b10a5a09 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index 33f686b62..da1e4d4ff 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/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,
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 9b4bceddb..8d357be39 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 25f9ed985..83c5eff7c 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs
index 6610c84b1..f1f607729 100644
--- a/frontend/src/app/main/ui/hooks.cljs
+++ b/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]
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index 44004ae5c..e33ef5a3a 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/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;
 
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 99546edeb..4f015168b 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/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])
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
index 15293c929..cba3e74a2 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
+++ b/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))
-
-        handle-close-view-mode
-        (mf/use-callback
-         (fn []
-           (st/emit! :interrupt
-                     (dw/set-options-mode :design)
-                     (dw/set-workspace-read-only false))))]
+        grid-edition? (and single? editing? (ctl/grid-layout? shape))]
 
     (cond
       workspace-read-only?
-      [: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]]]
+      [:& view-only-actions]
 
       path-edition?
       [:div.viewport-actions
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
new file mode 100644
index 000000000..67114b50e
--- /dev/null
+++ b/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;
+    }
+  }
+}