From 8ead63cad0ad653009938a31de37eb29ef572a14 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Wed, 7 Feb 2024 19:43:52 +0100
Subject: [PATCH] :recycle: Review inspect tab spacing

---
 .../styles/common/refactor/mixins.scss        |   4 +-
 .../app/main/ui/components/color_bullet.cljs  |   2 +-
 .../main/ui/components/color_bullet_new.cljs  |  18 +-
 .../main/ui/components/color_bullet_new.scss  |   4 +
 .../app/main/ui/components/copy_button.scss   |  30 ++--
 .../src/app/main/ui/components/select.cljs    |  10 +-
 .../src/app/main/ui/components/title_bar.cljs |   7 +-
 .../src/app/main/ui/components/title_bar.scss | 107 ++++++-----
 .../main/ui/viewer/inspect/attributes.scss    |   1 +
 .../ui/viewer/inspect/attributes/blur.cljs    |   8 +-
 .../ui/viewer/inspect/attributes/blur.scss    |   4 +
 .../ui/viewer/inspect/attributes/common.cljs  | 167 ++++++++++--------
 .../ui/viewer/inspect/attributes/common.scss  |  87 ++++++---
 .../ui/viewer/inspect/attributes/fill.cljs    |   2 +-
 .../ui/viewer/inspect/attributes/fill.scss    |   5 +
 .../viewer/inspect/attributes/geometry.cljs   |  19 +-
 .../viewer/inspect/attributes/geometry.scss   |   4 +
 .../ui/viewer/inspect/attributes/image.cljs   |   2 +-
 .../ui/viewer/inspect/attributes/layout.cljs  |  21 ++-
 .../ui/viewer/inspect/attributes/layout.scss  |   4 +
 .../inspect/attributes/layout_element.cljs    |  17 +-
 .../inspect/attributes/layout_element.scss    |   4 +
 .../ui/viewer/inspect/attributes/shadow.cljs  |   2 +
 .../ui/viewer/inspect/attributes/stroke.cljs  |   1 +
 .../ui/viewer/inspect/attributes/stroke.scss  |   5 +
 .../ui/viewer/inspect/attributes/svg.cljs     |  21 ++-
 .../ui/viewer/inspect/attributes/text.cljs    |   7 +-
 .../ui/viewer/inspect/attributes/text.scss    |   2 +-
 .../src/app/main/ui/viewer/inspect/code.cljs  |  38 ++--
 .../src/app/main/ui/viewer/inspect/code.scss  |  23 ++-
 .../main/ui/viewer/inspect/right_sidebar.scss |  10 +-
 .../app/main/ui/workspace/color_palette.cljs  |   2 +-
 .../src/app/main/ui/workspace/sidebar.scss    |   7 +-
 .../app/main/ui/workspace/sidebar/layers.scss |   3 +-
 frontend/translations/en.po                   |   3 +
 frontend/translations/es.po                   |   3 +
 36 files changed, 403 insertions(+), 251 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index f988cd0df8..2b9a05efd5 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -115,8 +115,8 @@
 @mixin copyWrapperBase {
   position: relative;
   min-height: $s-32;
-  width: $s-156;
-  max-width: $s-156;
+  width: $s-144;
+  max-width: $s-144;
   padding: calc($s-8 - $s-1) 0 calc($s-8 - $s-1) calc($s-8 - $s-1);
   border-radius: $s-8;
   box-sizing: border-box;
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 0b273aac20..7213a8347a 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -57,5 +57,5 @@
         :on-double-click on-double-click
         :title name}
        (if (some? image)
-         (tr "media.image")
+         (tr "media.image.short")
          (or name color (uc/gradient-type->string (:type gradient))))])))
diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs
index ff333f35e6..6173a582fb 100644
--- a/frontend/src/app/main/ui/components/color_bullet_new.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs
@@ -9,7 +9,7 @@
   (:require
    [app.config :as cfg]
    [app.util.color :as uc]
-   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
@@ -99,16 +99,16 @@
 
 (mf/defc color-name
   {::mf/wrap-props false}
-  [{:keys [color size on-click on-double-click]}]
-  (let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
+  [{:keys [color size on-click on-double-click origin]}]
+  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (> size 64))
       [:span {:class (stl/css-case
-                      :color-text (< size 72)
-                      :small-text (and (>= size 64) (< size 72))
-                      :big-text   (>= size 72))
+                      :color-text (and (= origin :palette) (< size 72))
+                      :small-text (and (= origin :palette) (>= size 64) (< size 72))
+                      :big-text   (and (= origin :palette) (>= size 72))
+                      :gradient   (some? gradient)
+                      :color-row-name (not=  origin :palette))
               :title name
               :on-click on-click
               :on-double-click on-double-click}
-       (if (some? image)
-         (or name (tr "media.image"))
-         (or name color (uc/gradient-type->string (:type gradient))))])))
+       (or name color (uc/gradient-type->string (:type gradient)))])))
diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss
index d6e617251a..2dddb14b91 100644
--- a/frontend/src/app/main/ui/components/color_bullet_new.scss
+++ b/frontend/src/app/main/ui/components/color_bullet_new.scss
@@ -94,3 +94,7 @@
 .no-text {
   display: none;
 }
