Merge pull request #3915 from penpot/alotor-fixes-ui

Fixes new UI

backend/src/app/rpc/commands/search.clj

@@ -9,6 +9,7 @@
    [app.common.spec :as us]
    [app.db :as db]
    [app.rpc :as-alias rpc]
+   [app.rpc.commands.files :refer [resolve-public-uri]]
    [app.rpc.doc :as-alias doc]
    [app.util.services :as sv]
    [clojure.spec.alpha :as s]))
@@ -37,12 +38,15 @@
    )
    select distinct
           f.id,
+          f.revn,
           f.project_id,
           f.created_at,
           f.modified_at,
           f.name,
-          f.is_shared
+          f.is_shared,
+          ft.media_id
      from file as f
+     left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
     inner join projects as pr on (f.project_id = pr.id)
     where f.name ilike ('%' || ? || '%')
       and (f.deleted_at is null or f.deleted_at > now())
@@ -50,10 +54,16 @@
 
 (defn search-files
   [conn profile-id team-id search-term]
-  (db/exec! conn [sql:search-files
+  (->> (db/exec! conn [sql:search-files
                        profile-id team-id
                        profile-id team-id
-                  search-term]))
+                       search-term])
+       (mapv (fn [row]
+               (if-let [media-id (:media-id row)]
+                 (-> row
+                     (dissoc :media-id)
+                     (assoc :thumbnail-uri (resolve-public-uri media-id)))
+                 (dissoc row :media-id))))))
 
 (s/def ::team-id ::us/uuid)
 (s/def ::search-files ::us/string)

common/src/app/common/geom/rect.cljc

@@ -353,3 +353,19 @@
                      (mth/max by1 y1)
                      (mth/min bx2 x2)
                      (mth/min by2 y2)))))
+(defn fix-aspect-ratio
+  [bounds aspect-ratio]
+  (if aspect-ratio
+    (let [width (dm/get-prop bounds :width)
+          height (dm/get-prop bounds :height)
+          target-height (* width aspect-ratio)
+          target-width (* height (/ 1 aspect-ratio))]
+      (cond-> bounds
+        (> target-height height)
+        (-> (assoc :height target-height)
+            (update :y - (/ (- target-height height ) 2)))
+
+        (< target-height height)
+        (-> (assoc :width target-width)
+            (update :x - (/ (- target-width width ) 2)))))
+    bounds))

frontend/resources/styles/common/refactor/color-defs.scss

@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "sass:color" as color;
+@use "sass:color";
 
 :root {
   // DARK
@@ -31,10 +31,12 @@
   --light-gray-1: #fff;
   --light-gray-2: #e8eaee;
   --light-gray-2-30: rgba(232, 234, 238, 0.3);
+  --light-gray-2-80: rgba(232, 234, 238, 0.8);
   --light-gray-3: #f3f4f6;
   --light-gray-4: #eef0f2;
   --black: #000;
   --off-black: #495e74;
+  --off-black-30: #{color.change(#495e74, $alpha: 0.3)};
   --purple: #6911d4;
   --purple-30: rgba(105, 17, 212, 0.2);
   --blue: #1345aa;

frontend/resources/styles/common/refactor/common-dashboard.scss

@@ -157,6 +157,8 @@
 .btn-primary {
   @extend .button-primary;
   text-transform: uppercase;
+  font-size: $fs-14;
+  font-weight: $fw400;
 }
 
 .btn-secondary {

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -179,7 +179,7 @@
   --menu-shortcut-foreground-color: var(--color-foreground-secondary);
   --menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
   --menu-shortcut-foreground-color-hover: var(--color-foreground-primary);
-  --menu-shadow-color: var(--color-background-subtle);
+  --menu-shadow-color: var(--shadow-color);
   --menu-background-color-disabled: var(--color-background-primary);
   --menu-foreground-color-disabled: var(--color-foreground-secondary);
   --menu-border-color-disabled: var(--color-background-quaternary);

frontend/resources/styles/common/refactor/mixins.scss

@@ -63,6 +63,13 @@
   line-height: 1.2;
 }
 
+@mixin codeTypography {
+  font-family: "robotomono", monospace;
+  font-size: $fs-12;
+  font-weight: $fw400;
+  line-height: 1.2;
+}
+
 @mixin textEllipsis {
   max-width: 99%;
   overflow: hidden;

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -21,6 +21,7 @@
   --color-accent-primary-muted: var(--green-30);
   --color-accent-secondary: var(--lilac);
   --color-accent-tertiary: var(--strong-green);
+
   --overlay-color: rgba(0, 0, 0, 0.4);
   --ok-color: var(--dark-ok-color);
   --warning-color: var(--dark-warning-color);
@@ -28,5 +29,8 @@
   --error-color: var(--dark-error-color);
   --canvas-color: var(--color-canvas);
 
+  --shadow-color: var(--dark-gray-2-30);
+  --radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset;
+
   @include meta.load-css("hljs-dark-theme");
 }

frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss

@@ -1,98 +1,124 @@
-/**
+/*!
- * Panda Syntax Theme for Highlight.js
+  Theme: GitHub Dark Dimmed
- * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+  Description: Dark dimmed theme as seen on github.com
- * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
 */
 
 .hljs {
-  color: #e6e6e6;
+  color: #adbac7;
-  background: #2a2c2d;
+  background: #22272e;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #f47067;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #dcbdfb;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #6cb6ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #96d0ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #f69d50;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #768390;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #8ddb8c;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #adbac7;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #316dca;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #eac55f;
 }
 
 .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #adbac7;
   font-style: italic;
 }
 
 .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #adbac7;
   font-weight: bold;
 }
 
