From 412343f3de427e3cc76263db2660bd372499c461 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Thu, 28 Dec 2023 14:20:42 +0100
Subject: [PATCH] :recycle: Remove new-css-system from workspace header

---
 .../styles/common/refactor/basic-rules.scss   |   6 +-
 frontend/resources/styles/main-default.scss   |   2 -
 .../resources/styles/main/partials/modal.scss | 215 ------
 .../main/partials/workspace-header.scss       | 364 ---------
 .../styles/main/partials/workspace.scss       |  20 +-
 .../styles/main/partials/zoom-widget.scss     |  94 ---
 frontend/src/app/main/ui/export.cljs          | 309 +++-----
 frontend/src/app/main/ui/export.scss          | 352 ++++-----
 frontend/src/app/main/ui/viewer/header.scss   |   6 +-
 frontend/src/app/main/ui/workspace.cljs       |  48 +-
 .../src/app/main/ui/workspace/header.cljs     | 692 ------------------
 .../app/main/ui/workspace/left_header.cljs    |   6 +-
 .../app/main/ui/workspace/left_header.scss    | 294 ++++----
 .../src/app/main/ui/workspace/presence.cljs   |  47 +-
 .../app/main/ui/workspace/right_header.scss   | 406 +++++-----
 15 files changed, 677 insertions(+), 2184 deletions(-)
 delete mode 100644 frontend/resources/styles/main/partials/workspace-header.scss
 delete mode 100644 frontend/resources/styles/main/partials/zoom-widget.scss
 delete mode 100644 frontend/src/app/main/ui/workspace/header.cljs

diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 9cfb1eb6c4..5ca389803e 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -613,13 +613,13 @@
   }
 }
 