+
+.color-row-name {
+  color: var(--menu-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss
index c81487f458..ec8e362bb5 100644
--- a/frontend/src/app/main/ui/components/copy_button.scss
+++ b/frontend/src/app/main/ui/components/copy_button.scss
@@ -8,9 +8,8 @@
 
 .copy-button {
   @include buttonStyle;
-  @include flexCenter;
+  width: 100%;
   height: $s-32;
-  width: $s-32;
   border: $s-1 solid transparent;
   border-radius: $br-8;
   background-color: transparent;
@@ -51,41 +50,32 @@
 .copy-wrapper {
   @include buttonStyle;
   @include copyWrapperBase;
-  display: grid;
-  grid-template-columns: 1fr $s-24;
-  grid-template-areas: "name button";
   width: 100%;
   height: fit-content;
   text-align: left;
-  border: 1px solid transparent;
+  border: $s-1 solid transparent;
   .icon-btn {
+    @include flexCenter;
     position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     top: 0;
     right: 0;
     height: $s-32;
-    width: $s-32;
+    width: $s-28;
     svg {
       @extend .button-icon-small;
+      stroke: var(--button-tertiary-foreground-color-focus);
       display: none;
     }
   }
   &:hover {
-    .icon-btn {
-      svg {
-        display: flex;
-        stroke: var(--button-tertiary-foreground-color-active);
-      }
+    background-color: var(--button-tertiary-background-color-focus);
+    color: var(--button-tertiary-foreground-color-focus);
+    border: $s-1 solid var(--button-tertiary-background-color-focus);
+    .icon-btn svg {
+      display: flex;
     }
   }
 
-  &:hover {
-    background-color: var(--color-background-tertiary);
-    color: var(--color-foreground-primary);
-    border: $s-1 solid var(--color-background-tertiary);
-  }
   &:focus,
   &:focus-visible {
     outline: none;
diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs
index e3ae257323..ffacb70559 100644
--- a/frontend/src/app/main/ui/components/select.cljs
+++ b/frontend/src/app/main/ui/components/select.cljs
@@ -97,15 +97,17 @@
           current-icon (:icon selected-option)
           current-icon-ref (i/key->icon current-icon)]
       [:div {:on-click open-dropdown
-             :class (dm/str class " " (stl/css-case :custom-select true
-                                                    :disabled disabled
-                                                    :icon (some? current-icon-ref)))}
+             :class (dm/str (stl/css-case :custom-select true
+                                          :disabled disabled
+                                          :icon (some? current-icon-ref))
+                            " " class)}
        (when (and current-icon current-icon-ref)
          [:span {:class (stl/css :current-icon)} current-icon-ref])
        [:span {:class (stl/css :current-label)} current-label]
        [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
        [:& dropdown {:show is-open? :on-close close-dropdown}
-        [:ul {:ref dropdown-element* :data-direction @dropdown-direction* :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
+        [:ul {:ref dropdown-element* :data-direction @dropdown-direction*
+              :class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)}
          (for [[index item] (d/enumerate options)]
            (if (= :separator item)
              [:li {:class (dom/classnames (stl/css :separator) true)
diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs
index 0c9899bbc3..dcce616781 100644
--- a/frontend/src/app/main/ui/components/title_bar.cljs
+++ b/frontend/src/app/main/ui/components/title_bar.cljs
@@ -13,7 +13,7 @@
 
 (mf/defc title-bar
   {::mf/wrap-props false}
-  [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap]}]
+  [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
   (let [klass (dm/str (stl/css :title-bar) " " class)]
     [:div {:class klass}
      (if ^boolean collapsable
@@ -33,7 +33,10 @@
                      :on-click on-collapsed}
             i/arrow-refactor]
            [:div {:class (stl/css :title)} title]])]
-       [:div {:class (stl/css-case :title-only true :title-only-icon-gap add-icon-gap)} title])
+       [:div {:class (stl/css-case :title-only true
+                                   :title-only-icon-gap add-icon-gap
+                                   :title-only (not= :inspect origin)
+                                   :inspect-title (= :inspect origin))} title])
      children
      (when (some? on-btn-click)
        [:button {:class (stl/css :title-button)
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index e76b9fe2bc..bfbd756fcd 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -14,8 +14,39 @@
   width: 100%;
   min-height: $s-32;
   background-color: var(--title-background-color);
+}
 
-  .title-wrapper {
+.title,
+.title-only,
+.inspect-title {
+  @include tabTitleTipography;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  height: 100%;
+  min-height: $s-32;
+  color: var(--title-foreground-color);
+  overflow: hidden;
+}
+
+.title-only {
+  margin-left: $s-8;
+}
+
+.inspect-title {
+  color: var(--title-foreground-color-hover);
+}
+
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding: 0;
+  color: var(--title-foreground-color);
+  stroke: var(--title-foreground-color);
+  overflow: hidden;
+  .toggle-btn {
+    @include buttonStyle;
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -23,42 +54,7 @@
     color: var(--title-foreground-color);
     stroke: var(--title-foreground-color);
     overflow: hidden;
-    .toggle-btn {
-      @include buttonStyle;
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      padding: 0;
-      color: var(--title-foreground-color);
-      stroke: var(--title-foreground-color);
-      overflow: hidden;
-      .collapsabled-icon {
-        @include flexCenter;
-        height: $s-24;
-        border-radius: $br-8;
-        svg {
-          @extend .button-icon-small;
-          transform: rotate(90deg);
-          stroke: var(--icon-foreground);
-        }
-        &.rotated svg {
-          transform: rotate(0deg);
-        }
-      }
-      &:hover {
-        color: var(--title-foreground-color-hover);
-        stroke: var(--title-foreground-color-hover);
-        .title {
-          color: var(--title-foreground-color-hover);
-          stroke: var(--title-foreground-color-hover);
-        }
-        .collapsabled-icon svg {
-          stroke: var(--title-foreground-color-hover);
-        }
-      }
-    }
     .collapsabled-icon {
-      @include buttonStyle;
       @include flexCenter;
       height: $s-24;
       border-radius: $br-8;
@@ -75,6 +71,7 @@
       color: var(--title-foreground-color-hover);
       stroke: var(--title-foreground-color-hover);
       .title {
+        color: var(--title-foreground-color-hover);
         stroke: var(--title-foreground-color-hover);
       }
       .collapsabled-icon svg {
@@ -82,17 +79,41 @@
       }
     }
   }
-
-  .title-button {
-    @extend .button-tertiary;
-    height: $s-32;
-    width: calc($s-24 + $s-4);
-    padding: 0;
+  .collapsabled-icon {
+    @include buttonStyle;
+    @include flexCenter;
+    height: $s-24;
     border-radius: $br-8;
     svg {
-      @extend .button-icon;
+      @extend .button-icon-small;
+      transform: rotate(90deg);
       stroke: var(--icon-foreground);
     }
+    &.rotated svg {
+      transform: rotate(0deg);
+    }
+  }
+  &:hover {
+    color: var(--title-foreground-color-hover);
+    stroke: var(--title-foreground-color-hover);
+    .title {
+      stroke: var(--title-foreground-color-hover);
+    }
+    .collapsabled-icon svg {
+      stroke: var(--title-foreground-color-hover);
+    }
+  }
+}
+
+.title-button {
+  @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);
   }
 }
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.scss b/frontend/src/app/main/ui/viewer/inspect/attributes.scss
index 17a761d013..54980db833 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes.scss
@@ -12,4 +12,5 @@
   gap: $s-16;
   width: 100%;
   height: 100%;
+  padding-top: $s-8;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
index 162fb5db8c..3b006e94c8 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.viewer.inspect.attributes.blur
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.util.code-gen.style-css :as css]
@@ -23,13 +24,16 @@
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
                       :title       (tr "inspect.attributes.blur")
+                      :origin      :inspect
                       :class       (stl/css :title-spacing-blur)}
         (when (= (count shapes) 1)
-          [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
+          [:& copy-button {:data  (css/get-css-property objects (first shapes) :filter)
+                           :class (stl/css :copy-btn-title)}])]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]
-          [:div {:class (stl/css :blur-row)}
+          [:div {:class (stl/css :blur-row)
+                 :key (dm/str "block-" (:id shape) "-blur")}
            [:div {:class (stl/css :global/attr-label)} "Filter"]
            [:div {:class (stl/css :global/attr-value)}
             [:& copy-button {:data (css/get-css-property objects shape :filter)}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
index e2da407088..a3f2dc334e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
@@ -21,3 +21,7 @@
 .button-children {
   @extend .copy-button-children;
 }
+
+.copy-btn-title {
+  max-width: $s-28;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
index 76001fe464..bbf5148f3d 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
@@ -8,6 +8,8 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as cc]
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.media :as cm]
    [app.config :as cf]
    [app.main.refs :as refs]
@@ -15,6 +17,7 @@
    [app.main.ui.components.color-bullet-new :as cbn]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.select :refer [select]]
+   [app.main.ui.formats :as fmt]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -43,6 +46,13 @@
 (defn- get-file-colors []
   (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
 
+(defn get-css-rule-humanized [property]
+  (as-> property $
+    (d/name $)
+    (str/split $ "-")
+    (str/join " " $)
+    (str/capital $)))
+
 (mf/defc color-row [{:keys [color format copy-data on-change-format]}]
   (let [colors-library     (get-colors-library color)
         file-colors        (get-file-colors)
@@ -50,85 +60,90 @@
         color              (assoc color :color-library-name color-library-name)
         image              (:image color)]
 
-    [:*
-     [:div {:class (stl/css :attributes-color-row)}
-      [:div {:class (stl/css :bullet-wrapper)
-             :style #js {"--bullet-size" "16px"}}
-       [:& cbn/color-bullet {:color color
-                             :mini? true}]]
 
-      (when-not image
-        [:div {:class (stl/css :format-wrapper)}
-         (when-not (and on-change-format (or (:gradient color) image))
-           [:div {:class (stl/css :select-format-wrapper)}
-            [:& select
-             {:default-value format
-              :options [{:value :hex :label (tr "inspect.attributes.color.hex")}
-                        {:value :rgba :label (tr "inspect.attributes.color.rgba")}
-                        {:value :hsla :label (tr "inspect.attributes.color.hsla")}]
-              :on-change on-change-format}]])
-         (when (:gradient color)
-           [:div {:class (stl/css :format-info)} "rgba"])])
+    (if image
+      (let [mtype     (-> image :mtype)
+            name      (or (:name image) (tr "media.image"))
+            extension (cm/mtype->extension mtype)]
+        [:div {:class (stl/css :attributes-image-as-color-row)}
+         [:div {:class (stl/css :attributes-color-row)}
+          [:div {:class (stl/css :bullet-wrapper)
+                 :style #js {"--bullet-size" "16px"}}
+           [:& cbn/color-bullet {:color color
+                                 :mini? true}]]
 
-      (if (and copy-data (not image))
-        [:& copy-button {:data copy-data
-                         :class (stl/css :color-row-copy-btn)}
-         [:*
-          [:div {:class (stl/css :first-row)}
-           [:div {:class (stl/css :name-opacity)}
-            [:span {:class (stl/css-case :color-value-wrapper true
-                                         :gradient-name (:gradient color))}
-             (if (:gradient color)
-               [:& cbn/color-name {:color color :size 80}]
-               (case format
-                 :hex [:& cbn/color-name {:color color}]
-                 :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-                         [:* (str/fmt "%s, %s, %s, %s" r g b a)])
-                 :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
-                             result (cc/format-hsla [h s l a])]
-                         [:* result])))]
-
-            (when-not (:gradient color)
-              [:span {:class (stl/css :opacity-info)}
-               (str (* 100 (:opacity color)) "%")])]]
-
-          (when color-library-name
-            [:div {:class (stl/css :second-row)}
-             [:div {:class (stl/css :color-name-library)}
-              color-library-name]])]]
-
-        [:div {:class (stl/css :color-info)}
-         [:div {:class (stl/css :first-row)}
-          [:div {:class (stl/css :name-opacity)}
-           [:span {:class (stl/css-case :color-value-wrapper true
-                                        :gradient-name (:gradient color))}
-            (if (:gradient color)
-              [:& cbn/color-name {:color color}]
-              (case format
-                :hex [:& cbn/color-name {:color color
-                                         :size 80}]
-                :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-                        [:* (str/fmt "%s, %s, %s, %s" r g b a)])
-                :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
-                            result (cc/format-hsla [h s l a])]
-                        [:* result])))]
-
-           (when-not (:gradient color)
+          [:div {:class (stl/css :format-wrapper)}
+           [:div {:class (stl/css :image-format)}
+            (tr "media.image.short")]]
+          [:& copy-button {:data copy-data
+                           :class (stl/css :color-row-copy-btn)}
+           [:div {:class (stl/css-case :color-info true
+                                       :two-line (some? color-library-name))}
+            [:div {:class (stl/css :first-row)}
              [:span {:class (stl/css :opacity-info)}
-              (str (* 100 (:opacity color)) "%")])]]
+              (str (* 100 (:opacity color)) "%")]]
 
-         (when color-library-name
-           [:div {:class (stl/css :second-row)}
-            [:div {:class (stl/css :color-name-library)}
-             color-library-name]])])]
+            (when color-library-name
+              [:div {:class (stl/css :second-row)}
+               [:div {:class (stl/css :color-name-library)}
+                color-library-name]])]]
 
-     (when image
-       (let [mtype     (-> image :mtype)
-             name      (or (:name image) (tr "media.image"))
-             extension (cm/mtype->extension mtype)]
-         [:a {:class (stl/css :download-button)
-              :target "_blank"
-              :download (cond-> name extension (str/concat extension))
-              :href (cf/resolve-file-media image)}
-          (tr "inspect.attributes.image.download")]))]))
+          [:div {:class (stl/css :image-download)}
+           [:div {:class (stl/css :image-wrapper)}
+            [:img {:src (cf/resolve-file-media image)}]]
+
+           [:a {:class (stl/css :download-button)
+                :target "_blank"
+                :download (cond-> name extension (str/concat extension))
+                :href (cf/resolve-file-media image)}
+            (tr "inspect.attributes.image.download")]]]])
+
+      [:div {:class (stl/css :attributes-color-row)}
+       [:div {:class (stl/css :bullet-wrapper)
+              :style #js {"--bullet-size" "16px"}}
+        [:& cbn/color-bullet {:color color
+                              :mini? true}]]
+
+       [:div {:class (stl/css :format-wrapper)}
+        (when-not (and on-change-format (or (:gradient color) image))
+          [:& select
+           {:default-value format
+            :class (stl/css :select-format-wrapper)
+            :options [{:value :hex :label (tr "inspect.attributes.color.hex")}
+                      {:value :rgba :label (tr "inspect.attributes.color.rgba")}
+                      {:value :hsla :label (tr "inspect.attributes.color.hsla")}]
+            :on-change on-change-format}])
+        (when (:gradient color)
+          [:div {:class (stl/css :format-info)} "rgba"])]
+
+       [:& copy-button {:data copy-data
+                        :class (stl/css-case :color-row-copy-btn true
+                                             :one-line (not color-library-name)
+                                             :two-line (some? color-library-name))}
+        [:div {:class (stl/css :first-row)}
+         [:div {:class (stl/css :name-opacity)}
+          [:span {:class (stl/css-case :color-value-wrapper true
+                                       :gradient-name (:gradient color))}
+           (if (:gradient color)
+             [:& cbn/color-name {:color color :size 90}]
+             (case format
+               :hex [:& cbn/color-name {:color color}]
+               :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
+                       (str/ffmt "%, %, %, %" r g b a))
+               :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
+                           result (cc/format-hsla [h s l a])]
+                       [:* result])))]
+
+          (when-not (:gradient color)
+            [:span {:class (stl/css :opacity-info)}
+             (dm/str (-> color
+                         (:opacity)
+                         (d/coalesce 1)
+                         (* 100)
+                         (fmt/format-number)) "%")])]]
+
+        (when color-library-name
+          [:div {:class (stl/css :second-row)}
+           [:div {:class (stl/css :color-name-library)}
+            color-library-name]])]])))
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
index f05e0faa40..7f30931c39 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
@@ -6,9 +6,13 @@
 
 @import "refactor/common-refactor.scss";
 
+.attributes-image-as-color-row {
+  max-width: $s-240;
+}
+
 .attributes-color-row {
   display: grid;
-  grid-template-columns: $s-16 $s-72 $s-156;
+  grid-template-columns: $s-16 $s-72 $s-144;
   gap: $s-4;
 }
 
@@ -22,14 +26,19 @@
   height: $s-32;
 }
 
+.image-format {
+  @include tabTitleTipography;
+  height: $s-32;
+  padding: $s-8 0;
+  color: var(--menu-foreground-color-rest);
+}
+
 .select-format-wrapper {
   width: 100%;
-  div {
-    background-color: transparent;
-    border: none;
-    padding-left: $s-2;
-    color: var(--menu-foreground-color-rest);
-  }
+  padding: $s-8 $s-2;
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--menu-foreground-color-rest);
 }
 
 .format-info {
@@ -43,12 +52,16 @@
   color: var(--menu-foreground-color-rest);
 }
 