-.hljs-link {
+.hljs-addition {
-  text-decoration: underline;
+  /* prettylights-syntax-markup-inserted */
+  color: #b4f1b4;
+  background-color: #1b4721;
 }
 
-.hljs-comment,
-.hljs-quote {
-  color: #bbbbbb;
-  font-style: italic;
-}
-
-.hljs-params {
-  color: #bbbbbb;
-}
-
-.hljs-punctuation,
-.hljs-attr {
-  color: #e6e6e6;
-}
-
-.hljs-selector-tag,
-.hljs-name,
-.hljs-meta {
-  color: #ff4b82;
-}
-
-.hljs-operator,
-.hljs-char.escape_ {
-  color: #b084eb;
-}
-
-.hljs-keyword,
 .hljs-deletion {
-  color: #ff75b5;
+  /* prettylights-syntax-markup-deleted */
+  color: #ffd8d3;
+  background-color: #78191b;
 }
 
-.hljs-regexp,
+.hljs-char.escape_,
-.hljs-selector-pseudo,
-.hljs-selector-attr,
-.hljs-variable.language_ {
-  color: #ff9ac1;
-}
-
-.hljs-subst,
-.hljs-property,
-.hljs-code,
-.hljs-formula,
-.hljs-section,
-.hljs-title.function_ {
-  color: #45a9f9;
-}
-
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-selector-class,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-meta .hljs-string {
-  color: #19f9d8;
-}
-
-.hljs-variable,
-.hljs-template-variable,
-.hljs-number,
-.hljs-literal,
-.hljs-type,
 .hljs-link,
-.hljs-built_in,
+.hljs-params,
-.hljs-title,
+.hljs-property,
-.hljs-selector-id,
+.hljs-punctuation,
-.hljs-tag,
+.hljs-tag {
-.hljs-doctag,
+  /* purposely ignored */
-.hljs-attribute,
-.hljs-template-tag,
-.hljs-meta .hljs-keyword,
-.hljs-punctuation {
-  color: #ffb86c;
 }

frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss

@@ -1,94 +1,126 @@
-/**
+/*!
- * Panda Syntax Theme for Highlight.js
+  Theme: GitHub
- * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+  Description: Light theme as seen on github.com
- * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
 */
 
 .hljs {
-  color: #2a2c2d;
+  color: #24292e;
-  background: #e6e6e6;
+  background: #ffffff;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
 }
 
 .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
   font-style: italic;
 }
 
 .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
   font-weight: bold;
 }
 