-.shortcut {
+.shortcut-base {
   @include flexCenter;
   gap: $s-2;
   color: var(--menu-shortcut-foreground-color);
 }
 
-.shortcut-key {
+.shortcut-key-base {
   @include titleTipography;
   @include flexCenter;
   height: $s-20;
@@ -787,7 +787,7 @@
   background-color: var(--menu-background-color);
 }
 
-.menu-item {
+.menu-item-base {
   @include titleTipography;
   display: flex;
   align-items: center;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 8d20f8f620..3d8346fc5e 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -57,7 +57,6 @@
 @import "main/partials/viewer";
 @import "main/partials/viewer-header";
 @import "main/partials/viewer-thumbnails";
-@import "main/partials/zoom-widget";
 @import "main/partials/activity-bar";
 @import "main/partials/color-palette";
 @import "main/partials/text-palette";
@@ -84,7 +83,6 @@
 @import "main/partials/tool-bar";
 @import "main/partials/user-settings";
 @import "main/partials/workspace";
-@import "main/partials/workspace-header";
 @import "main/partials/comments";
 @import "main/partials/color-bullet";
 @import "main/partials/inspect";
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index 7615ef6635..f3ca1df159 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -1786,221 +1786,6 @@
   }
 }
 
-// Export multiple
-
-.export-progress-modal-overlay {
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  right: 1rem;
-  top: 3rem;
-  padding: 16px 18px;
-  background-color: $color-white;
-  border: 1px solid $color-gray-20;
-  border-radius: $br3;
-  z-index: 1000;
-
-  &.transparent {
-    background-color: rgba($color-white, 0);
-  }
-
-  .export-progress-modal-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    height: 100%;
-    width: 100%;
-
-    .progress-bar {
-      margin-top: 1rem;
-    }
-
-    .export-progress-modal-header {
-      align-items: center;
-      display: flex;
-      justify-content: stretch;
-      margin-bottom: 7px;
-
-      .modal-close-button {
-        display: flex;
-        justify-content: center;
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        padding: 2px 0;
-
-        svg {
-          height: 18px;
-          width: 18px;
-          transform: rotate(45deg);
-        }
-      }
-
-      .export-progress-modal-title {
-        padding: 0;
-        margin: 0;
-        color: $color-black;
-        flex-grow: 1;
-        font-size: $fs16;
-      }
-
-      .progress {
-        color: $color-gray-30;
-        font-size: $fs16;
-        margin-bottom: 0;
-        padding-right: 16px;
-        text-align: right;
-      }
-
-      .retry {
-        font-size: $fs12;
-        margin-right: 16px;
-        padding: 4px 12px;
-      }
-    }
-  }
-}
-
-.export-multiple-dialog {
-  .modal-content {
-    padding: 0;
-  }
-
-  .body {
-    overflow-y: auto;
-    margin: 0 0.5rem 0rem 0;
-  }
-
-  .field {
-    flex-grow: 0;
-    margin: 10px 0;
-    padding: 0px 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 50px;
-
-    &.image {
-      align-items: center;
-      border: 1px solid $color-gray-10;
-      border-radius: $br3;
-      display: flex;
-      justify-content: center;
-      height: 32px;
-      margin: 0 8px;
-      width: 32px;
-
-      svg {
-        height: 20px;
-        width: 24px;
-      }
-    }
-
-    &.check {
-      cursor: pointer;
-      height: 18px;
-      padding: 0;
-      width: 30px;
-      svg {
-        fill: $color-white;
-        max-width: 18px;
-        max-height: 18px;
-      }
-
-      & .checked {
-        svg {
-          background-color: $color-primary;
-        }
-      }
-
-      & .intermediate,
-      .unchecked {
-        svg {
-          background-color: $color-gray-10;
-        }
-      }
-    }
-
-    &.title {
-      flex-grow: 1;
-      font-size: $fs12;
-      color: $color-black;
-    }
-
-    &.name {
-      flex-grow: 1;
-      font-size: $fs16;
-      color: $color-black;
-      width: 45%;
-      white-space: nowrap;
-    }
-
-    &.scale {
-      width: 6.25rem;
-    }
-
-    &.scale,
-    &.extension {
-      color: $color-gray-30;
-      font-size: $fs12;
-    }
-  }
-
-  .header {
-    align-items: center;
-    border-bottom: 1px solid $color-gray-10;
-    display: flex;
-    flex-wrap: wrap;
-    height: 32px;
-    justify-content: space-between;
-    padding: 0.5rem 2rem;
-    margin: 0;
-    width: 100%;
-
-    .field {
-      margin: 0;
-    }
-  }
-
-  .row {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    height: 3rem;
-    margin: 0 0.5rem 0 2rem;
-    width: calc(100% - 2.5rem);
-
-    &:not(:first-child) {
-      border-top: 1px solid $color-gray-10;
-    }
-  }
-
-  .modal-footer {
-    padding: 18px;
-  }
-
-  .no-selection {
-    padding: 2rem 1rem 2rem 2rem;
-
-    img {
-      color: $color-primary-dark;
-      float: right;
-      margin-left: 4rem;
-      width: 176px;
-    }
-
-    a {
-      font-size: $fs12;
-    }
-
-    p {
-      color: $color-gray-40;
-      font-size: $fs16;
-      padding: 1rem 0 0 0;
-    }
-  }
-}
-
 .remove-graphics-dialog {
   .modal-content {
     padding-top: 16px;
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
deleted file mode 100644
index d5b93f8018..0000000000
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ /dev/null
@@ -1,364 +0,0 @@
-// 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
-
-.workspace-header {
-  position: relative;
-  align-items: center;
-  background-color: $color-gray-50;
-  border-bottom: 1px solid $color-gray-60;
-  display: flex;
-  padding: $size-1 $size-4 $size-1 55px;
-  justify-content: space-between;
-
-  display: grid;
-  grid-template-areas: "left center right";
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: 100%;
-  padding: 0;
-
-  .left-area {
-    grid-area: left;
-    display: flex;
-    height: 100%;
-  }
-
-  .center-area {
-    grid-area: center;
-  }
-
-  .right-area {
-    grid-area: right;
-    display: flex;
-    justify-content: flex-end;
-    height: 100%;
-  }
-
-  .main-icon {
-    align-items: center;
-    background-color: $color-gray-60;
-    border-bottom: 1px solid $color-gray-50;
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    width: 48px;
-
-    a {
-      height: 30px;
-
-      svg {
-        fill: $color-gray-30;
-        height: 30px;
-        width: 28px;
-      }
-
-      &:hover {
-        svg {
-          fill: $color-primary;
-        }
-      }
-    }
-  }
-
-  .menu-section {
-    margin-left: 1rem;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .shared-badge {
-    margin-left: $size-1;
-    height: 16px;
-    width: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      fill: $color-gray-20;
-      height: 12px;
-      width: 12px;
-    }
-  }
-
-  .users-section {
-    display: flex;
-  }
-
-  .options-section {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: relative;
-    padding-right: 1rem;
-    border-right: 1px solid black;
-
-    > * {
-      margin-left: $size-5;
-    }
-
-    .zoom-dropdown {
-      top: 45px;
-      left: 98px;
-    }
-  }
-
-  .project-tree {
-    align-items: center;
-    display: flex;
-    margin-left: $size-1;
-    padding: $size-1;
-
-    svg {
-      fill: $color-gray-20;
-      height: 20px;
-      margin-right: $size-2;
-      width: 20px;
-    }
-
-    span {
-      color: $color-white;
-      font-size: $fs14;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      &.project-name {
-        color: $color-gray-20;
-        margin-right: $size-1;
-        cursor: pointer;
-
-        &:hover {
-          color: $color-primary;
-        }
-      }
-    }
-
-    .file-name {
-      margin: 0;
-      padding: 0;
-      border: none;
-      border-bottom: 1px solid $color-gray-10;
-      background: $color-gray-50;
-      color: $color-gray-10;
-      margin-bottom: -1px;
-      &:focus,
-      &:focus-within {
-        outline: none;
-        border-radius: $br3;
-        border: 1px solid $color-primary;
-      }
-    }
-  }
-
-  .menu {
-    position: absolute;
-    top: 40px;
-    left: 40px;
-    width: 195px;
-    z-index: 12;
-
-    background-color: $color-white;
-    border-radius: $br3;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    :first-child {
-      &:hover {
-        border-radius: $br3 $br3 0 0;
-      }
-    }
-    :last-child {
-      &:hover {
-        border-radius: 0 0 $br3 $br3;
-      }
-    }
-
-    li {
-      cursor: pointer;
-      font-size: $fs14;
-      padding: $size-2;
-      display: flex;
-      justify-content: space-between;
-
-      svg {
-        fill: $color-gray-60;
-        height: 12px;
-        width: 12px;
-      }
-
-      span {
-        color: $color-gray-60;
-        margin: 0 $size-1;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-
-      &.info {
-        border-top: 1px solid $color-gray-10;
-      }
-    }
-  }
-
-  .sub-menu {
-    position: absolute;
-    left: 238px;
-    width: 270px;
-    z-index: 12;
-    background-color: $color-white;
-    border-radius: $br3;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    :first-child {
-      &:hover {
-        border-radius: $br3 $br3 0 0;
-      }
-    }
-    :last-child {
-      &:hover {
-        border-radius: 0 0 $br3 $br3;
-      }
-    }
-
-    &.file {
-      top: 40px;
-    }
-
-    &.edit {
-      top: 77px;
-    }
-
-    &.view {
-      top: 114px;
-    }
-
-    &.preferences {
-      top: 150px;
-    }
-
-    &.help-info {
-      top: 186px;
-    }
-
-    li {
-      cursor: pointer;
-      font-size: $fs14;
-      padding: $size-2;
-      display: flex;
-      justify-content: space-between;
-
-      span {
-        color: $color-gray-60;
-        margin: 0 $size-1;
-      }
-
-      .shortcut {
-        color: $color-gray-20;
-        font-size: $fs12;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-
-      &.separator {
-        border-top: 1px solid $color-gray-10;
-      }
-    }
-  }
-
-  .active-users {
-    flex: 1;
-    justify-content: center;
-    display: flex;
-    margin: 0;
-
-    li {
-      margin-left: $size-2;
-      position: relative;
-
-      img {
-        border: 3px solid #f3dd14;
-        border-radius: 50%;
-        flex-shrink: 0;
-        height: 25px;
-        width: 25px;
-      }
-    }
-  }
-
-  & button.document-history {
-    background: $color-gray-60;
-    border-radius: $br3;
-    border: none;
-    cursor: pointer;
-    height: 24px;
-    padding: 3px;
-    width: 24px;
-
-    & svg {
-      width: 18px;
-      fill: $color-gray-20;
-      height: 18px;
-    }
-
-    &.selected svg {
-      fill: $color-primary;
-    }
-  }
-}
-
-.export-progress-widget {
-  cursor: pointer;
-  padding-top: 6px;
-}
-
-.persistence-status-widget {
-  display: flex;
-  margin-left: 0px;
-  margin-right: 10px;
-  width: 150px;
-  justify-content: flex-end;
-
-  > div {
-    display: flex;
-
-    &.error {
-      .label {
-        color: $color-danger;
-      }
-      .icon svg {
-        fill: $color-danger;
-      }
-    }
-
-    &.pending {
-      .label {
-        color: $color-warning;
-      }
-      .icon svg {
-        fill: $color-warning;
-      }
-    }
-  }
-
-  .icon {
-    padding: 0px 10px;
-  }
-
-  .label {
-    color: $color-gray-30;
-    font-size: $fs14;
-  }
-
-  svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-30;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 2dd4c8d4d6..e79aa9a38e 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -57,10 +57,6 @@ $height-palette-max: 80px;
     }
   }
 
-  .workspace-loader {
-    grid-area: viewport;
-  }
-
   .workspace-content {
     grid-area: viewport;
   }
@@ -156,15 +152,15 @@ $height-palette-max: 80px;
   }
 }
 
-.workspace-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+// .workspace-loader {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
 
-  svg {
-    fill: $color-gray-50;
-  }
-}
+//   svg {
+//     fill: $color-gray-50;
+//   }
+// }
 
 .workspace-content {
   background-color: $color-canvas;
diff --git a/frontend/resources/styles/main/partials/zoom-widget.scss b/frontend/resources/styles/main/partials/zoom-widget.scss
deleted file mode 100644
index 1edb1da56a..0000000000
--- a/frontend/resources/styles/main/partials/zoom-widget.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.zoom-widget {
-  cursor: pointer;
-  display: flex;
-  position: relative;
-
-  span {
-    color: $color-gray-10;
-    font-size: $fs14;
-    margin-left: $size-1;
-  }
-
-  .icon svg {
-    fill: $color-gray-10;
-    height: 10px;
-    width: 10px;
-  }
-
-  .dropdown {
-    position: absolute;
-    right: 0;
-    top: 25px;
-    width: 210px;
-    z-index: 12;
-
-    background-color: $color-white;
-    border-radius: $br3;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    li {
-      color: $color-gray-60;
-      cursor: pointer;
-      font-size: $fs14;
-      display: flex;
-      padding: $size-2;
-
-      &.separator {
-        border-top: 1px solid $color-gray-10;
-        padding: 0px;
-        margin: 2px;
-        height: 0;
-      }
-
-      &.basic-zoom-bar {
-        cursor: auto;
-        display: flex;
-        justify-content: space-between;
-
-        &:hover {
-          background-color: $color-white;
-        }
-      }
-
-      span {
-        color: $color-gray-20;
-        font-size: $fs14;
-        margin-left: auto;
-
-        &.zoom-btns {
-          display: flex;
-          margin-left: 2px;
-          color: $color-gray-60;
-
-          p {
-            margin-bottom: 0;
-            font-size: $fs14;
-            padding: 0 3px;
-          }
-        }
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-
-      button {
-        cursor: pointer;
-        background-color: $color-white;
-        border: none;
-        &:hover {
-          color: $color-primary-darker;
-        }
-      }
-      .reset-btn {
-        color: $color-primary-dark;
-      }
-      .zoom-size {
-        min-width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-      }
-    }
-  }
-}
diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs
index 4362654995..d9fe198e67 100644
--- a/frontend/src/app/main/ui/export.cljs
+++ b/frontend/src/app/main/ui/export.cljs
@@ -26,8 +26,7 @@
 
 (mf/defc export-multiple-dialog
   [{:keys [exports title cmd no-selection]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
-        lstate          (mf/deref refs/export)
+  (let [lstate          (mf/deref refs/export)
         in-progress?    (:in-progress lstate)
 
         exports         (mf/use-state exports)
@@ -67,139 +66,53 @@
           (swap! exports (fn [exports]
                            (mapv #(assoc % :enabled (not all-checked?)) exports))))]
 
-    (if new-css-system
-      [:div {:class (stl/css :modal-overlay)}
-       [:div {:class (stl/css-case :modal-container true
-                                   :empty (empty? all-exports))}
+    [:div {:class (stl/css :modal-overlay)}
+     [:div {:class (stl/css-case :modal-container true
+                                 :empty (empty? all-exports))}
 
-        [:div {:class (stl/css :modal-header)}
-         [:h2 {:class (stl/css :modal-title)} title]
-         [:button {:class (stl/css :modal-close-btn)
-                   :on-click cancel-fn}
-          i/close-refactor]]
+      [:div {:class (stl/css :modal-header)}
+       [:h2 {:class (stl/css :modal-title)} title]
+       [:button {:class (stl/css :modal-close-btn)
+                 :on-click cancel-fn}
+        i/close-refactor]]
 
-        [:*
-         [:div {:class (stl/css :modal-content)}
-          (if (> (count all-exports) 0)
-            [:*
-             [:div {:class (stl/css :selection-header)}
-              [:button {:class (stl/css :selection-btn)
-                        :on-click change-all}
-               [:span {:class (stl/css :checkbox-wrapper)}
-                (cond
-                  all-checked? [:span {:class (stl/css-case :checkobox-tick true
-                                                            :global/checked true)} i/tick-refactor]
-                  all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
-                                                              :global/uncheked true)}]
-                  :else [:span {:class (stl/css-case :checkobox-tick true
-                                                     :global/intermediate true)} i/remove-refactor])]]
-              [:div {:class (stl/css :selection-title)}
-               (tr "dashboard.export-multiple.selected"
-                   (c (count enabled-exports))
-                   (c (count all-exports)))]]
-             [:div {:class (stl/css :selection-wrapper)}
-              [:div {:class (stl/css-case :selection-list true
-                                          :selection-shadow (> (count all-exports) 8))}
-               (for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
-                 (let [{:keys [x y width height]} (:selrect shape)]
-                   [:div {:class (stl/css :selection-row)
-                          :key (:id shape)}
-                    [:button {:class (stl/css :selection-btn)
-                              :data-value index
-                              :on-click on-toggle-enabled}
-                     [:span {:class (stl/css :checkbox-wrapper)}
-                      (if (:enabled export)
-                        [:span {:class (stl/css-case :checkobox-tick true
-                                                     :global/checked true)} i/tick-refactor]
-                        [:span {:class (stl/css-case :checkobox-tick true
-                                                     :global/uncheked true)}])]
-
-                     [:div {:class (stl/css :image-wrapper)}
-                      (if (some? (:thumbnail shape))
-                        [:img {:src (:thumbnail shape)}]
-                        [:svg {:view-box (dm/str x " " y " " width " " height)
-                               :width 24
-                               :height 20
-                               :version "1.1"
-                               :xmlns "http://www.w3.org/2000/svg"
-                               :xmlnsXlink "http://www.w3.org/1999/xlink"
-                                                   ;; Fix Chromium bug about color of html texts
-                                                   ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
-                               :style {:-webkit-print-color-adjust :exact}
-                               :fill "none"}
-
-                         [:& shape-wrapper {:shape shape}]])]
-
-                     [:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))]
-                     (when (:scale export)
-                       [:div {:class (stl/css :selection-scale)}
-                        (dm/str (ust/format-precision (* width (:scale export)) 2) "px"
-                                (ust/format-precision (* height (:scale export)) 2) "px")])
-
-                     (when (:type export)
-                       [:div {:class (stl/css :selection-extension)}
-                        (-> export :type d/name str/upper)])]]))]]]
-
-            [:& no-selection])]
-
-         (when (> (count all-exports) 0)
-           [:div {:class (stl/css :modal-footer)}
-            [:div {:class (stl/css :action-buttons)}
-             [:input
-              {:class (stl/css :cancel-button)
-               :type "button"
-               :value (tr "labels.cancel")
-               :on-click cancel-fn}]
-
-             [:input {:class (stl/css-case :accept-btn true
-                                           :btn-disabled (or in-progress? all-unchecked?))
-                      :disabled (or in-progress? all-unchecked?)
-                      :type "button"
-                      :value (if in-progress?
-                               (tr "workspace.options.exporting-object")
-                               (tr "labels.export"))
-                      :on-click (when-not in-progress? accept-fn)}]]])]]]
-
-
-
-      [:div.modal-overlay
-       [:div.modal-container.export-multiple-dialog
-        {:class (when (empty? all-exports) "empty")}
-
-        [:div.modal-header
-         [:div.modal-header-title
-          [:h2 title]]
-
-         [:div.modal-close-button
-          {:on-click cancel-fn} i/close]]
-
-        [:*
-         [:div.modal-content
-          (if (> (count all-exports) 0)
-            [:*
-
-
-             [:div.header
-              [:div.field.check {:on-click change-all}
-               (cond
-                 all-checked? [:span.checked i/checkbox-checked]
-                 all-unchecked? [:span.unchecked i/checkbox-unchecked]
-                 :else [:span.intermediate i/checkbox-intermediate])]
-              [:div.field.title (tr "dashboard.export-multiple.selected"
-                                    (c (count enabled-exports))
-                                    (c (count all-exports)))]]
-
-             [:div.body
-              (for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
-                (let [{:keys [x y width height]} (:selrect shape)]
-                  [:div.row
-                   [:div.field.check {:data-value index
-                                      :on-click on-toggle-enabled}
+      [:*
+       [:div {:class (stl/css :modal-content)}
+        (if (> (count all-exports) 0)
+          [:*
+           [:div {:class (stl/css :selection-header)}
+            [:button {:class (stl/css :selection-btn)
+                      :on-click change-all}
+             [:span {:class (stl/css :checkbox-wrapper)}
+              (cond
+                all-checked? [:span {:class (stl/css-case :checkobox-tick true
+                                                          :global/checked true)} i/tick-refactor]
+                all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
+                                                            :global/uncheked true)}]
+                :else [:span {:class (stl/css-case :checkobox-tick true
+                                                   :global/intermediate true)} i/remove-refactor])]]
+            [:div {:class (stl/css :selection-title)}
+             (tr "dashboard.export-multiple.selected"
+                 (c (count enabled-exports))
+                 (c (count all-exports)))]]
+           [:div {:class (stl/css :selection-wrapper)}
+            [:div {:class (stl/css-case :selection-list true
+                                        :selection-shadow (> (count all-exports) 8))}
+             (for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
+               (let [{:keys [x y width height]} (:selrect shape)]
+                 [:div {:class (stl/css :selection-row)
+                        :key (:id shape)}
+                  [:button {:class (stl/css :selection-btn)
+                            :data-value index
+                            :on-click on-toggle-enabled}
+                   [:span {:class (stl/css :checkbox-wrapper)}
                     (if (:enabled export)
-                      [:span.checked i/checkbox-checked]
-                      [:span.unchecked i/checkbox-unchecked])]
+                      [:span {:class (stl/css-case :checkobox-tick true
+                                                   :global/checked true)} i/tick-refactor]
+                      [:span {:class (stl/css-case :checkobox-tick true
+                                                   :global/uncheked true)}])]
 
-                   [:div.field.image
+                   [:div {:class (stl/css :image-wrapper)}
                     (if (some? (:thumbnail shape))
                       [:img {:src (:thumbnail shape)}]
                       [:svg {:view-box (dm/str x " " y " " width " " height)
@@ -208,59 +121,51 @@
                              :version "1.1"
                              :xmlns "http://www.w3.org/2000/svg"
                              :xmlnsXlink "http://www.w3.org/1999/xlink"
-                                 ;; Fix Chromium bug about color of html texts
-                                 ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
+                                                       ;; Fix Chromium bug about color of html texts
+                                                       ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
                              :style {:-webkit-print-color-adjust :exact}
                              :fill "none"}
 
                        [:& shape-wrapper {:shape shape}]])]
 
-                   [:div.field.name (cond-> (:name shape) suffix (str suffix))]
+                   [:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))]
                    (when (:scale export)
-                     [:div.field.scale (dm/str (ust/format-precision (* width (:scale export)) 2) "px"
-                                               (ust/format-precision (* height (:scale export)) 2) "px ")])
+                     [:div {:class (stl/css :selection-scale)}
+                      (dm/str (ust/format-precision (* width (:scale export)) 2) "px"
+                              (ust/format-precision (* height (:scale export)) 2) "px")])
 
                    (when (:type export)
-                     [:div.field.extension (-> export :type d/name str/upper)])]))]
+                     [:div {:class (stl/css :selection-extension)}
+                      (-> export :type d/name str/upper)])]]))]]]
 
-             [:div.modal-footer
-              [:div.action-buttons
-               [:input.cancel-button
-                {:type "button"
-                 :value (tr "labels.cancel")
-                 :on-click cancel-fn}]
+          [:& no-selection])]
 
-               [:input.accept-button.primary
-                {:class (dom/classnames
-                         :btn-disabled (or in-progress? all-unchecked?))
-                 :disabled (or in-progress? all-unchecked?)
-                 :type "button"
-                 :value (if in-progress?
-                          (tr "workspace.options.exporting-object")
-                          (tr "labels.export"))
-                 :on-click (when-not in-progress? accept-fn)}]]]]
+       (when (> (count all-exports) 0)
+         [:div {:class (stl/css :modal-footer)}
+          [:div {:class (stl/css :action-buttons)}
+           [:input
+            {:class (stl/css :cancel-button)
+             :type "button"
+             :value (tr "labels.cancel")
+             :on-click cancel-fn}]
 
-            [:& no-selection])]]]])))
+           [:input {:class (stl/css-case :accept-btn true
+                                         :btn-disabled (or in-progress? all-unchecked?))
+                    :disabled (or in-progress? all-unchecked?)
+                    :type "button"
+                    :value (if in-progress?
+                             (tr "workspace.options.exporting-object")
+                             (tr "labels.export"))
+                    :on-click (when-not in-progress? accept-fn)}]]])]]]))
 
 (mf/defc shapes-no-selection []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:div {:class (stl/css :no-selection)}
-       [:p {:class (stl/css :modal-msg)}(tr "dashboard.export-shapes.no-elements")]
-       [:p {:class (stl/css :modal-scd-msg)}(tr "dashboard.export-shapes.how-to")]
-       [:a {:target "_blank"
-            :class (stl/css :modal-link)
-            :href "https://help.penpot.app/user-guide/exporting/ "}
-        (tr "dashboard.export-shapes.how-to-link")]]
-
-
-      [:div.no-selection
-       [:img {:src "images/export-no-shapes.png" :border "0"}]
-       [:p (tr "dashboard.export-shapes.no-elements")]
-       [:p (tr "dashboard.export-shapes.how-to")]
-       [:p [:a {:target "_blank"
-                :href "https://help.penpot.app/user-guide/exporting/ "}
-            (tr "dashboard.export-shapes.how-to-link")]]])))
+  [:div {:class (stl/css :no-selection)}
+   [:p {:class (stl/css :modal-msg)} (tr "dashboard.export-shapes.no-elements")]
+   [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export-shapes.how-to")]
+   [:a {:target "_blank"
+        :class (stl/css :modal-link)
+        :href "https://help.penpot.app/user-guide/exporting/ "}
+    (tr "dashboard.export-shapes.how-to-link")]])
 
 (mf/defc export-shapes-dialog
   {::mf/register modal/components
@@ -323,38 +228,10 @@
         toggle-detail-visibility
         (mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
 
-    (if new-css-system
-      (when detail-visible?
-        [:div {:class (stl/css :export-progress-modal-overlay)}
-         [:div {:class (stl/css :export-progress-modal-container)}
-          [:div {:class (stl/css :export-progress-modal-header)}
-           [:p {:class (stl/css :export-progress-modal-title)}
-            [:span {:class (stl/css :title-text)}
-             title]
-            (if error?
-              [:button {:class (stl/css :retry-btn)
-                        :on-click retry-last-export} (tr "workspace.options.retry")]
-              [:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
-
-           [:button {:class (stl/css :modal-close-button)
-                     :on-click toggle-detail-visibility} i/close-refactor]]
-
-          [:svg {:class (stl/css :progress-bar)
-                 :height 5 :width 280}
-           [:g
-            [:path {:d "M0 0 L280 0"
-                    :stroke clr/black
-                    :stroke-width 30}]
-            [:path {:d (dm/str "M0 0 L280 0")
-                    :stroke color
-                    :stroke-width 30
-                    :fill "transparent"
-                    :stroke-dasharray 280
-                    :stroke-dashoffset (- 280 pwidth)
-                    :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])
-      [:*
+    [*
      (when widget-visible?
-       [:div.export-progress-widget {:on-click toggle-detail-visibility}
+       [:div {:class (stl/css :export-progress-widget)
+              :on-click toggle-detail-visibility}
         [:svg {:width "32" :height "32"}
          [:circle {:r "12"
                    :cx "16"
@@ -373,21 +250,27 @@
                    :transform "rotate(-90 16,16)"
                    :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
 
+
      (when detail-visible?
-       [:div.export-progress-modal-overlay
-        [:div.export-progress-modal-container
-         [:div.export-progress-modal-header
-          [:p.export-progress-modal-title title]
-          (if error?
-            [:button.btn-secondary.retry {:on-click retry-last-export} (tr "workspace.options.retry")]
-            [:p.progress (dm/str progress " / " total)])
+       [:div {:class (stl/css :export-progress-modal-overlay)}
+        [:div {:class (stl/css :export-progress-modal-container)}
+         [:div {:class (stl/css :export-progress-modal-header)}
+          [:p {:class (stl/css :export-progress-modal-title)}
+           [:span {:class (stl/css :title-text)}
+            title]
+           (if error?
+             [:button {:class (stl/css :retry-btn)
+                       :on-click retry-last-export} (tr "workspace.options.retry")]
+             [:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
 
-          [:button.modal-close-button {:on-click toggle-detail-visibility} i/close]]
+          [:button {:class (stl/css :modal-close-button)
+                    :on-click toggle-detail-visibility} i/close-refactor]]
 
-         [:svg.progress-bar {:height 8 :width 280}
+         [:svg {:class (stl/css :progress-bar)
+                :height 5 :width 280}
           [:g
            [:path {:d "M0 0 L280 0"
-                   :stroke clr/gray-10
+                   :stroke clr/black
                    :stroke-width 30}]
            [:path {:d (dm/str "M0 0 L280 0")
                    :stroke color
@@ -395,5 +278,5 @@
                    :fill "transparent"
                    :stroke-dasharray 280
                    :stroke-dashoffset (- 280 pwidth)
-                   :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])))
+                   :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))
 
diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss
index a958a0dc88..51e1edbd51 100644
--- a/frontend/src/app/main/ui/export.scss
+++ b/frontend/src/app/main/ui/export.scss
@@ -16,211 +16,217 @@
   border-radius: $br-8;
   z-index: $z-index-20;
   overflow: hidden;
+}
 
-  .export-progress-modal-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    height: 100%;
-    width: 100%;
-    .export-progress-modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: stretch;
-      padding: $s-8;
-      .export-progress-modal-title {
-        display: flex;
-        flex-grow: 1;
-        padding: 0;
-        margin: 0;
-        .title-text {
-          @include flexCenter;
-          @include titleTipography;
-          padding: 0;
-          margin: 0;
-          color: var(--modal-title-foreground-color);
-          padding-left: $s-4;
-        }
-        .progress {
-          @include titleTipography;
-          padding-left: $s-8;
-          margin: 0;
-          color: var(--modal-text-foreground-color);
-        }
-        .retry-btn {
-          @extend .button-tertiary;
-          @include titleTipography;
-        }
-      }
+.export-progress-modal-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  width: 100%;
+}
+.export-progress-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  padding: $s-8;
+}
 
-      .modal-close-button {
-        @extend .button-tertiary;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-      }
-    }
-    .progress-bar {
-      margin-top: 0;
-    }
+.export-progress-modal-title {
+  display: flex;
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+}
+
+.title-text {
+  @include flexCenter;
+  @include titleTipography;
+  padding: 0;
+  margin: 0;
+  color: var(--modal-title-foreground-color);
+  padding-left: $s-4;
+}
+.progress {
+  @include titleTipography;
+  padding-left: $s-8;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+.retry-btn {
+  @extend .button-tertiary;
+  @include titleTipography;
+}
+
+.modal-close-button {
+  @extend .button-tertiary;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
   }
 }
+.progress-bar {
+  margin-top: 0;
+}
 
 .modal-overlay {
   @extend .modal-overlay-base;
   &.transparent {
     background-color: transparent;
   }
-  .modal-container {
-    @extend .modal-container-base;
-    max-height: calc(10 * $s-80);
-    .modal-header {
-      margin-bottom: $s-24;
-      .modal-title {
-        @include tabTitleTipography;
-        color: var(--modal-title-foreground-color);
-      }
-      .modal-close-btn {
-        @extend .modal-close-btn-base;
+}
+
+.modal-container {
+  @extend .modal-container-base;
+  max-height: calc(10 * $s-80);
+}
+
+.modal-header {
+  margin-bottom: $s-24;
+}
+
+.modal-title {
+  @include tabTitleTipography;
+  color: var(--modal-title-foreground-color);
+}
+
+.modal-close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.modal-content,
+.no-selection {
+  @include titleTipography;
+  margin-bottom: $s-24;
+  .modal-hint {
+    @include titleTipography;
+    color: var(--modal-text-foreground-color);
+  }
+  .modal-link {
+    @include titleTipography;
+    text-decoration: none;
+    cursor: pointer;
+    color: var(--modal-link-foreground-color);
+  }
+  .selection-header {
+    @include flexRow;
+    height: $s-32;
+    margin-bottom: $s-4;
+    .selection-btn {
+      @include buttonStyle;
+      @extend .input-checkbox;
+      @include flexCenter;
+      height: $s-24;
+      width: $s-24;
+      padding: 0;
+      margin-left: $s-16;
+      span {
+        @extend .checkbox-icon;
       }
     }
-    .modal-content,
-    .no-selection {
+    .selection-title {
       @include titleTipography;
-      margin-bottom: $s-24;
-      .modal-hint {
-        @include titleTipography;
-        color: var(--modal-text-foreground-color);
-      }
-      .modal-link {
-        @include titleTipography;
-        text-decoration: none;
-        cursor: pointer;
-        color: var(--modal-link-foreground-color);
-      }
-      .selection-header {
+    }
+  }
+  .selection-wrapper {
+    position: relative;
+    width: 100%;
+    height: fit-content;
+  }
+  .selection-shadow {
+    width: 100%;
+    height: 100%;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 50px;
+      background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
+      content: "";
+      pointer-events: none;
+    }
+  }
+  .selection-list {
+    @include flexColumn;
+    max-height: $s-400;
+    overflow-y: auto;
+    padding-bottom: $s-12;
+    .selection-row {
+      @include flexRow;
+      background-color: var(--entry-background-color);
+      min-height: $s-40;
+      border-radius: $br-8;
+      .selection-btn {
+        @include buttonStyle;
         @include flexRow;
-        height: $s-32;
-        margin-bottom: $s-4;
-        .selection-btn {
-          @include buttonStyle;
+        width: 100%;
+        height: 10%;
+        gap: $s-8;
+        padding: 0 $s-16;
+        .checkbox-wrapper {
           @extend .input-checkbox;
           @include flexCenter;
           height: $s-24;
           width: $s-24;
           padding: 0;
-          margin-left: $s-16;
-          span {
+          .checkobox-tick {
             @extend .checkbox-icon;
           }
         }
-        .selection-title {
+        .selection-name {
           @include titleTipography;
+          @include textEllipsis;
+          flex-grow: 1;
+          color: var(--modal-text-foreground-color);
+          text-align: start;
+        }
+        .selection-scale {
+          @include titleTipography;
+          @include textEllipsis;
+          min-width: $s-108;
+          padding: $s-12;
+          color: var(--modal-text-foreground-color);
+        }
+        .selection-extension {
+          @include titleTipography;
+          @include textEllipsis;
+          min-width: $s-72;
+          padding: $s-12;
+          color: var(--modal-text-foreground-color);
         }
       }
-      .selection-wrapper {
-        position: relative;
-        width: 100%;
-        height: fit-content;
-      }
-      .selection-shadow {
-        width: 100%;
+      .image-wrapper {
+        @include flexCenter;
         height: 100%;
-        &:after {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 50px;
-          background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
-          content: "";
-          pointer-events: none;
-        }
-      }
-      .selection-list {
-        @include flexColumn;
-        max-height: $s-400;
-        overflow-y: auto;
-        padding-bottom: $s-12;
-        .selection-row {
-          @include flexRow;
-          background-color: var(--entry-background-color);
-          min-height: $s-40;
-          border-radius: $br-8;
-          .selection-btn {
-            @include buttonStyle;
-            @include flexRow;
-            width: 100%;
-            height: 10%;
-            gap: $s-8;
-            padding: 0 $s-16;
-            .checkbox-wrapper {
-              @extend .input-checkbox;
-              @include flexCenter;
-              height: $s-24;
-              width: $s-24;
-              padding: 0;
-              .checkobox-tick {
-                @extend .checkbox-icon;
-              }
-            }
-            .selection-name {
-              @include titleTipography;
-              @include textEllipsis;
-              flex-grow: 1;
-              color: var(--modal-text-foreground-color);
-              text-align: start;
-            }
-            .selection-scale {
-              @include titleTipography;
-              @include textEllipsis;
-              min-width: $s-108;
-              padding: $s-12;
-              color: var(--modal-text-foreground-color);
-            }
-            .selection-extension {
-              @include titleTipography;
-              @include textEllipsis;
-              min-width: $s-72;
-              padding: $s-12;
-              color: var(--modal-text-foreground-color);
-            }
-          }
-          .image-wrapper {
-            @include flexCenter;
-            height: 100%;
-            min-height: $s-32;
-            min-width: $s-32;
-            background-color: var(--white);
-            border-radius: $br-6;
-            margin: auto 0;
-            img,
-            svg {
-              object-fit: contain;
-              max-height: $s-40;
-            }
-          }
-        }
-      }
-    }
-    .modal-footer {
-      .action-buttons {
-        @extend .modal-action-btns;
-        .cancel-button {
-          @extend .modal-cancel-btn;
-        }
-        .accept-btn {
-          @extend .modal-accept-btn;
-          &.danger {
-            @extend .modal-danger-btn;
-          }
+        min-height: $s-32;
+        min-width: $s-32;
+        background-color: var(--white);
+        border-radius: $br-6;
+        margin: auto 0;
+        img,
+        svg {
+          object-fit: contain;
+          max-height: $s-40;
         }
       }
     }
   }
 }
 
+.action-buttons {
+  @extend .modal-action-btns;
+}
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+.accept-btn {
+  @extend .modal-accept-btn;
+  &.danger {
+    @extend .modal-danger-btn;
+  }
+}
+
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss
index a0dde598dc..f1bef24f96 100644
--- a/frontend/src/app/main/ui/viewer/header.scss
+++ b/frontend/src/app/main/ui/viewer/header.scss
@@ -283,11 +283,11 @@
 }
 
 .zoom-option {
-  @extend .menu-item;
+  @extend .menu-item-base;
   .shortcuts {
-    @extend .shortcut;
+    @extend .shortcut-base;
     .shortcut-key {
-      @extend .shortcut-key;
+      @extend .shortcut-key-base;
     }
   }
   &:hover {
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 592d614a94..d32af2ee8d 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
    [app.main.data.messages :as msg]
@@ -24,7 +24,6 @@
    [app.main.ui.workspace.colorpicker]
    [app.main.ui.workspace.context-menu :refer [context-menu]]
    [app.main.ui.workspace.coordinates :as coordinates]
-   [app.main.ui.workspace.header :refer [header]]
    [app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
@@ -135,10 +134,8 @@
 
 (mf/defc workspace-loader
   []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    [:div {:class (if new-css-system (css :workspace-loader)
-                      (dom/classnames :workspace-loader true))}
-     i/loader-pencil]))
+  [:div {:class (stl/css :workspace-loader)}
+   i/loader-pencil])
 
 (mf/defc workspace-page
   {::mf/wrap-props false}
@@ -216,33 +213,14 @@
         [:& (mf/provider ctx/components-v2) {:value components-v2?}
          [:& (mf/provider ctx/new-css-system) {:value new-css-system}
           [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
-           (if new-css-system
-             [:section#workspace-refactor {:class (css :workspace)
-                                           :style {:background-color background-color
-                                                   :touch-action "none"}}
-              [:& context-menu]
+           [:section#workspace-refactor {:class (stl/css :workspace)
+                                         :style {:background-color background-color
+                                                 :touch-action "none"}}
+            [:& context-menu]
 
-              (if ^boolean file-ready?
-                [:& workspace-page {:page-id page-id
-                                    :file file
-                                    :wglobal wglobal
-                                    :layout layout}]
-                [:& workspace-loader])]
-
-
-             [:section#workspace {:style {:background-color background-color
-                                          :touch-action "none"}}
-              (when (not (:hide-ui layout))
-                [:& header {:file file
-                            :page-id page-id
-                            :project project
-                            :layout layout}])
-
-              [:& context-menu]
-
-              (if ^boolean file-ready?
-                [:& workspace-page {:page-id page-id
-                                    :file file
-                                    :wglobal wglobal
-                                    :layout layout}]
-                [:& workspace-loader])])]]]]]]]))
+            (if ^boolean file-ready?
+              [:& workspace-page {:page-id page-id
+                                  :file file
+                                  :wglobal wglobal
+                                  :layout layout}]
+              [:& workspace-loader])]]]]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs
deleted file mode 100644
index ed1f369f71..0000000000
--- a/frontend/src/app/main/ui/workspace/header.cljs
+++ /dev/null
@@ -1,692 +0,0 @@
-;; 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
-
-(ns app.main.ui.workspace.header
-  (:require
-   [app.common.files.helpers :as cfh]
-   [app.common.uuid :as uuid]
-   [app.config :as cf]
-   [app.main.data.common :refer [show-shared-dialog]]
-   [app.main.data.events :as ev]
-   [app.main.data.exports :as de]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.shortcuts :as sc]
-   [app.main.refs :as refs]
-   [app.main.repo :as rp]
-   [app.main.store :as st]
-   [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.context :as ctx]
-   [app.main.ui.export :refer [export-progress-widget]]
-   [app.main.ui.formats :as fmt]
-   [app.main.ui.hooks.resize :as r]
-   [app.main.ui.icons :as i]
-   [app.main.ui.workspace.presence :refer [active-sessions]]
-   [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [tr]]
-   [app.util.keyboard :as kbd]
-   [app.util.router :as rt]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [okulary.core :as l]
-   [potok.v2.core :as ptk]
-   [rumext.v2 :as mf]))
-
-(def ref:workspace-persistence
-  (l/derived :workspace-persistence st/state))
-
-;; --- Persistence state Widget
-
-(mf/defc persistence-state-widget
-  {::mf/wrap [mf/memo]}
-  []
-  (let [{:keys [status]} (mf/deref ref:workspace-persistence)]
-    [:div.persistence-status-widget
-     (case status
-       :pending
-       [:div.pending
-        [:span.label (tr "workspace.header.unsaved")]]
-
-       :saving
-       [:div.saving
-        [:span.icon i/toggle]
-        [:span.label (tr "workspace.header.saving")]]
-
-       :saved
-       [:div.saved
-        [:span.icon i/tick]
-        [:span.label (tr "workspace.header.saved")]]
-
-       :error
-       [:div.error {:title "There was an error saving the data. Please refresh if this persists."}
-        [:span.icon i/msg-warning]
-        [:span.label (tr "workspace.header.save-error")]]
-
-       nil)]))
-
-;; --- Zoom Widget
-
-(mf/defc zoom-widget-workspace
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
-  [{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}]
-  (let [open* (mf/use-state false)
-        open? (deref open*)
-
-        open-dropdown
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (reset! open* true)))
-
-        close-dropdown
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (reset! open* false)))
-
-        on-increase
-        (mf/use-fn
-         (mf/deps on-increase)
-         (fn [event]
-           (dom/stop-propagation event)
-           (on-increase)))
-
-        on-decrease
-        (mf/use-fn
-         (mf/deps on-decrease)
-         (fn [event]
-           (dom/stop-propagation event)
-           (on-decrease)))
-
-        zoom (fmt/format-percent zoom {:precision 0})]
-
-    [:div.zoom-widget {:on-click open-dropdown}
-     [:span.label zoom]
-     [:span.icon i/arrow-down]
-     [:& dropdown {:show open? :on-close close-dropdown}
-      [:ul.dropdown
-       [:li.basic-zoom-bar
-        [:span.zoom-btns
-         [:button {:on-click on-decrease} "-"]
-         [:p.zoom-size zoom]
-         [:button {:on-click on-increase} "+"]]
-        [:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]]
-       [:li.separator]
-       [:li {:on-click on-zoom-fit}
-        (tr "workspace.header.zoom-fit-all") [:span (sc/get-tooltip :fit-all)]]
-       [:li {:on-click on-zoom-selected}
-        (tr "workspace.header.zoom-selected") [:span (sc/get-tooltip :zoom-selected)]]]]]))
-
-;; --- Header Users
-
-(mf/defc help-info-menu
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
-  [{:keys [layout on-close]}]
-  (let [nav-to-helpc-center
-        (mf/use-fn #(dom/open-new-window "https://help.penpot.app"))
-
-        nav-to-community
-        (mf/use-fn #(dom/open-new-window "https://community.penpot.app"))
-
-        nav-to-youtube
-        (mf/use-fn #(dom/open-new-window "https://www.youtube.com/c/Penpot"))
-
-        nav-to-templates
-        (mf/use-fn #(dom/open-new-window "https://penpot.app/libraries-templates"))
-
-        nav-to-github
-        (mf/use-fn #(dom/open-new-window "https://github.com/penpot/penpot"))
-
-        nav-to-terms
-        (mf/use-fn #(dom/open-new-window "https://penpot.app/terms"))
-
-        nav-to-feedback
-        (mf/use-fn #(st/emit! (rt/nav-new-window* {:rname :settings-feedback})))
-
-        show-shortcuts
-        (mf/use-fn
-         (mf/deps layout)
-         (fn []
-           (when (contains? layout :collapse-left-sidebar)
-             (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
-
-           (st/emit!
-            (-> (dw/toggle-layout-flag :shortcuts)
-                (vary-meta assoc ::ev/origin "workspace-header")))))
-
-        show-release-notes
-        (mf/use-fn
-         (fn [event]
-           (let [version (:main cf/version)]
-             (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
-             (if (and (kbd/alt? event) (kbd/mod? event))
-               (st/emit! (modal/show {:type :onboarding}))
-               (st/emit! (modal/show {:type :release-notes :version version}))))))]
-
-    [:& dropdown {:show true :on-close on-close}
-     [:ul.sub-menu.help-info
-      [:li {:on-click nav-to-helpc-center}
-       [:span (tr "labels.help-center")]]
-      [:li {:on-click nav-to-community}
-       [:span (tr "labels.community")]]
-      [:li {:on-click nav-to-youtube}
-       [:span (tr "labels.tutorials")]]
-      [:li {:on-click show-release-notes}
-       [:span (tr "labels.release-notes")]]
-      [:li.separator {:on-click nav-to-templates}
-       [:span (tr "labels.libraries-and-templates")]]
-      [:li {:on-click nav-to-github}
-       [:span (tr "labels.github-repo")]]
-      [:li  {:on-click nav-to-terms}
-       [:span (tr "auth.terms-of-service")]]
-      [:li.separator {:on-click show-shortcuts}
-       [:span (tr "label.shortcuts")]
-       [:span.shortcut (sc/get-tooltip :show-shortcuts)]]
-
-      (when (contains? cf/flags :user-feedback)
-        [:*
-         [:li.feedback {:on-click nav-to-feedback}
-          [:span (tr "labels.give-feedback")]]])]]))
-
-(mf/defc preferences-menu
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
-  [{:keys [layout toggle-flag on-close]}]
-  (let [show-nudge-options (mf/use-fn #(modal/show! {:type :nudge-option}))]
-
-    [:& dropdown {:show true :on-close on-close}
-     [:ul.sub-menu.preferences
-      [:li {:on-click toggle-flag
-            :data-flag "scale-text"}
-       [:span
-        (if (contains? layout :scale-text)
-          (tr "workspace.header.menu.disable-scale-content")
-          (tr "workspace.header.menu.enable-scale-content"))]
-       [:span.shortcut (sc/get-tooltip :toggle-scale-text)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "snap-guides"}
-       [:span
-        (if (contains? layout :snap-guides)
-          (tr "workspace.header.menu.disable-snap-guides")
-          (tr "workspace.header.menu.enable-snap-guides"))]
-       [:span.shortcut (sc/get-tooltip :toggle-snap-guide)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "snap-grid"}
-       [:span
-        (if (contains? layout :snap-grid)
-          (tr "workspace.header.menu.disable-snap-grid")
-          (tr "workspace.header.menu.enable-snap-grid"))]
-       [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "dynamic-alignment"}
-       [:span
-        (if (contains? layout :dynamic-alignment)
-          (tr "workspace.header.menu.disable-dynamic-alignment")
-          (tr "workspace.header.menu.enable-dynamic-alignment"))]
-       [:span.shortcut (sc/get-tooltip :toggle-alignment)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "snap-pixel-grid"}
-       [:span
-        (if (contains? layout :snap-pixel-grid)
-          (tr "workspace.header.menu.disable-snap-pixel-grid")
-          (tr "workspace.header.menu.enable-snap-pixel-grid"))]
-       [:span.shortcut (sc/get-tooltip :snap-pixel-grid)]]
-
-      [:li {:on-click show-nudge-options}
-       [:span (tr "modals.nudge-title")]]]]))
-
-(mf/defc view-menu
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
-  [{:keys [layout toggle-flag on-close]}]
-  (let [read-only?   (mf/use-ctx ctx/workspace-read-only?)
-
-        toggle-color-palette
-        (mf/use-fn
-         (fn []
-           (r/set-resize-type! :bottom)
-           (st/emit! (dw/remove-layout-flag :textpalette)
-                     (-> (dw/toggle-layout-flag :colorpalette)
-                         (vary-meta assoc ::ev/origin "workspace-menu")))))
-
-        toggle-text-palette
-        (mf/use-fn
-         (fn []
-           (r/set-resize-type! :bottom)
-           (st/emit! (dw/remove-layout-flag :colorpalette)
-                     (-> (dw/toggle-layout-flag :textpalette)
-                         (vary-meta assoc ::ev/origin "workspace-menu")))))]
-
-    [:& dropdown {:show true :on-close on-close}
-     [:ul.sub-menu.view
-      [:li {:on-click toggle-flag
-            :data-flag "rules"}
-       [:span
-        (if (contains? layout :rules)
-          (tr "workspace.header.menu.hide-rules")
-          (tr "workspace.header.menu.show-rules"))]
-       [:span.shortcut (sc/get-tooltip :toggle-rules)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "display-grid"}
-       [:span
-        (if (contains? layout :display-grid)
-          (tr "workspace.header.menu.hide-grid")
-          (tr "workspace.header.menu.show-grid"))]
-       [:span.shortcut (sc/get-tooltip :toggle-grid)]]
-
-      (when-not ^boolean read-only?
-        [:*
-         [:li {:on-click toggle-color-palette}
-          [:span
-           (if (contains? layout :colorpalette)
-             (tr "workspace.header.menu.hide-palette")
-             (tr "workspace.header.menu.show-palette"))]
-          [:span.shortcut (sc/get-tooltip :toggle-colorpalette)]]
-
-         [:li {:on-click toggle-text-palette}
-          [:span
-           (if (contains? layout :textpalette)
-             (tr "workspace.header.menu.hide-textpalette")
-             (tr "workspace.header.menu.show-textpalette"))]
-          [:span.shortcut (sc/get-tooltip :toggle-textpalette)]]])
-
-      [:li {:on-click toggle-flag
-            :data-flag "display-artboard-names"}
-       [:span
-        (if (contains? layout :display-artboard-names)
-          (tr "workspace.header.menu.hide-artboard-names")
-          (tr "workspace.header.menu.show-artboard-names"))]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "show-pixel-grid"}
-       [:span
-        (if (contains? layout :show-pixel-grid)
-          (tr "workspace.header.menu.hide-pixel-grid")
-          (tr "workspace.header.menu.show-pixel-grid"))]
-       [:span.shortcut (sc/get-tooltip :show-pixel-grid)]]
-
-      [:li {:on-click toggle-flag
-            :data-flag "hide-ui"}
-       [:span
-        (tr "workspace.shape.menu.hide-ui")]
-       [:span.shortcut (sc/get-tooltip :hide-ui)]]]]))
-
-(mf/defc edit-menu
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
-  [{:keys [on-close]}]
-  (let [select-all (mf/use-fn #(st/emit! (dw/select-all)))
-        undo       (mf/use-fn #(st/emit! dwc/undo))
-        redo       (mf/use-fn #(st/emit! dwc/redo))]
-    [:& dropdown {:show true :on-close on-close}
-     [:ul.sub-menu.edit
-      [:li {:on-click select-all}
-       [:span (tr "workspace.header.menu.select-all")]
-       [:span.shortcut (sc/get-tooltip :select-all)]]
-
-      [:li {:on-click undo}
-       [:span (tr "workspace.header.menu.undo")]
-       [:span.shortcut (sc/get-tooltip :undo)]]
-
-      [:li {:on-click redo}
-       [:span (tr "workspace.header.menu.redo")]
-       [:span.shortcut (sc/get-tooltip :redo)]]]]))
-
-(mf/defc file-menu
-  {::mf/wrap-props false}
-  [{:keys [on-close file team-id]}]
-  (let [file-id   (:id file)
-        shared?   (:is-shared file)
-
-        objects   (mf/deref refs/workspace-page-objects)
-        frames    (->> (cfh/get-immediate-children objects uuid/zero)
-                       (filterv cfh/frame-shape?))
-
-        add-shared-fn
-        (mf/use-fn
-         (mf/deps file-id)
-         #(st/emit! (dwl/set-file-shared file-id true)))
-
-        on-add-shared
-        (mf/use-fn
-         (mf/deps file-id add-shared-fn)
-         #(st/emit! (show-shared-dialog file-id add-shared-fn)))
-
-        on-remove-shared
-        (mf/use-fn
-         (mf/deps file-id)
-         (fn [event]
-           (dom/prevent-default event)
-           (dom/stop-propagation event)
-           (modal/show!
-            {:type :delete-shared-libraries
-             :origin :unpublish
-             :ids #{file-id}
-             :on-accept #(st/emit! (dwl/set-file-shared file-id false))
-             :count-libraries 1})))
-
-        on-export-shapes
-        (mf/use-fn #(st/emit! (de/show-workspace-export-dialog)))
-
-        ;; WARNING: this is broken, but as it is unused code because
-        ;; it belongs to the pre styles/v2 feature which is enabled by
-        ;; default right now. THIS CODE IS PENDING TO BE DELETED
-
-        on-export-file
-        (mf/use-fn
-         (mf/deps file)
-         (fn [event-name binary?]
-           (st/emit! (ptk/event ::ev/event {::ev/name event-name
-                                            ::ev/origin "workspace"
-                                            :num-files 1}))
-
-           (->> (rx/of file)
-                (rx/merge-map
-                 (fn [file]
-                   (->> (rp/cmd! :has-file-libraries {:file-id (:id file)})
-                        (rx/map #(assoc file :has-libraries? %)))))
-                (rx/reduce conj [])
-                (rx/subs!
-                 (fn [files]
-                   (modal/show!
-                    {:type :export
-                     :team-id team-id
-                     :has-libraries? (->> files (some :has-libraries?))
-                     :files files
-                     :binary? binary?}))))))
-
-        on-export-binary-file
-        (mf/use-fn
-         (mf/deps on-export-file)
-         (partial on-export-file "export-binary-files" true))
-
-        on-export-standard-file
-        (mf/use-fn
-         (mf/deps on-export-file)
-         (partial on-export-file "export-standard-files" false))
-
-        on-export-frames
-        (mf/use-fn
-         (mf/deps frames)
-         (fn [_]
-           (st/emit! (de/show-workspace-export-frames-dialog (reverse frames)))))]
-
-    [:& dropdown {:show true :on-close on-close}
-     [:ul.sub-menu.file
-      (if ^boolean shared?
-        [:li {:on-click on-remove-shared}
-         [:span (tr "dashboard.unpublish-shared")]]
-        [:li {:on-click on-add-shared}
-         [:span (tr "dashboard.add-shared")]])
-      [:li.export-file {:on-click on-export-shapes}
-       [:span (tr "dashboard.export-shapes")]
-       [:span.shortcut (sc/get-tooltip :export-shapes)]]
-      [:li.separator.export-file {:on-click on-export-binary-file}
-       [:span (tr "dashboard.download-binary-file")]]
-      [:li.export-file {:on-click on-export-standard-file}
-       [:span (tr "dashboard.download-standard-file")]]
-      (when (seq frames)
-        [:li.separator.export-file {:on-click on-export-frames}
-         [:span (tr "dashboard.export-frames")]])]]))
-
-(mf/defc menu
-  {::mf/wrap-props false}
-  [{:keys [layout file team-id]}]
-  (let [show-menu*     (mf/use-state false)
-        show-menu?     (deref show-menu*)
-        sub-menu*      (mf/use-state false)
-        sub-menu       (deref sub-menu*)
-
-        open-menu
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (reset! show-menu* true)))
-
-        close-menu
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (reset! show-menu* false)))
-
-        close-sub-menu
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (reset! sub-menu* nil)))
-
-        on-menu-click
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (let [menu (-> (dom/get-target event)
-                          (dom/get-data "menu")
-                          (keyword))]
-             (reset! sub-menu* menu))))
-
-        toggle-flag
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (let [flag (-> (dom/get-current-target event)
-                          (dom/get-data "flag")
-                          (keyword))]
-             (st/emit!
-              (-> (dw/toggle-layout-flag flag)
-                  (vary-meta assoc ::ev/origin "workspace-menu"))))))]
-
-
-    [:*
-     [:div.btn-icon-dark.btn-small {:on-click open-menu} i/actions]
-
-     [:& dropdown {:show show-menu? :on-close close-menu}
-      [:ul.menu
-       [:li {:on-click on-menu-click
-             :on-pointer-enter on-menu-click
-             :data-menu "file"}
-        [:span (tr "workspace.header.menu.option.file")]
-        [:span i/arrow-slide]]
-       [:li {:on-click on-menu-click
-             :on-pointer-enter on-menu-click
-             :data-menu "edit"}
-        [:span (tr "workspace.header.menu.option.edit")]
-        [:span i/arrow-slide]]
-       [:li {:on-click on-menu-click
-             :on-pointer-enter on-menu-click
-             :data-menu :view}
-        [:span (tr "workspace.header.menu.option.view")]
-        [:span i/arrow-slide]]
-       [:li {:on-click on-menu-click
-             :on-pointer-enter on-menu-click
-             :data-menu "preferences"}
-        [:span (tr "workspace.header.menu.option.preferences")]
-        [:span i/arrow-slide]]
-       [:li.info {:on-click on-menu-click
-                  :on-pointer-enter on-menu-click
-                  :data-menu "help-info"}
-        [:span (tr "workspace.header.menu.option.help-info")]
-        [:span i/arrow-slide]]]]
-
-     (case sub-menu
-       :file
-       [:& file-menu
-        {:file file
-         :team-id team-id
-         :on-close close-sub-menu}]
-
-       :edit
-       [:& edit-menu
-        {:on-close close-sub-menu}]
-
-       :view
-       [:& view-menu
-        {:layout layout
-         :toggle-flag toggle-flag
-         :on-close close-sub-menu}]
-
-       :preferences
-       [:& preferences-menu
-        {:layout layout
-         :toggle-flag toggle-flag
-         :on-close close-sub-menu}]
-
-       :help-info
-       [:& help-info-menu
-        {:layout layout
-         :on-close close-sub-menu}]
-
-       nil)]))
-
-;; --- Header Component
-
-(mf/defc header
-  {::mf/wrap-props false}
-  [{:keys [file layout project page-id]}]
-  (let [file-id          (:id file)
-        file-name        (:name file)
-        project-id       (:id project)
-        team-id          (:team-id project)
-        shared?          (:is-shared file)
-
-        zoom             (mf/deref refs/selected-zoom)
-        read-only?       (mf/use-ctx ctx/workspace-read-only?)
-
-        on-increase      (mf/use-fn #(st/emit! (dw/increase-zoom nil)))
-        on-decrease      (mf/use-fn #(st/emit! (dw/decrease-zoom nil)))
-        on-zoom-reset    (mf/use-fn #(st/emit! dw/reset-zoom))
-        on-zoom-fit      (mf/use-fn #(st/emit! dw/zoom-to-fit-all))
-        on-zoom-selected (mf/use-fn #(st/emit! dw/zoom-to-selected-shape))
-
-
-        editing*       (mf/use-state false)
-        editing?       (deref editing*)
-
-        input-ref      (mf/use-ref nil)
-
-        handle-blur
-        (mf/use-fn
-         (mf/deps file-id)
-         (fn [_]
-           (let [value (str/trim (-> input-ref mf/ref-val dom/get-value))]
-             (when (not= value "")
-               (st/emit! (dw/rename-file file-id value)))
-             (reset! editing* false))))
-
-        handle-name-keydown
-        (mf/use-fn
-         (mf/deps handle-blur)
-         (fn [event]
-           (when (kbd/enter? event)
-             (handle-blur event))))
-
-        start-editing-name
-        (mf/use-fn
-         (fn [event]
-           (dom/prevent-default event)
-           (reset! editing* true)))
-
-        go-back
-        (mf/use-fn
-         (mf/deps project)
-         (fn []
-           (st/emit! (dw/go-to-dashboard project))))
-
-        nav-to-viewer
-        (mf/use-fn
-         (mf/deps file-id page-id)
-         (fn []
-           (let [params {:page-id page-id
-                         :file-id file-id
-                         :section "interactions"}]
-             (st/emit! (dw/go-to-viewer params)))))
-
-        nav-to-project
-        (mf/use-fn
-         (mf/deps team-id project-id)
-         #(st/emit! (rt/nav-new-window* {:rname :dashboard-files
-                                         :path-params {:team-id team-id
-                                                       :project-id project-id}})))
-
-        toggle-history
-        (mf/use-fn
-         #(st/emit! (-> (dw/toggle-layout-flag :document-history)
-                        (vary-meta assoc ::ev/origin "workspace-header"))))]
-
-    (mf/with-effect [editing?]
-      (when ^boolean editing?
-        (dom/select-text! (mf/ref-val input-ref))))
-
-    [:header.workspace-header
-     [:div.left-area
-      [:div.main-icon
-       [:a {:on-click go-back} i/logo-icon]]
-
-      [:div.menu-section
-       [:& menu {:layout layout
-                 :file file
-                 :read-only? read-only?
-                 :team-id team-id
-                 :page-id page-id}]
-
-       [:div.project-tree {:alt (tr "workspace.sitemap")}
-        [:span.project-name
-         {:on-click nav-to-project}
-         (:name project) " /"]
-
-        (if ^boolean editing?
-          [:input.file-name
-           {:type "text"
-            :ref input-ref
-            :on-blur handle-blur
-            :on-key-down handle-name-keydown
-            :auto-focus true
-            :default-value (:name file "")}]
-          [:span
-           {:on-double-click start-editing-name}
-           file-name])]
-
-       (when ^boolean shared?
-         [:div.shared-badge i/library])]]
-
-     [:div.center-area
-      [:div.users-section
-       [:& active-sessions]]]
-
-     [:div.right-area
-      [:div.options-section
-       [:& persistence-state-widget]
-       [:& export-progress-widget]
-       (when-not ^boolean read-only?
-         [:button.document-history
-          {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
-           :aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
-           :class (when (contains? layout :document-history) "selected")
-           :on-click toggle-history}
-          i/recent])]
-
-      [:div.options-section
-       [:& zoom-widget-workspace
-        {:zoom zoom
-         :on-increase on-increase
-         :on-decrease on-decrease
-         :on-zoom-reset on-zoom-reset
-         :on-zoom-fit on-zoom-fit
-         :on-zoom-selected on-zoom-selected}]
-
-       [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
-        {:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
-         :on-click nav-to-viewer}
-        i/play]]]]))
-
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 4ff00abcaa..cdd6864ad1 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -319,7 +319,8 @@
 
      (when-not ^boolean read-only?
        [:*
-        [:> dropdown-menu-item* {:class (stl/css :submenu-item)         :on-click    toggle-color-palette
+        [:> dropdown-menu-item* {:class (stl/css :submenu-item)
+                                 :on-click    toggle-color-palette
                                  :on-key-down (fn [event]
                                                 (when (kbd/enter? event)
                                                   (toggle-color-palette event)))
@@ -332,7 +333,8 @@
           (for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))]
             [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
 
-        [:> dropdown-menu-item* {:class (stl/css :submenu-item)         :on-click    toggle-text-palette
+        [:> dropdown-menu-item* {:class (stl/css :submenu-item)
+                                 :on-click    toggle-text-palette
                                  :on-key-down (fn [event]
                                                 (when (kbd/enter? event)
                                                   (toggle-text-palette event)))
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index 0e90f6ca43..7b34ccb0aa 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -11,169 +11,163 @@
   align-items: center;
   height: $s-48;
   padding: $s-8 $s-8 $s-4 $s-8;
-  .main-icon {
-    @include flexCenter;
-    width: $s-32;
+}
+
+.main-icon {
+  @include flexCenter;
+  width: $s-32;
+  height: $s-32;
+  margin-right: $s-4;
+  svg {
     height: $s-32;
-    margin-right: $s-4;
-    svg {
-      height: $s-32;
-      fill: var(--icon-foreground-hover);
-    }
+    fill: var(--icon-foreground-hover);
   }
-  .project-tree {
-    flex-grow: 1;
-    max-width: calc(100% - $s-64);
-    position: relative;
-    .project-name,
-    .file-name {
-      @include tabTitleTipography;
-      @include textEllipsis;
-      height: $s-16;
-      width: 100%;
-      padding-bottom: $s-2;
-      margin-top: -2px;
-      color: var(--title-foreground-color);
-      cursor: pointer;
-    }
-    .file-name {
-      @include medTitleTipography;
-      text-transform: none;
-      color: var(--title-foreground-color-hover);
-    }
-    .file-name-input {
-      @include flexCenter;
-      height: 100%;
-      width: 100%;
-      margin: 0;
-      border: 0;
-      border-radius: $br-4;
-      background-color: var(--input-background-color);
-      font-size: $fs-14;
-      color: var(--input-foreground-color);
-      z-index: 20;
-      white-space: break-spaces;
-      &:focus {
-        outline: none;
-      }
-    }
+}
+
+.project-tree {
+  position: relative;
+  flex-grow: 1;
+  max-width: calc(100% - $s-64);
+}
+
+.project-name,
+.file-name {
+  @include tabTitleTipography;
+  @include textEllipsis;
+  height: $s-16;
+  width: 100%;
+  padding-bottom: $s-2;
+  margin-top: calc(-1 * $s-2);
+  color: var(--title-foreground-color);
+  cursor: pointer;
+}
+
+.file-name {
+  @include medTitleTipography;
+  text-transform: none;
+  color: var(--title-foreground-color-hover);
+}
+
+.file-name-input {
+  @include flexCenter;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: $br-4;
+  background-color: var(--input-background-color);
+  font-size: $fs-14;
+  color: var(--input-foreground-color);
+  z-index: $z-index-20;
+  white-space: break-spaces;
+  &:focus {
+    outline: none;
   }
-  .shared-badge {
-    @include flexCenter;
+}
+
+.shared-badge {
+  @include flexCenter;
+  width: $s-16;
+  height: $s-32;
+  margin-right: $s-4;
+  svg {
+    stroke: var(--button-secondary-foreground-color-rest);
+    fill: none;
+    height: $s-16;
     width: $s-16;
-    height: $s-32;
-    margin-right: $s-4;
-    svg {
-      stroke: var(--button-secondary-foreground-color-rest);
-      fill: none;
-      height: $s-16;
-      width: $s-16;
-    }
   }
-  .menu-btn {
-    @extend .button-tertiary;
-    height: $s-32;
-    width: calc($s-24 + $s-4);
-    padding: 0;
-    border-radius: $br-8;
+}
+
+.menu-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: calc($s-24 + $s-4);
+  padding: 0;
+  border-radius: $br-8;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.menu {
+  @extend .menu-dropdown;
+  top: $s-48;
+  left: calc(var(--width, $s-256) - $s-16);
+  width: $s-192;
+  margin: 0;
+}
+
+.menu-item {
+  @extend .menu-item-base;
+  cursor: pointer;
+  .open-arrow {
+    @include flexCenter;
     svg {
       @extend .button-icon;
       stroke: var(--icon-foreground);
     }
   }
-  .menu {
-    @extend .menu-dropdown;
-    top: $s-48;
-    left: calc(var(--width, $s-256) - $s-16);
-    width: $s-192;
-    margin: 0;
-
-    .menu-item {
-      @extend .menu-item;
-      cursor: pointer;
-    }
-    .separator {
-      margin-top: $s-8;
-      height: $s-4;
-      border-top: 1px solid $db-secondary;
-    }
-    .shortcut {
-      @extend .shortcut;
-    }
-    .shortcut-key {
-      @extend .shortcut-key;
-    }
-    .menu-item {
-      @extend .menu-item;
-      .open-arrow {
-        @include flexCenter;
-        svg {
-          @extend .button-icon;
-          stroke: var(--icon-foreground);
-        }
-      }
-      &:hover {
-        color: var(--menu-foreground-color-hover);
-        .open-arrow {
-          svg {
-            stroke: var(--menu-foreground-color-hover);
-          }
-        }
-        .shortcut-key {
-          color: var(--menu-shortcut-foreground-color-hover);
-        }
+  &:hover {
+    color: var(--menu-foreground-color-hover);
+    .open-arrow {
+      svg {
+        stroke: var(--menu-foreground-color-hover);
       }
     }
-  }
-  .sub-menu {
-    @extend .menu-dropdown;
-    left: calc(var(--width, $s-256) + $s-180);
-    width: $s-192;
-    min-width: calc($s-272 - $s-2);
-    width: 110%;
-    .shortcut {
-      @extend .shortcut;
-    }
-
     .shortcut-key {
-      @extend .shortcut-key;
-    }
-    .submenu-item {
-      @extend .menu-item;
-      &:hover {
-        color: var(--menu-foreground-color-hover);
-        .shortcut-key {
-          color: var(--menu-shortcut-foreground-color-hover);
-        }
-      }
-    }
-
-    .shortcut {
-      @extend .shortcut;
-    }
-
-    .shortcut-key {
-      @extend .shortcut-key;
-    }
-
-    &.file {
-      top: $s-48;
-    }
-
-    &.edit {
-      top: $s-76;
-    }
-
-    &.view {
-      top: $s-116;
-    }
-
-    &.preferences {
-      top: $s-148;
-    }
-
-    &.help-info {
-      top: $s-196;
+      color: var(--menu-shortcut-foreground-color-hover);
     }
   }
 }
+
+.separator {
+  margin-top: $s-8;
+  height: $s-4;
+  border-top: $s-1 solid $db-secondary;
+}
+
+.shortcut {
+  @extend .shortcut-base;
+}
+.shortcut-key {
+  @extend .shortcut-key-base;
+}
+
+.sub-menu {
+  @extend .menu-dropdown;
+  left: calc(var(--width, $s-256) + $s-180);
+  width: $s-192;
+  min-width: calc($s-272 - $s-2);
+  width: 110%;
+
+  .submenu-item {
+    @extend .menu-item-base;
+    &:hover {
+      color: var(--menu-foreground-color-hover);
+      .shortcut-key {
+        color: var(--menu-shortcut-foreground-color-hover);
+      }
+    }
+  }
+
+  &.file {
+    top: $s-48;
+  }
+
+  &.edit {
+    top: $s-76;
+  }
+
+  &.view {
+    top: $s-116;
+  }
+
+  &.preferences {
+    top: $s-148;
+  }
+
+  &.help-info {
+    top: $s-196;
+  }
+}
diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs
index cf2af95cf6..f1afac29d8 100644
--- a/frontend/src/app/main/ui/workspace/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/presence.cljs
@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.config :as cfg]
    [app.main.refs :as refs]
-   [app.main.ui.context :as ctx]
    [app.util.dom :as dom]
    [app.util.timers :as tm]
    [rumext.v2 :as mf]))
@@ -32,8 +31,7 @@
 (mf/defc active-sessions
   {::mf/wrap [mf/memo]}
   []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        users          (mf/deref refs/users)
+  (let [users          (mf/deref refs/users)
         presence       (mf/deref refs/workspace-presence)
         user-ids       (vals presence)
         num-users      (count user-ids)
@@ -48,39 +46,30 @@
             #(dom/focus! (dom/get-element "users-close")))))
         close-users-widget (mf/use-fn #(reset! open* false))]
 
-    (if new-css-system
-      [:*
-       (when (and (> num-users 2) open?)
-         [:button
-          {:id "users-close"
-           :class (stl/css :active-users-opened)
-           :on-click close-users-widget
-           :on-blur close-users-widget}
-          [:ul {:class (stl/css :active-users-list)}
-           (for [session user-ids]
-             [:& session-widget
-              {:session session
-               :index 0
-               :profile (get users (:profile-id session))
-               :key (:id session)}])]])
-
-       [:button {:class (stl/css-case :active-users true)
-                 :on-click open-users-widget}
-
+    [:*
+     (when (and (> num-users 2) open?)
+       [:button {:id "users-close"
+                 :class (stl/css :active-users-opened)
+                 :on-click close-users-widget
+                 :on-blur close-users-widget}
         [:ul {:class (stl/css :active-users-list)}
-         (when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))])
-         (for [[index session] (d/enumerate first-users)]
+         (for [session user-ids]
            [:& session-widget
             {:session session
-             :index index
+             :index 0
              :profile (get users (:profile-id session))
-             :key (:id session)}])]]]
+             :key (:id session)}])]])
 
-      [:ul.active-users
-       (for [session (vals presence)]
+     [:button {:class (stl/css-case :active-users true)
+               :on-click open-users-widget}
+
+      [:ul {:class (stl/css :active-users-list)}
+       (when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))])
+       (for [[index session] (d/enumerate first-users)]
          [:& session-widget
           {:session session
+           :index index
            :profile (get users (:profile-id session))
-           :key (:id session)}])])))
+           :key (:id session)}])]]]))
 
 
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index 6b54cb3905..9eafbcb7d9 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -13,206 +13,218 @@
   padding: $s-8;
   gap: $s-8;
   background-color: var(--panel-background-color);
-  .users-section {
-    position: relative;
-    min-width: $s-32;
-    max-width: $s-72;
-    padding: $s-4 $s-6;
-  }
-  .separator {
-    flex: 1;
-  }
-  .zoom-section {
-    .zoom-widget {
-      @include buttonStyle;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: $s-28;
-      max-width: $s-48;
-      width: $s-48;
-      border-radius: $br-8;
-      .label {
-        @include titleTipography;
-        color: var(--button-tertiary-foreground-color-rest);
-      }
+}
 
-      &:hover {
-        .label {
-          color: var(--button-tertiary-foreground-color-focus);
-        }
-      }
-      &.selected {
-        .label {
-          color: var(--button-tertiary-foreground-color-focus);
-        }
-      }
-    }
-    .dropdown {
-      @extend .menu-dropdown;
-      right: $s-2;
-      top: calc($s-2 + $s-48);
-      width: $s-272;
-      .basic-zoom-bar {
-        display: flex;
-        justify-content: space-between;
-        padding: $s-6;
-        cursor: auto;
-        .zoom-btns {
-          display: flex;
-          .zoom-btn {
-            @extend .button-tertiary;
-            height: $s-28;
-            width: $s-28;
-            border-radius: $br-8;
-            .zoom-icon {
-              @include flexCenter;
-              svg {
-                @extend .button-icon;
-                stroke: var(--icon-foreground);
-              }
-            }
-            &:hover {
-              .zoom-icon svg {
-                stroke: var(--button-tertiary-foreground-color-hover);
-              }
-            }
-          }
-          .zoom-text {
-            @include flexCenter;
-            height: 100%;
-            min-width: $s-48;
-            padding: 0;
-            margin: 0 $s-2;
-            color: var(--modal-title-foreground-color);
-          }
-        }
-        .reset-btn {
-          @extend .button-tertiary;
-          color: var(--button-tertiary-foreground-color-hover);
-          height: $s-28;
-          border-radius: $br-8;
-        }
-      }
-      .zoom-option {
-        @extend .menu-item;
-        .shortcuts {
-          @extend .shortcut;
-          .shortcut-key {
-            @extend .shortcut-key;
-          }
-        }
-        &:hover {
-          color: var(--menu-foreground-color-hover);
-          .shortcuts {
-            .shortcut-key {
-              color: var(--menu-foreground-color-hover);
-            }
-          }
-        }
-      }
+.users-section {
+  position: relative;
+  min-width: $s-32;
+  max-width: $s-72;
+  padding: $s-4 $s-6;
+}
+
+.separator {
+  flex: 1;
+}
+
+.zoom-widget {
+  @include buttonStyle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $s-28;
+  max-width: $s-48;
+  width: $s-48;
+  border-radius: $br-8;
+  .label {
+    @include titleTipography;
+    color: var(--button-tertiary-foreground-color-rest);
+  }
+
+  &:hover {
+    .label {
+      color: var(--button-tertiary-foreground-color-focus);
     }
   }
-  .comments-section {
-    .comments-btn {
-      @extend .button-tertiary;
-      border-radius: $br-8;
-      margin: 0;
-      height: $s-28;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-        height: $s-16;
-        width: $s-16;
-      }
-      &:hover {
-        background-color: transparent;
-        border: none;
-      }
-      &.selected {
-        background-color: var(--button-tertiary-background-color-selected);
-        border: $s-2 solid var(--button-tertiary-border-color-selected);
-        svg {
-          stroke: var(--button-tertiary-foreground-color-active);
-        }
-      }
-    }
-  }
-  .history-section {
-    .history-button {
-      @extend .button-tertiary;
-      border-radius: $br-8;
-      margin: 0;
-      height: $s-28;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-        height: $s-16;
-        width: $s-16;
-      }
-      &:hover {
-        background-color: transparent;
-        border: none;
-      }
-      &.selected {
-        background-color: var(--button-tertiary-background-color-selected);
-        border: $s-2 solid var(--button-tertiary-border-color-selected);
-        svg {
-          stroke: var(--button-tertiary-foreground-color-active);
-        }
-      }
-    }
-  }
-  .persistence-status-widget {
-    @include flexCenter;
-    width: $s-28;
-    height: $s-28;
-    .status-icon {
-      @include flexCenter;
-      margin: 0;
-      width: $s-16;
-      height: $s-16;
-      border-radius: $br-circle;
-      svg {
-        @extend .button-icon;
-        height: $s-12;
-        width: $s-12;
-        stroke: var(--status-icon-foreground-color);
-      }
-    }
-    .pending-status {
-      background-color: var(--status-warning-background-color);
-    }
-    .saving-status {
-      background-color: var(--status-pending-background-color);
-      svg {
-        animation: spin-animation 1s infinite;
-        animation-timing-function: linear;
-      }
-    }
-    .saved-status {
-      background-color: var(--status-ok-background-color);
-    }
-    .error-status {
-      background-color: var(--status-error-background-color);
-    }
-  }
-  .viewer-btn {
-    @extend .button-tertiary;
-    border-radius: $br-8;
-    margin: 0;
-    width: $s-28;
-    height: $s-28;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-      height: $s-16;
-      width: $s-16;
-    }
-    &:hover {
-      background-color: transparent;
+  &.selected {
+    .label {
+      color: var(--button-tertiary-foreground-color-focus);
     }
   }
 }
+
+.dropdown {
+  @extend .menu-dropdown;
+  right: $s-2;
+  top: calc($s-2 + $s-48);
+  width: $s-272;
+}
+
+.basic-zoom-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: $s-6;
+  cursor: auto;
+}
+
+.zoom-btns {
+  display: flex;
+}
+
+.zoom-btn {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  border-radius: $br-8;
+  .zoom-icon {
+    @include flexCenter;
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+    }
+  }
+  &:hover {
+    .zoom-icon svg {
+      stroke: var(--button-tertiary-foreground-color-hover);
+    }
+  }
+}
+
+.zoom-text {
+  @include flexCenter;
+  height: 100%;
+  min-width: $s-48;
+  padding: 0;
+  margin: 0 $s-2;
+  color: var(--modal-title-foreground-color);
+}
+
+.reset-btn {
+  @extend .button-tertiary;
+  color: var(--button-tertiary-foreground-color-hover);
+  height: $s-28;
+  border-radius: $br-8;
+}
+.zoom-option {
+  @extend .menu-item-base;
+  .shortcuts {
+    @extend .shortcut-base;
+    .shortcut-key {
+      @extend .shortcut-key-base;
+    }
+  }
+  &:hover {
+    color: var(--menu-foreground-color-hover);
+    .shortcuts {
+      .shortcut-key {
+        color: var(--menu-foreground-color-hover);
+      }
+    }
+  }
+}
+
+.comments-btn {
+  @extend .button-tertiary;
+  border-radius: $br-8;
+  margin: 0;
+  height: $s-28;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: $s-16;
+    width: $s-16;
+  }
+  &:hover {
+    background-color: transparent;
+    border: none;
+  }
+  &.selected {
+    background-color: var(--button-tertiary-background-color-selected);
+    border: $s-2 solid var(--button-tertiary-border-color-selected);
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+}
+
+.history-button {
+  @extend .button-tertiary;
+  border-radius: $br-8;
+  margin: 0;
+  height: $s-28;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: $s-16;
+    width: $s-16;
+  }
+  &:hover {
+    background-color: transparent;
+    border: none;
+  }
+  &.selected {
+    background-color: var(--button-tertiary-background-color-selected);
+    border: $s-2 solid var(--button-tertiary-border-color-selected);
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+}
+
+.persistence-status-widget {
+  @include flexCenter;
+  width: $s-28;
+  height: $s-28;
+}
+
+.status-icon {
+  @include flexCenter;
+  width: $s-16;
+  height: $s-16;
+  margin: 0;
+  border-radius: $br-circle;
+  svg {
+    @extend .button-icon;
+    height: $s-12;
+    width: $s-12;
+    stroke: var(--status-icon-foreground-color);
+  }
+}
+
+.pending-status {
+  background-color: var(--status-warning-background-color);
+}
+
+.saving-status {
+  background-color: var(--status-pending-background-color);
+  svg {
+    animation: spin-animation 1s infinite;
+    animation-timing-function: linear;
+  }
+}
+
+.saved-status {
+  background-color: var(--status-ok-background-color);
+}
+
+.error-status {
+  background-color: var(--status-error-background-color);
+}
+
+.viewer-btn {
+  @extend .button-tertiary;
+  border-radius: $br-8;
+  margin: 0;
+  width: $s-28;
+  height: $s-28;
+  svg {
+    @extend .button-icon;
+    height: $s-16;
+    width: $s-16;
+    stroke: var(--icon-foreground);
+  }
+  &:hover {
+    background-color: transparent;
+  }
+}