+.color-row-copy-btn {
+  max-width: $s-144;
+}
+
 .color-info {
   display: flex;
   align-items: flex-start;
   gap: $s-4;
   flex-grow: 1;
-
+  max-width: $s-144;
   button {
     visibility: hidden;
     min-width: $s-28;
@@ -57,19 +70,22 @@
     visibility: visible;
   }
 }
-
-.name-opacity {
-  display: flex;
-  align-items: baseline;
+.one-line {
+  max-height: $s-32;
+}
+.two-line {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
 }
-
 .color-name-wrapper {
   @include titleTipography;
   @include flexColumn;
   padding: $s-8 $s-4 $s-8 $s-8;
   height: $s-32;
   max-width: $s-80;
+
   &.gradient-color {
+    color: var(--menu-foreground-color);
     max-width: $s-124;
   }
   .color-name-library {
@@ -92,16 +108,9 @@
   padding: $s-8 0;
 }
 
-.color-info,
-.color-row-copy-btn {
-  display: flex;
-  max-width: $s-144;
-}
-
 .first-row {
   display: grid;
-  grid-template-columns: 1fr $s-24;
-  grid-template-areas: "name button";
+  grid-template-columns: 1fr $s-28;
   height: fit-content;
   width: 100%;
   padding: 0;
@@ -109,27 +118,26 @@
 }
 
 .name-opacity {
-  grid-area: name;
   height: fit-content;
-  max-width: $s-124;
+  width: 100%;
   line-height: $s-16;
+  display: grid;
+  grid-template-columns: 1fr auto;
 }
 
 .color-value-wrapper {
+  @include textEllipsis;
   @include inspectValue;
   text-transform: uppercase;
-  max-width: $s-80;
-  padding-right: $s-8;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   &.gradient-name {
     text-transform: none;
   }
 }
+
 .opacity-info {
   @include inspectValue;
   text-transform: uppercase;
+  width: 100%;
 }
 
 .second-row {
@@ -146,9 +154,32 @@
   color: var(--menu-foreground-color-rest);
 }
 
+.image-download {
+  grid-column: 1 / 4;
+}
+
 .download-button {
   @extend .button-secondary;
   @include tabTitleTipography;
   height: $s-32;
+  width: 100%;
   margin-top: $s-4;
 }
+
+.image-wrapper {
+  background-color: var(--menu-background-color);
+  position: relative;
+  @include flexCenter;
+  width: $s-240;
+  height: $s-160;
+  max-height: $s-160;
+  max-width: $s-248;
+  margin: $s-8 0;
+  border-radius: $br-8;
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
index 8383ca0855..85f6073338 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
@@ -35,7 +35,6 @@
   [{:keys [objects shape]}]
   (let [format*   (mf/use-state :hex)
         format    (deref format*)
-
         color     (shape->color shape)
         on-change
         (mf/use-fn
@@ -55,6 +54,7 @@
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
+                      :origin      :inspect
                       :title       (tr "inspect.attributes.fill")
                       :class       (stl/css :title-spacing-fill)}]
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
index 3f3e3a9bdd..9515dad3ee 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
@@ -13,3 +13,8 @@
 .title-spacing-fill {
   @extend .attr-title;
 }
+
+.attributes-content {
+  display: grid;
+  gap: $s-4;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
index 4735502f76..cc7cc70f58 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
@@ -11,6 +11,7 @@
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.viewer.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -22,12 +23,14 @@
   [:*
    (for [[idx property] (d/enumerate properties)]
      (when-let [value (css/get-css-value objects shape property)]
-       [:div {:key (dm/str "block-" idx "-" (d/name property))
-              :class (stl/css :geometry-row)}
-        [:div {:class (stl/css :global/attr-label)} (d/name property)]
-        [:div {:class (stl/css :global/attr-value)}
-         [:& copy-button {:data (css/get-css-property objects shape property)}
-          [:div {:class (stl/css :button-children)} value]]]]))])
+       (let [property-name (cmm/get-css-rule-humanized property)]
+         [:div {:key (dm/str "block-" idx "-" (d/name property))
+                :title property-name
+                :class (stl/css :geometry-row)}
+          [:div {:class (stl/css :global/attr-label)} property-name]
+          [:div {:class (stl/css :global/attr-value)}
+           [:& copy-button {:data (css/get-css-property objects shape property)}
+            [:div {:class (stl/css :button-children)} value]]]])))])
 
 
 (mf/defc geometry-panel
@@ -35,10 +38,12 @@
   [:div {:class (stl/css :attributes-block)}
    [:& title-bar {:collapsable false
                   :title       (tr "inspect.attributes.size")
+                  :origin      :inspect
                   :class       (stl/css :title-spacing-geometry)}
 
     (when (= (count shapes) 1)
-      [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+      [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
+                       :class (stl/css :copy-btn-title)}])]
 
    (for [shape shapes]
      [:& geometry-block {:shape shape
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
index 2b1f431fb7..b32c0c1031 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
@@ -21,3 +21,7 @@
 .button-children {
   @extend .copy-button-children;
 }
+
+.copy-btn-title {
+  max-width: $s-28;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
index 4f22213db3..093b6a6578 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
@@ -23,7 +23,7 @@
   [{:keys [objects shapes]}]
   (for [shape (filter cfh/image-shape? shapes)]
     [:div {:class (stl/css :attributes-block)
-           :key (str "image-" (:id shape))}
+           :key   (str "image-" (:id shape))}
      [:div {:class (stl/css :image-wrapper)}
       [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
index e015aecd16..ecfb19e3b0 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
@@ -8,9 +8,11 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.viewer.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
 
@@ -31,13 +33,16 @@
   [{:keys [objects shape]}]
   (for [property properties]
     (when-let [value (css/get-css-value objects shape property)]
-      [:div {:class (stl/css :layout-row)}
-       [:div {:title (d/name property)
-              :class (stl/css :global/attr-label)} (d/name property)]
-       [:div {:class (stl/css :global/attr-value)}
+      (let [property-name (cmm/get-css-rule-humanized property)]
+        [:div {:class (stl/css :layout-row)}
+         [:div {:title property-name
+                :key   (dm/str "layout-" (:id shape) "-" (d/name property))
+                :class (stl/css :global/attr-label)}
+          property-name]
+         [:div {:class (stl/css :global/attr-value)}
 
-        [:& copy-button {:data (css/get-css-property objects shape property)}
-         [:div {:class (stl/css :button-children)} value]]]])))
+          [:& copy-button {:data (css/get-css-property objects shape property)}
+           [:div {:class (stl/css :button-children)} value]]]]))))
 
 (mf/defc layout-panel
   [{:keys [objects shapes]}]
@@ -46,11 +51,13 @@
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
+                      :origin      :inspect
                       :title       "Layout"
                       :class       (stl/css :title-spacing-layout)}
 
         (when (= (count shapes) 1)
-          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
+                           :class (stl/css :copy-btn-title)}])]
 
        (for [shape shapes]
          [:& layout-block {:shape shape
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
index e2a409c0fb..8a84e1d988 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
@@ -21,3 +21,7 @@
 .button-children {
   @extend .copy-button-children;
 }
+
+.copy-btn-title {
+  max-width: $s-28;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
index 14eaf7f93c..4ba5a98a6b 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
@@ -8,9 +8,11 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.viewer.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
 
@@ -33,12 +35,14 @@
   [{:keys [objects shape]}]
   (for [property properties]
     (when-let [value (css/get-css-value objects shape property)]
-      [:div {:class (stl/css :layout-element-row)}
-       [:div {:class (stl/css :global/attr-label)} (d/name property)]
-       [:div {:class (stl/css :global/attr-value)}
+      (let [property-name (cmm/get-css-rule-humanized property)]
+        [:div {:class (stl/css :layout-element-row)
+               :key (dm/str "layout-element-" (:id shape) "-" (d/name property))}
+         [:div {:class (stl/css :global/attr-label)} property-name]
+         [:div {:class (stl/css :global/attr-value)}
 
-        [:& copy-button {:data (css/get-css-property objects shape property)}
-         [:div {:class (stl/css :button-children)} value]]]])))
+          [:& copy-button {:data (css/get-css-property objects shape property)}
+           [:div {:class (stl/css :button-children)} value]]]]))))
 
 (mf/defc layout-element-panel
   [{:keys [objects shapes]}]
@@ -67,7 +71,8 @@
                       :title       menu-title
                       :class       (stl/css :title-spacing-layout-element)}
         (when (= (count shapes) 1)
-          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+          [:& copy-button {:data  (css/get-shape-properties-css objects (first shapes) properties)
+                           :class (stl/css :copy-btn-title)}])]
 
        (for [shape shapes]
          [:& layout-element-block {:shape shape
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
index 6ef7e6cea0..56b174dd58 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
@@ -21,3 +21,7 @@
 .button-children {
   @extend .copy-button-children;
 }
+
+.copy-btn-title {
+  max-width: $s-28;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
index 586d4488a2..c77ab51b3e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
@@ -54,6 +54,7 @@
     (when (and (seq shapes) (> (count shapes) 0))
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
+                      :origin      :inspect
                       :title       (tr "inspect.attributes.shadow")
                       :class       (stl/css :title-spacing-shadow)}]
 
@@ -61,4 +62,5 @@
         (for [shape shapes]
           (for [shadow (:shadow shape)]
             [:& shadow-block {:shape shape
+                              :key   (dm/str "block-" (:id shape) "-shadow")
                               :shadow shadow}]))]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
index 9dd86a0352..2ba125be3e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
@@ -62,6 +62,7 @@
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
+                      :origin      :inspect
                       :title       (tr "inspect.attributes.stroke")
                       :class       (stl/css :title-spacing-stroke)}]
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
index 86cb671047..fe0f59df43 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
@@ -25,3 +25,8 @@
 .button-children {
   @extend .copy-button-children;
 }
+
+.attributes-content {
+  display: grid;
+  gap: $s-4;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
index 8df36110f0..c788c95db9 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
@@ -27,19 +27,25 @@
       [:& copy-button {:data (map->css value)}]]
 
      (for [[attr-key attr-value] value]
-       [:& svg-attr {:attr  attr-key :value attr-value}])]
+       [:& svg-attr {:attr  attr-key :value attr-value :key (str/join "svg-key-" attr-key)}])]
 