-.hljs-link {
+.hljs-addition {
-  text-decoration: underline;
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
 }
 
-.hljs-comment,
-.hljs-quote {
-  color: #676b79;
-  font-style: italic;
-}
-
-.hljs-params {
-  color: #676b79;
-}
-
-.hljs-punctuation,
-.hljs-attr {
-  color: #2a2c2d;
-}
-
-.hljs-selector-tag,
-.hljs-name,
-.hljs-meta,
-.hljs-operator,
-.hljs-char.escape_ {
-  color: #c56200;
-}
-
-.hljs-keyword,
 .hljs-deletion {
-  color: #d92792;
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
 }
 
-.hljs-regexp,
+.hljs-char.escape_,
-.hljs-selector-pseudo,
-.hljs-selector-attr,
-.hljs-variable.language_ {
-  color: #cc5e91;
-}
-
-.hljs-subst,
-.hljs-property,
-.hljs-code,
-.hljs-formula,
-.hljs-section,
-.hljs-title.function_ {
-  color: #3787c7;
-}
-
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-selector-class,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-meta .hljs-string {
-  color: #0d7d6c;
-}
-
-.hljs-variable,
-.hljs-template-variable,
-.hljs-number,
-.hljs-literal,
-.hljs-type,
 .hljs-link,
-.hljs-built_in,
+.hljs-params,
-.hljs-title,
+.hljs-property,
-.hljs-selector-id,
+.hljs-punctuation,
-.hljs-tag,
+.hljs-tag {
-.hljs-doctag,
+  /* purposely ignored */
-.hljs-attribute,
+  color: #6a737d;
-.hljs-template-tag,
-.hljs-meta .hljs-keyword {
-  color: #7641bb;
 }

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -21,11 +21,16 @@
   --color-accent-primary-muted: var(--purple-30);
   --color-accent-secondary: var(--blue);
   --color-accent-tertiary: var(--strong-purple);
+
+  --overlay-color: rgba(255, 255, 255, 0.4);
   --ok-color: var(--light-ok-color);
   --warning-color: var(--light-warning-color);
   --pending-color: var(--light-pending-color);
   --error-color: var(--light-error-color);
   --canvas-color: var(--color-canvas);
 
+  --shadow-color: var(--off-black-30);
+  --radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
+
   @include meta.load-css("hljs-light-theme");
 }

frontend/src/app/main/data/dashboard.cljs

@@ -831,9 +831,15 @@
   (ptk/reify ::set-file-thumbnail
     ptk/UpdateEvent
     (update [_ state]
+      (letfn [(update-search-files [files]
+                (->> files
+                     (mapv #(cond-> %
+                              (= file-id (:id %))
+                              (assoc :thumbnail-uri thumbnail-uri)))))]
         (-> state
             (d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri)
-          (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri)))))
+            (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri)
+            (d/update-when :dashboard-search-result update-search-files))))))
 
 ;; --- EVENT: create-file
 

frontend/src/app/main/render.cljs

@@ -66,8 +66,9 @@
     :fill color}])
 
 (defn- calculate-dimensions
-  [objects]
+  [objects aspect-ratio]
-  (let [bounds (->> (ctst/get-root-objects objects)
+  (let [bounds
+        (->> (ctst/get-root-objects objects)
              (map (partial gsb/get-object-bounds objects))
              (grc/join-rects))]
     (-> bounds
@@ -75,7 +76,8 @@
         (update :y mth/finite 0)
         (update :width mth/finite 100000)
         (update :height mth/finite 100000)
-        (grc/update-rect :position))))
+        (grc/update-rect :position)
+        (grc/fix-aspect-ratio aspect-ratio))))
 
 (declare shape-wrapper-factory)
 
@@ -194,11 +196,11 @@
 
 (mf/defc page-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [data use-thumbnails embed include-metadata] :as props
+  [{:keys [data use-thumbnails embed include-metadata aspect-ratio] :as props
     :or {embed false include-metadata false}}]
   (let [objects (:objects data)
         shapes  (cfh/get-immediate-children objects)
-        dim     (calculate-dimensions objects)
+        dim     (calculate-dimensions objects aspect-ratio)
         vbox    (format-viewbox dim)
         bgcolor (dm/get-in data [:options :background] default-color)
 
@@ -253,11 +255,14 @@
 ;; the viewer and inspector
 (mf/defc frame-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [objects frame zoom use-thumbnails] :or {zoom 1} :as props}]
+  [{:keys [objects frame zoom use-thumbnails aspect-ratio background-color] :or {zoom 1} :as props}]
   (let [frame-id         (:id frame)
+
+        bgcolor (d/nilv background-color default-color)
         include-metadata (mf/use-ctx export/include-metadata-ctx)
 
-        bounds (gsb/get-object-bounds objects frame)
+        bounds (-> (gsb/get-object-bounds objects frame)
+                   (grc/fix-aspect-ratio aspect-ratio))
 
         ;; Bounds without shadows/blur will be the bounds of the thumbnail
         bounds2 (gsb/get-object-bounds objects (dissoc frame :shadow :blur))
@@ -305,6 +310,7 @@
             :xmlns "http://www.w3.org/2000/svg"
             :xmlnsXlink "http://www.w3.org/1999/xlink"
             :xmlns:penpot (when include-metadata "https://penpot.app/xmlns")
+            :style {:background bgcolor}
             :fill "none"}
       [:& shape-wrapper {:shape frame}]]]))
 

frontend/src/app/main/ui/auth.scss

@@ -15,6 +15,7 @@
   height: 100%;
   padding: $s-32;
   width: 100%;
