🐛 Fix problems in inspect tab

frontend/src/app/main/ui/components/color_bullet_new.cljs

@@ -17,11 +17,13 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [{:keys [color on-click mini? area]}]
-  (let [on-click (mf/use-fn
+  (let [read-only? (nil? on-click)
-                  (mf/deps color on-click)
+        on-click
-                  (fn [event]
+        (mf/use-fn
-                    (when (fn? on-click)
+         (mf/deps color on-click)
-                      (^function on-click color event))))]
+         (fn [event]
+           (when (fn? on-click)
+             (^function on-click color event))))]
 
     (if (uc/multiple? color)
       [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}]
@@ -39,7 +41,9 @@
                   :is-not-library-color (nil? id)
                   :is-gradient (some? gradient)
                   :is-transparent (and opacity (> 1 opacity))
-                  :grid-area area)
+                  :grid-area area
+                  :read-only read-only?)
+          :data-readonly (str read-only?)
           :on-click on-click}
 
          (cond

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

@@ -64,7 +64,7 @@
     height: 100%;
     background-color: var(--color-bullet-background-color);
   }
-  &:hover {
+  &:hover:not(.read-only) {
     border: $s-2 solid var(--color-bullet-border-color-selected);
   }
 }

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

@@ -261,7 +261,10 @@
                           :collapsabled-icon true
                           :rotated collapsed-css?)}
            i/arrow-refactor]]
-         [:span {:class (stl/css :code-lang)} "CSS"]
+
+         [:& select {:default-value style-type
+                     :class (stl/css :code-lang-select)
+                     :options [{:label "CSS" :value "css"}]}]
 
          [:div {:class (stl/css :action-btns)}
           [:button {:class (stl/css :expand-button)

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

@@ -17,45 +17,51 @@
     }
   }
   .code-block {
+    font-size: $fs-14;
     padding: 0 $s-4 $s-8 0;
-    .code-row-lang {
-      display: flex;
-      justify-content: space-between;
-      gap: $s-4;
-      width: 100%;
-      .code-lang {
-        @include tabTitleTipography;
-        display: flex;
-        align-items: center;
-      }
-      .action-btns {
-        display: flex;
-        gap: $s-4;
-        flex: 1;
-        justify-content: end;
-        .expand-button {
-          @extend .button-tertiary;
-          height: $s-32;
-          width: $s-28;
-          svg {
-            @extend .button-icon;
-            stroke: var(--icon-foreground);
-          }
-        }
-      }
 
-      .code-lang-select {
+    pre {
-        @include tabTitleTipography;
+      border-radius: $br-8;
-        width: $s-92;
+      border: $s-1 solid $db-secondary;
-        border: $s-1 solid transparent;
+      padding: $s-16;
-        background-color: transparent;
+    }
-        color: var(--menu-foreground-color-disabled);
+  }
+
+  .code-row-lang {
+    display: flex;
+    justify-content: space-between;
+    gap: $s-4;
+    width: 100%;
+  }
+  .code-lang {
+    @include tabTitleTipography;
+    display: flex;
+    align-items: center;
+  }
+  .action-btns {
+    display: flex;
+    gap: $s-4;
+    flex: 1;
+    justify-content: end;
+    .expand-button {
+      @extend .button-tertiary;
+      height: $s-32;
+      width: $s-28;
+      svg {
+        @extend .button-icon;
+        stroke: var(--icon-foreground);
       }
     }
-
+  }
-    .code-row-display {
+  .code-lang-select {
-      margin-bottom: $s-8;
+    @include tabTitleTipography;
-    }
+    width: $s-72;
+    border: $s-1 solid transparent;
+    background-color: transparent;
+    color: var(--menu-foreground-color-disabled);
+  }
+  .code-row-display {
+    margin-bottom: $s-8;
   }
 }
 

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

@@ -203,6 +203,8 @@
 
      [:& persistence-state-widget]
 
+     [:div {:class (stl/css :separator)}]
+
 
      [:div {:class (stl/css :zoom-section)}
       [:& zoom-widget-workspace

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

@@ -11,7 +11,7 @@
   align-items: center;
   min-width: $s-256;
   padding: $s-8;
-  gap: $s-2;
+  gap: $s-8;
   background-color: var(--panel-background-color);
   .users-section {
     position: relative;
@@ -19,6 +19,9 @@
     max-width: $s-72;
     padding: $s-4 $s-6;
   }
+  .separator {
+    flex: 1;
+  }
   .zoom-section {
     .zoom-widget {
       @include buttonStyle;
@@ -27,6 +30,7 @@
       justify-content: center;
       height: $s-28;
       max-width: $s-48;
+      width: $s-48;
       border-radius: $br-8;
       .label {
         @include titleTipography;

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

@@ -35,9 +35,7 @@
          [:& i18n/tr-html {:tag-name "span"
                            :label "workspace.top-bar.read-only"}]]
         [:button {:class (stl/css :done-btn)
-                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
+                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]
-        [:button {:class (stl/css :close-btn)
-                  :on-click handle-close-view-mode} i/close-refactor]]]
 
       ;; OLD
       [:div.viewport-actions

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

@@ -22,7 +22,7 @@
     margin-left: -50%;
     padding: $s-8;
     pointer-events: initial;
-    width: $s-512;
+    width: $s-400;
   }
 
   .viewport-actions-title {