-    [:div {:class (stl/css :svg-row)}
-     [:div {:class (stl/css :global/attr-label)} (d/name attr)]
-     [:div {:class (stl/css :global/attr-value)}
-      [:& copy-button {:data (d/name value)}
-       [:div {:class (stl/css :button-children)} (str value)]]]]))
+    (let [attr-name (as-> attr $
+                      (d/name $)
+                      (str/split $ "-")
+                      (str/join " " $)
+                      (str/capital $))]
+      [:div {:class (stl/css :svg-row)}
+       [:div {:class (stl/css :global/attr-label)} attr-name]
+       [:div {:class (stl/css :global/attr-value)}
+        [:& copy-button {:data  (d/name value)
+                         :class (stl/css :copy-btn-title)}
+         [:div {:class (stl/css :button-children)} (str value)]]]])))
 
 (mf/defc svg-block
   [{:keys [shape]}]
   [:*
    (for [[attr-key attr-value] (:svg-attrs shape)]
-     [:& svg-attr {:attr  attr-key :value attr-value}])])
+     [:& svg-attr {:attr  attr-key :value attr-value :key (str/join "svg-block-key" attr-key)}])])
 
 
 (mf/defc svg-panel
@@ -48,6 +54,7 @@
     (when (seq (:svg-attrs shape))
       [:div {:class (stl/css :attributes-block)}
        [:& title-bar {:collapsable false
+                      :origin      :inspect
                       :title       (tr "workspace.sidebar.options.svg-attrs.title")
                       :class       (stl/css :title-spacing-svg)}]
        [:& svg-block {:shape shape}]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
index f3f817397f..137fcc01c2 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
@@ -99,7 +99,7 @@
         [:div {:class (stl/css :global/attr-value)}
          [:& copy-button {:data (copy-style-data style :font-style)}
           [:div {:class (stl/css :button-children)}
-           (str (:font-style style))]]]])
+           (dm/str (:font-style style))]]]])
 
      (when (:font-size style)
        [:div {:class (stl/css :text-row)}
@@ -117,7 +117,7 @@
         [:div {:class (stl/css :global/attr-value)}
          [:& copy-button {:data (copy-style-data style :font-weight)}
           [:div {:class (stl/css :button-children)}
-           (str (:font-weight style))]]]])
+           (dm/str (:font-weight style))]]]])
 
      (when (:line-height style)
        [:div {:class (stl/css :text-row)}
@@ -191,9 +191,10 @@
   (when-let [shapes (seq (filter has-text? shapes))]
     [:div {:class (stl/css :attributes-block)}
      [:& title-bar {:collapsable false
+                    :origin      :inspect
                     :title       (tr "inspect.attributes.typography")
                     :class       (stl/css :title-spacing-text)}]
 
      (for [shape shapes]
        [:& text-block {:shape shape
-                       :key (str "text-block" (:id shape))}])]))
+                       :key (dm/str "text-block" (:id shape))}])]))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
index a506af1b4a..d32a5a5161 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
@@ -30,7 +30,7 @@
 }
 
 .attributes-content-row {
-  max-width: $s-252;
+  max-width: $s-240;
   min-height: calc($s-2 + $s-32);
   border-radius: $br-8;
   border: $s-1 solid var(--menu-border-color-disabled);
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs
index 03afee4ac9..6baa45ef92 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs
@@ -19,7 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.select :refer [select]]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
@@ -177,10 +177,10 @@
          style-size :size}
         (use-resize-hook :code 400 100 800 :y false :bottom)
 