+  overflow: auto;
 
   &.no-illustration {
     display: flex;

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

@@ -17,7 +17,9 @@
   {::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)
+        on-click
+        (mf/use-fn
          (mf/deps color on-click)
          (fn [event]
            (when (fn? on-click)
@@ -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);
   }
 }
@@ -87,6 +87,7 @@
   @include inspectValue;
   color: var(--palette-text-color);
   height: $s-16;
+  text-align: center;
 }
 
 .no-text {

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

@@ -40,6 +40,7 @@
   &.checked {
     border: none;
     background-color: var(--radio-btn-background-color-selected);
+    box-shadow: var(--radio-button-box-shadow);
     svg {
       stroke: var(--radio-btn-foreground-color-selected);
     }

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

@@ -24,6 +24,7 @@
     height: 100%;
     min-height: $s-32;
     color: var(--title-foreground-color);
+    overflow: hidden;
   }
   .title-only {
     margin-left: $s-8;
@@ -36,6 +37,7 @@
     padding: 0;
     color: var(--title-foreground-color);
     stroke: var(--title-foreground-color);
+    overflow: hidden;
     .toggle-btn {
       @include buttonStyle;
       display: flex;
@@ -44,6 +46,7 @@
       padding: 0;
       color: var(--title-foreground-color);
       stroke: var(--title-foreground-color);
+      overflow: hidden;
       .collapsabled-icon {
         @include flexCenter;
         height: $s-24;

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

@@ -61,7 +61,7 @@
                          (rx/map (fn [styles]
                                    (assoc result
                                           :styles styles
-                                          :width 250))))))
+                                          :width 252))))))
        (rx/mapcat thr/render)
        (rx/mapcat (partial persist-thumbnail file-id revn))))
 

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

@@ -7,7 +7,7 @@
 @import "refactor/common-refactor.scss";
 
 $thumbnail-default-width: $s-252; // Default width