-        set-style
-        (mf/use-callback
-         (fn [value]
-           (reset! style-type* value)))
+        ;; set-style
+        ;; (mf/use-callback
+        ;;  (fn [value]
+        ;;    (reset! style-type* value)))
 
         set-markup
         (mf/use-callback
@@ -251,10 +251,13 @@
                         :rotated collapsed-css?)}
          i/arrow-refactor]]
 
-       [:& select {:default-value style-type
-                   :class (stl/css :code-lang-select)
-                   :on-change set-style
-                   :options [{:label "CSS" :value "css"}]}]
+       [:div {:class (stl/css :code-lang-option)}
+        "CSS"]
+      ;; We will have a select when we have more than one option
+      ;;  [:& select {:default-value style-type
+      ;;              :class (stl/css :code-lang-select)
+      ;;              :on-change set-style
+      ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
         [:button {:class (stl/css :expand-button)
@@ -262,6 +265,7 @@
          i/code-refactor]
 
         [:& copy-button {:data #(replace-map style-code images-data)
+                         :class (stl/css :css-copy-btn)
                          :on-copied on-style-copied}]]]
 
       (when-not collapsed-css?
@@ -285,11 +289,16 @@
                         :collapsabled-icon true
                         :rotated collapsed-markup?)}
          i/arrow-refactor]]
-       [:& select {:default-value markup-type
-                   :class (stl/css :code-lang-select)
-                   :options [{:label "HTML" :value "html"}
-                             {:label "SVG" :value "svg"}]
-                   :on-change set-markup}]
+
+       [:& radio-buttons {:selected markup-type
+                          :on-change set-markup
+                          :class (stl/css :code-lang-options)
+                          :wide true
+                          :name "listing-style"}
+        [:& radio-button {:value "html"
+                          :id :html}]
+        [:& radio-button {:value "svg"
+                          :id :svg}]]
 
        [:div {:class (stl/css :action-btns)}
         [:button {:class (stl/css :expand-button)
@@ -297,6 +306,7 @@
          i/code-refactor]
 
         [:& copy-button {:data #(replace-map markup-code images-data)
+                         :class (stl/css :html-copy-btn)
                          :on-copied on-markup-copied}]]]
 
       (when-not collapsed-markup?
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss
index 5b6d66c9c3..a383684c7e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/code.scss
@@ -48,8 +48,8 @@
 }
 
 .code-row-lang {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: $s-12 1fr $s-60;
   gap: $s-4;
   width: 100%;
 }
@@ -61,13 +61,14 @@
 }
 
 .action-btns {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: $s-4;
-  flex: 1;
-  justify-content: end;
 }
 