-$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
+$thumbnail-default-height: $s-168; // Default width
 
 .dashboard-grid {
   font-size: $fs-14;
@@ -44,10 +44,12 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
   }
 
   .grid-item-th {
-    border-radius: $br-4;
+    border-radius: $br-8;
     text-align: initial;
     width: var(--th-width, #{$thumbnail-default-width});
-    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
+    height: var(--th-height, #{$thumbnail-default-height});
+    background-size: cover;
+    overflow: hidden;
 
     img {
       object-fit: contain;
@@ -59,7 +61,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
     outline: $br-4 solid $da-primary;
     text-align: initial;
     width: calc(var(--th-width) + $s-12);
-    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
+    height: var(--th-height, #{$thumbnail-default-height});
   }
 
   &.overlay {
@@ -131,10 +133,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
   .item-badge {
     background-color: $da-primary;
     border: none;
-    border-radius: $br-4;
+    border-radius: $br-6;
     position: absolute;
-    top: $s-8;
+    top: $s-12;
-    right: $s-8;
+    right: $s-12;
     height: $s-32;
     width: $s-32;
     display: flex;
@@ -258,17 +260,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
 .grid-item-th {
   border-radius: $br-4;
   cursor: pointer;
-
-  background-position: center;
-  background-size: auto 80%;
-  background-repeat: no-repeat;
-
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
-
-  background-color: var(--canvas-color);
   display: flex;
   justify-content: center;
   flex-direction: row;
@@ -283,8 +278,9 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
     width: 100%;
   }
 
-  svg#loader-pencil {
+  :global(svg#loader-pencil) {
-    fill: $db-cuaternary;
+    stroke: $db-cuaternary;
+    width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
   }
 }
 

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

@@ -65,7 +65,7 @@
     text-transform: uppercase;
     border: $s-2 solid transparent;
     width: var(--th-width, #{g.$thumbnail-default-width});
-    height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration});
+    height: var(--th-height, #{g.$thumbnail-default-height});
 
     svg {
       width: $s-32;

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

@@ -33,7 +33,6 @@
 
   .project {
     align-items: center;
-    background: $df-primary;
     border-radius: $br-4;
     display: flex;
     flex-direction: row;
@@ -87,8 +86,8 @@
       cursor: pointer;
       font-size: $fs-16;
       line-height: 0.8;
-      font-weight: $fw700;
+      font-weight: $fw400;
-      color: $db-secondary;
+      color: $df-primary;
       margin-right: $s-4;
       margin-right: $s-12;
     }
@@ -98,7 +97,7 @@
       font-size: $fs-14;
       line-height: 1.15;
       font-weight: $fw400;
-      color: $db-primary;
+      color: $df-secondary;
       @media (max-width: 760px) {
         display: none;
       }
@@ -109,6 +108,9 @@
       opacity: 1;
       margin-left: $s-32;
 
+      svg {
+        fill: $df-primary;
+      }
       .btn-small {
         height: $s-32;
         margin: 0 $s-8;
@@ -139,7 +141,7 @@
 
       &.active {
         svg {
-          fill: $db-tertiary;
+          fill: $da-primary;
         }
       }
     }
@@ -188,28 +190,6 @@
   }
 }
 
-.dashboard-project-row .project {
-  background-color: transparent;
-
-  h2 {
-    color: $df-primary;
-    font-weight: 400;
-  }
-  span,
-  .info,
-  .recent-files-row-title-info {
-    color: $df-secondary;
-  }
-  .project-actions {
-    svg {
-      fill: $df-primary;
-    }
-    .pin-icon svg {
-      fill: $df-secondary;
-    }
-  }
-}
-
 .team-hero {
   background-color: $db-tertiary;
   border-radius: $br-8;

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

@@ -335,7 +335,7 @@
     transform: rotate(45deg);
 
     &:hover {
-      fill: var(--warning-color);
+      fill: $da-primary;
     }
   }
 }
@@ -420,7 +420,10 @@
     }
 
     &:hover {
-      background-color: $db-cuaternary;
+      background-color: $db-secondary;
+      span {
+        color: $da-primary;
+      }
     }
 
     &.current {

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

@@ -367,13 +367,17 @@
          limit    (mth/max 1 limit)
 
          th-size (when width
-                   (- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
+                   (mth/floor (- (/ (- width 32 (* (dec limit) 24)) limit) 12)))
+
+         ;; Need an even value
+         th-size (if (odd? (int th-size)) (- th-size 1) th-size)]
 
      (mf/with-effect
        [th-size]
        (when th-size
          (let [node (mf/ref-val rowref)]
-           (.setProperty (.-style node) "--th-width" (str th-size "px")))))
+           (.setProperty (.-style node) "--th-width" (str th-size "px"))
+           (.setProperty (.-style node) "--th-height" (str (mth/ceil (* th-size (/ 2 3))) "px")))))
 
      (mf/with-effect []
        (let [node (mf/ref-val rowref)

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

@@ -24,8 +24,10 @@
   (set! last-resize-type type))
 
 (defn use-resize-hook
-  [key initial min-val max-val axis negate? resize-type]
+  ([key initial min-val max-val axis negate? resize-type]
+   (use-resize-hook key initial min-val max-val axis negate? resize-type nil))
 
+  ([key initial min-val max-val axis negate? resize-type on-change-size]
    (let [current-file-id (mf/use-ctx ctx/current-file-id)
          size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
          parent-ref (mf/use-ref nil)
@@ -66,20 +68,28 @@
                     start-size (mf/ref-val start-size-ref)
                     new-size (-> (+ start-size delta) (max min-val) (min max-val))]
                 (reset! size-state new-size)
-               (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))
+                (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
+                (when on-change-size (on-change-size new-size))))))
 
          set-size
          (mf/use-callback
+          (mf/deps on-change-size)
           (fn [new-size]
             (let [new-size (mth/clamp new-size min-val max-val)]
               (reset! size-state new-size)
-             (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
+              (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
+              (when on-change-size (on-change-size new-size)))))]
+
+     (mf/use-effect
+      (fn []
+        (when on-change-size (on-change-size @size-state))))
+
      {:on-pointer-down on-pointer-down
       :on-lost-pointer-capture on-lost-pointer-capture
       :on-pointer-move on-pointer-move
       :parent-ref parent-ref
       :set-size set-size
-     :size @size-state}))
+      :size @size-state})))
 
 (defn use-resize-observer
   [callback]

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

@@ -7,6 +7,12 @@
 @import "refactor/common-refactor.scss";
 
 .element-options {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding-bottom: $s-16;
+
   .attributes-block {
     .download-button {
       @extend .button-secondary;
@@ -17,12 +23,34 @@
     }
   }
   .code-block {
+    @include codeTypography;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
     padding: 0 $s-4 $s-8 0;
+
+    pre {
+      border-radius: $br-8;
+      padding: $s-16;
+      max-height: var(--code-height);
+      overflow: auto;
+      height: 100%;
+    }
+
+    // Overrides background setted in the theme
+    :global(.hljs) {
+      background: $db-tertiary;
+    }
+  }
   .code-row-lang {
     display: flex;
     justify-content: space-between;
     gap: $s-4;
     width: 100%;
+  }
   .code-lang {
     @include tabTitleTipography;
     display: flex;
@@ -43,19 +71,18 @@
       }
     }
   }
-
   .code-lang-select {
     @include tabTitleTipography;
-        width: $s-92;
+    width: $s-72;
     border: $s-1 solid transparent;
     background-color: transparent;
     color: var(--menu-foreground-color-disabled);
   }
-    }
-
   .code-row-display {
-      margin-bottom: $s-8;
+    flex: 1;
-    }
+    min-height: 0;
+    overflow: hidden;
+    padding-bottom: $s-8;
   }
 }
 

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

@@ -61,7 +61,8 @@
 (mf/defc workspace-content
   {::mf/wrap-props false}
   [{:keys [file layout page-id wglobal]}]
-  (let [selected (mf/deref refs/selected-shapes)
+  (let [palete-size (mf/use-state nil)
+        selected (mf/deref refs/selected-shapes)
 
         {:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
         {:keys [options-mode]} wglobal
@@ -78,11 +79,17 @@
            (when (and vport (not= size vport))
              (st/emit! (dw/update-viewport-size resize-type size)))))
 
+        on-resize-palette
+        (mf/use-fn
+         (fn [size]
+           (reset! palete-size size)))
+
         node-ref (use-resize-observer on-resize)]
     [:*
      (if new-css-system
        (when (not hide-ui?)
-         [:& palette {:layout layout}])
+         [:& palette {:layout layout
+                      :on-change-palette-size on-resize-palette}])
        [:*
         (when (and colorpalette? (not hide-ui?))
           [:& colorpalette])
@@ -107,7 +114,10 @@
                      :wlocal wlocal
                      :wglobal wglobal
                      :selected selected
-                     :layout layout}]]]
+                     :layout layout
+                     :palete-size
+                     (when (and (or colorpalette? textpalette?) (not hide-ui?))
+                       @palete-size)}]]]
 
      (when-not hide-ui?
        [:*

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

@@ -12,7 +12,7 @@
 @include font-face("worksans", "WorkSans-Bold", bold);
 
 // Space mono
-@include font-face("spacemono", "SpaceMono-Regular", normal);
+@include font-face("robotomono", "RobotoMono-Regular", normal);
 
 :global(:root) {
   --s-4: 0.25rem;

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

@@ -93,7 +93,9 @@
       cursor: pointer;
     }
     .separator {
-      height: $s-12;
+      margin-top: $s-8;
+      height: $s-4;
+      border-top: 1px solid $db-secondary;
     }
     .shortcut {
       @extend .shortcut;

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

@@ -46,7 +46,7 @@
          "paddingRight" "calc(var(--s-4) * 70)"}))
 
 (mf/defc palette
-  [{:keys [layout]}]
+  [{:keys [layout on-change-palette-size]}]
   (let [color-palette?       (:colorpalette layout)
         text-palette?        (:textpalette layout)
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
@@ -57,10 +57,11 @@
         on-select            (mf/use-fn #(reset! selected %))
         rulers?              (mf/deref refs/rules?)
         {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom)
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
 
         vport (mf/deref viewport)
         vport-width (:width vport)
+
         on-resize
         (mf/use-callback
          (fn [_]
@@ -98,7 +99,8 @@
 
         any-palette? (or color-palette? text-palette?)
 
-        size-classname (cond
+        size-classname
+        (cond
           (<= size 64) (css :small-palette)
           (<= size 72) (css :mid-palette)
           (<= size 80) (css :big-palette))]

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

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.config :as cfg]
    [app.main.refs :as refs]
    [app.main.ui.context :as ctx]
@@ -49,15 +50,13 @@
 
     (if new-css-system
       [:*
-       (when (and (< 2 num-users) open?)
+       (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 (< 2 num-users)
-             [:li [:span {:class (stl/css :users-num)} num-users]])
            (for [session user-ids]
              [:& session-widget
               {:session session
@@ -69,7 +68,7 @@
                  :on-click open-users-widget}
 
         [:ul {:class (stl/css :active-users-list)}
-         (when (< 2 num-users) [:span {:class (stl/css :users-num)} num-users])
+         (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

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/sidebar/assets/colors.scss

@@ -88,8 +88,6 @@
   }
   .drop-space {
     height: $s-12;
-    border-radius: $br-8;
-    background-color: var(--assets-item-background-color);
   }
   .dragging {
     position: absolute;

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -95,7 +95,7 @@
 
         on-component-click
         (mf/use-fn
-         (mf/deps component-id)
+         (mf/deps component-id on-asset-click)
          (fn [event]
            (dom/stop-propagation event)
            (on-asset-click component-id unselect-all event)))
@@ -141,7 +141,7 @@
 
         on-context-menu
         (mf/use-fn
-         (mf/deps component-id)
+         (mf/deps on-context-menu component-id)
          (partial on-context-menu component-id))]
 
     (if ^boolean new-css-system
@@ -449,6 +449,7 @@
         toggle-list-style        (mf/use-ctx cmm/assets-toggle-list-style)
 
         selected                 (:components selected)
+
         selected-full            (into #{} (filter #(contains? selected (:id %))) components)
         multi-components?        (> (count selected) 1)
         multi-assets?            (or (seq (:graphics selected))
@@ -519,6 +520,7 @@
         (mf/use-fn
          (mf/deps selected on-clear-selection read-only?)
          (fn [component-id event]
+           (dom/stop-propagation event)
            (dom/prevent-default event)
            (let [pos (dom/get-client-position event)]
 

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -9,8 +9,6 @@
 .component-group {
   .drop-space {
     height: $s-12;
-    border-radius: $br-8;
-    background-color: var(--color-foreground-secondary);
   }
   .asset-grid {
     display: grid;
@@ -22,7 +20,7 @@
       @include flexCenter;
       position: relative;
       padding: $s-8;
-      border: $s-2 solid transparent;
+      border: $s-4 solid transparent;
       border-radius: $br-8;
       background-color: var(--color-foreground-secondary);
       overflow: hidden;
@@ -100,7 +98,7 @@
       }
 
       &.selected {
-        border: $s-1 solid var(--assets-item-border-color);
+        border: $s-4 solid var(--assets-item-border-color);
       }
     }
     .grid-placeholder {

frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss

@@ -9,8 +9,6 @@
 .graphics-group {
   .drop-space {
     height: $s-12;
-    border-radius: $br-8;
-    background-color: var(--color-foreground-secondary);
   }
   .asset-grid {
     display: grid;

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss

@@ -22,8 +22,6 @@
     padding: 0 0 0 $s-4;
     .drop-space {
       height: $s-12;
-      border-radius: $br-8;
-      background-color: var(--assets-item-background-color);
     }
     .grid-placeholder {
       height: $s-2;

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -180,6 +180,7 @@
                    :on-click on-remove}
           i/remove-refactor]]]
 
+       (when (:display grid)
          [:& advanced-options {:class (stl/css :grid-advanced-options)
                                :visible? open?
                                :on-close toggle-advanced-options}
@@ -281,7 +282,7 @@
                            :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
                  [:button {:disabled is-default
                            :class (stl/css :option-btn)
-                         :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])]]
+                           :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]
 
       [:div.grid-option
        [:div.grid-option-main {:style {:display (when open? "none")}}

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -25,6 +25,7 @@
     }
 
     .help-content {
+      padding: $s-20;
       .help-group {
         margin-bottom: $s-40;
         .interactions-help-icon {

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -1389,10 +1389,6 @@
                        :class        (stl/css-case :title-spacing-layout (not has-layout?))}
          (if (and (not multiple) (:layout values))
            [:div {:class (stl/css :title-actions)}
-            [:button {:class (stl/css :remove-layout)
-                      :on-click on-remove-layout}
-             i/remove-refactor]
-
             (when ^boolean grid-enabled?
               [:*
                [:button {:class (stl/css :add-layout)
@@ -1402,7 +1398,11 @@
                [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
                 [:div {:class (stl/css :layout-options)}
                  [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"]
-                 [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])]
+                 [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])
+
+            [:button {:class (stl/css :remove-layout)
+                      :on-click on-remove-layout}
+             i/remove-refactor]]
 
            [:div {:class (stl/css :title-actions)}
             (if ^boolean grid-enabled?

frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs

@@ -50,11 +50,21 @@
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]
+
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values
                         :shape shape}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
@@ -71,10 +81,6 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& fill-menu {:ids ids
                     :type type
                     :values (select-keys shape fill-attrs)}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -52,11 +52,21 @@
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]
+
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values
                         :shape shape}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
@@ -72,9 +82,6 @@
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
                              :shape shape}])
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
 
      [:& fill-menu {:ids ids
                     :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -62,11 +62,18 @@
                         :values measure-values
                         :type type
                         :shape shape}]
+
      [:& component-menu {:shapes [shape]}]
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -74,7 +74,15 @@
      [:& layer-menu {:type type :ids layer-ids :values layer-values}]
      [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
      [:& component-menu {:shapes [shape]}] ;;remove this in components-v2
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
@@ -91,9 +99,6 @@
          :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
-
      (when-not (empty? fill-ids)
        [:& fill-menu {:type type :ids fill-ids :values fill-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs

@@ -52,11 +52,21 @@
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]
+
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values
                         :shape shape}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
@@ -73,12 +83,6 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
-
-
      [:& fill-menu {:ids ids
                     :type type
                     :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -359,8 +359,14 @@
      (when-not (empty? components)
        [:& component-menu {:shapes components}])
 
-     [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
+     (when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
+       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
 
+     [:& layout-container-menu
+      {:type type
+       :ids layout-container-ids
+       :values layout-container-values
+       :multiple true}]
 
      (when (or is-layout-child? has-flex-layout-container?)
        [:& layout-item-menu
@@ -372,9 +378,6 @@
          :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
-     (when-not (or (empty? constraint-ids) is-layout-child?)
-       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
-
      (when-not (empty? text-ids)
        [:& ot/text-menu {:type type :ids text-ids :values text-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -56,7 +56,16 @@
                         :type type
                         :values measure-values
                         :shape shape}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
@@ -72,9 +81,6 @@
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
                              :shape shape}])
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
 
      [:& fill-menu {:ids ids
                     :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -59,6 +59,11 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& layout-container-menu
       {:type type
        :ids ids
@@ -80,13 +85,6 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
-     (when (or (not ^boolean is-layout-child?)
-               ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
-
-
      [:& fill-menu {:ids ids
                     :type type
                     :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -128,7 +128,16 @@
                           :type type
                           :values measure-values
                           :shape shape}]
-       [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+       (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+         [:& constraints-menu {:ids ids
+                               :values constraint-values}])
+
+       [:& layout-container-menu
+        {:type type
+         :ids [(:id shape)]
+         :values layout-container-values
+         :multiple false}]
 
        (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
          [:& grid-cell/options
@@ -145,10 +154,6 @@
            :is-grid-parent? is-grid-parent?
            :shape shape}])
 
-       (when (or (not is-layout-child?) is-layout-child-absolute?)
-         [:& constraints-menu {:ids ids
-                               :values constraint-values}])
-
        [:& fill-menu {:ids ids
                       :type type
                       :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -91,12 +91,23 @@
        :type type
        :values (select-keys shape measure-attrs)
        :shape shape}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu
+        {:ids ids
+         :values (select-keys shape constraint-attrs)}])
+
+     [:& layout-container-menu
+      {:type type
+       :ids [(:id shape)]
+       :values layout-container-values
+       :multiple false}]
 
      (when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
        [:& grid-cell/options
         {:shape (first parents)
          :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
+
      (when is-layout-child?
        [:& layout-item-menu
         {:ids ids
@@ -107,13 +118,6 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
-       [:& constraints-menu
-        {:ids ids
-         :values (select-keys shape constraint-attrs)}])
-
-
-
      [:& text-menu
       {:ids ids
        :type type

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

@@ -69,7 +69,7 @@
    selected))
 
 (mf/defc viewport
-  [{:keys [selected wglobal wlocal layout file] :as props}]
+  [{:keys [selected wglobal wlocal layout file palete-size] :as props}]
   (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
         ;; that the new parameter is sent
         {:keys [edit-path
@@ -535,7 +535,8 @@
        [:& scroll-bars/viewport-scrollbars
         {:objects base-objects
          :zoom zoom
-         :vbox vbox}]
+         :vbox vbox
+         :bottom-padding (when palete-size (+ palete-size 8))}]
 
        (when-not hide-ui?
          [:& rules/rules

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

@@ -28,7 +28,7 @@
 
 (mf/defc viewport-scrollbars
   {::mf/wrap [mf/memo]}
-  [{:keys [objects zoom vbox]}]
+  [{:keys [objects zoom vbox bottom-padding]}]
 
   (let [v-scrolling?              (mf/use-state false)
         h-scrolling?              (mf/use-state false)
@@ -56,6 +56,11 @@
                                         (cfh/get-immediate-children)
                                         (gsh/shapes->rect)))
 
+        ;; Padding for bottom palette
+        vbox                     (cond-> vbox
+                                   (some? bottom-padding)
+                                   (update :height - (/ bottom-padding zoom)))
+
         inv-zoom                 (/ 1 zoom)
         vbox-height              (- (:height vbox) (* inv-zoom scroll-height))
         vbox-width               (- (:width vbox) (* inv-zoom scroll-width))
@@ -65,6 +70,7 @@
                                      (max 0)
                                      (* vbox-height)
                                      (/ (:height base-objects-rect)))
+
         ;; left space hidden because of the scroll
         left-offset              (-> (- vbox-x (:x base-objects-rect))
                                      (max 0)

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 {

frontend/src/app/worker/thumbnails.cljs

@@ -7,6 +7,7 @@
 (ns app.worker.thumbnails
   (:require
    ["react-dom/server" :as rds]
+   [app.common.data.macros :as dm]
    [app.common.logging :as log]
    [app.common.uri :as u]
    [app.config :as cf]
@@ -62,16 +63,27 @@
     (binding [fonts/loaded-hints (l/atom #{})]
       (let [objects  (:objects page)
             frame    (some->> page :thumbnail-frame-id (get objects))
+            background-color (dm/get-in page [:options :background])
             element  (if frame
-                       (mf/element render/frame-svg #js {:objects objects :frame frame :use-thumbnails true})
+                       (mf/element render/frame-svg #js
-                       (mf/element render/page-svg #js {:data page :use-thumbnails true :embed true}))
+                                   {:objects objects
+                                    :frame frame
+                                    :use-thumbnails true
+                                    :background-color background-color
+                                    :aspect-ratio (/ 2 3)})
+
+                       (mf/element render/page-svg #js
+                                   {:data page
+                                    :use-thumbnails true
+                                    :embed true
+                                    :aspect-ratio (/ 2 3)}))
             data     (rds/renderToStaticMarkup element)]
         {:data data
          :fonts @fonts/loaded-hints
          :file-id file-id
          :revn revn}))
     (catch :default cause
-      (js/console.error "unexpected erorr on rendering thumbnail" cause)
+      (js/console.error "unexpected error on rendering thumbnail" cause)
       nil)))
 
 (defmethod impl/handler :thumbnails/generate-for-file