-.expand-button {
+.expand-button,
+.css-copy-btn,
+.html-copy-btn {
   @extend .button-tertiary;
   height: $s-32;
   width: $s-28;
@@ -77,6 +78,9 @@
   }
 }
 
+.code-lang-options {
+  max-width: $s-108;
+}
 .code-lang-select {
   @include tabTitleTipography;
   width: $s-72;
@@ -84,6 +88,13 @@
   background-color: transparent;
   color: var(--menu-foreground-color-disabled);
 }
+.code-lang-option {
+  @include tabTitleTipography;
+  width: $s-72;
+  height: $s-32;
+  padding: $s-8;
+  color: var(--menu-foreground-color-disabled);
+}
 
 .code-row-display {
   flex: 1;
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index b66e44ce7e..5d9646ab63 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -14,8 +14,6 @@
   left: unset;
   right: unset;
   grid-area: right-sidebar;
-  padding-top: $s-8;
-  padding-left: $s-12;
   overflow: hidden;
   &.viewer-code {
     height: calc(100vh - $s-48);
@@ -26,18 +24,20 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  gap: $s-8;
 }
 
 .shape-row {
   display: flex;
   gap: $s-8;
   align-items: center;
-  margin-bottom: $s-16;
+  height: $s-32;
 }
 
 .layers-icon,
 .shape-icon {
   @include flexCenter;
+  height: $s-32;
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
@@ -46,7 +46,9 @@
 
 .layer-title {
   @include titleTipography;
-  color: $df-primary;
+  height: $s-32;
+  padding: $s-8 0;
+  color: var(--assets-item-name-foreground-color-rest);
 }
 
 .empty {
diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index ceaeebd9b7..b078486716 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -31,7 +31,7 @@
            :title (uc/get-color-name color)
            :on-click select-color}
      [:& cb/color-bullet {:color color}]
-     [:& cb/color-name {:color color :size size}]]))
+     [:& cb/color-name {:color color :size size :origin :palette}]]))
 
 
 (mf/defc palette
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index b2ece935e9..b14ca12531 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -16,7 +16,6 @@ $width-settings-bar-max: $s-500;
     "content resize";
   grid-template-rows: $s-52 1fr;
   grid-template-columns: 1fr 0;
-  gap: $s-8 0;
   position: relative;
   grid-area: left-sidebar;
   min-width: $width-settings-bar;
@@ -85,10 +84,10 @@ $width-settings-bar-max: $s-500;
 
 .resize-area-horiz {
   position: absolute;
-  top: calc($s-80 + var(--height, 200px));
+  // top: calc($s-88 + var(--height, 200px));
   left: 0;
   width: 100%;
-  height: $s-12;
-  border-top: $s-2 solid var(--resize-area-border-color);
+  // height: $s-8;
+  border-bottom: $s-2 solid var(--resize-area-border-color);
   cursor: ns-resize;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 4b39fbaa42..25cf2cc4a9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -241,8 +241,7 @@
 }
 
 .tool-window-content {
-  // TODO: sass variables are not being interpolated here, find why
-  --calculated-height: calc(128px + var(--height, 200px));
+  --calculated-height: calc(#{$s-136} + var(--height, #{$s-200}));
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--calculated-height));
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 46f2e63c17..f265931802 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -5056,6 +5056,9 @@ msgstr "Done"
 msgid "media.image"
 msgstr "Image"
 
+msgid "media.image.short"
+msgstr "img"
+
 msgid "media.solid"
 msgstr "Solid"
 
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 8c8c0d4cce..4fe0c535ea 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -5140,6 +5140,9 @@ msgstr "Hecho"
 msgid "media.image"
 msgstr "Imagen"
 
+msgid "media.image.short"
+msgstr "img"
+
 msgid "media.solid"
 msgstr "Sólido"