Merge remote-tracking branch 'origin/staging' into develop

common/src/app/common/types/shape/layout.cljc

@@ -1076,14 +1076,13 @@
   (->> (cells-seq parent :sort? true)
        (reduce
         (fn [[parent auto?] cell]
-
           (let [[cell auto?]
                 (cond
                   (and (empty? (:shapes cell))
                        (= :manual (:position cell))
                        (= (:row-span cell) 1)
                        (= (:column-span cell) 1))
-                  [(assoc cell :position :auto) false]
+                  [cell false]
 
                   (and (or (not= (:row-span cell) 1)
                            (not= (:column-span cell) 1))

frontend/resources/images/icons/exit-refactor.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"/>
+</svg>

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -848,6 +848,7 @@
   color: var(--title-foreground-color-hover);
   background-color: var(--menu-background-color);
   border: $s-2 solid var(--panel-border-color);
+  margin: 0;
 }
 
 .menu-item-base {

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

@@ -155,6 +155,7 @@
   --icon-foreground-hover: var(--color-foreground-primary);
   --icon-foreground-accept: var(--status-color-success-500);
   --icon-foreground-discard: var(--status-color-error-500);
+  --icon-foreground-active: var(--color-accent-primary);
 
   // INPUTS, SELECTS, DROPDOWNS
 
@@ -201,6 +202,7 @@
 
   --menu-background-color: var(--color-background-tertiary);
   --menu-foreground-color: var(--color-foreground-primary);
+  --menu-icon-foreground-color: var(--color-foreground-secondary);
   --menu-background-color-selected: var(--color-background-tertiary);
   --menu-background-color-hover: var(--color-background-quaternary);
   --menu-foreground-color-hover: var(--color-foreground-primary);
@@ -358,6 +360,11 @@
   --search-bar-background-color: var(--color-background-primary);
   --search-bar-input-background-color: var(--color-background-tertiary);
   --search-bar-input-border-color: var(--color-background-tertiary);
+  --search-bar-input-border-color-focus: var(--color-accent-primary);
+  --search-bar-placeholder-foreground-color: var(--color-foreground-secondary);
+  --search-bar-foreground-color: var(--color-foreground-primary);
+  --search-bar-icon-foreground-color: var(--color-foreground-secondary);
+  --search-bar-icon-foreground-color-hover: var(--color-accent-primary);
 
   --pill-background-color: var(--color-background-tertiary);
   --pill-foreground-color: var(--color-foreground-primary);
@@ -369,6 +376,8 @@
   --resize-area-background-color: var(--color-background-primary);
   --resize-area-border-color: var(--color-background-quaternary);
 
+  --profile-section-background-color: var(--color-background-tertiary);
+
   --flow-tag-background-color: var(--color-background-tertiary);
   --flow-tag-foreground-color: var(--color-foreground-secondary);
   --flow-tag-background-color-hover: var(--color-background-quaternary);
@@ -393,6 +402,14 @@
   // NEW TEAM BUTTON
   // TODO: we should not put these functional tokens here, but rather in the components they belong to
   --new-team-button-background-color: var(--color-background-primary);
+
+  //DASHBOARD
+  --sidebar-element-foreground-color: var(--color-foreground-secondary);
+  --sidebar-element-background-color-hover: var(--color-background-secondary);
+  --sidebar-element-foreground-color-hover: var(--color-accent-primary);
+  --sidebar-element-background-color-selected: var(--color-background-quaternary);
+  --sidebar-element-foreground-color-selected: var(--color-accent-primary);
+  --profile-foreground-color: var(--color-foreground-primary);
 }
 
 #app {

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

@@ -47,6 +47,7 @@
 (defn notify-start-loading
   []
   (st/emit! (msg/show {:content (tr "media.loading")
+                       :notification-type :toast
                        :type :info
                        :timeout nil})))
 

frontend/src/app/main/data/workspace/libraries.cljs

@@ -808,7 +808,7 @@
         component       (ctkl/get-component data component-id)
         page-id         (:main-instance-page component)
         root-id         (:main-instance-id component)]
-    (dwt/request-thumbnail file-id page-id root-id tag)))
+    (dwt/request-thumbnail file-id page-id root-id tag "update-component-thumbnail-sync")))
 
 (defn update-component-sync
   ([shape-id file-id] (update-component-sync shape-id file-id nil))

frontend/src/app/main/data/workspace/media.cljs

@@ -211,6 +211,7 @@
     (watch [_ _ _]
       (rx/concat
        (rx/of (msg/show {:content (tr "media.loading")
+                         :notification-type :toast
                          :type :info
                          :timeout nil
                          :tag :media-loading}))
@@ -440,6 +441,7 @@
 
         (rx/concat
          (rx/of (msg/show {:content (tr "media.loading")
+                           :notification-type :toast
                            :type :info
                            :timeout nil
                            :tag :media-loading}))

frontend/src/app/main/data/workspace/shape_layout.cljs

@@ -573,6 +573,7 @@
                               (> (:row-span cell) 1)
                               (> (:column-span cell) 1))
                           (-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
+                              (d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
                               (ctl/resize-cell-area (:row cell) (:column cell) (:row cell) (:column cell) 1 1)
                               (ctl/assign-cells objects)))))
                     shape))
@@ -585,6 +586,7 @@
                         (cond-> shape
                           (contains? #{:area :auto} (:position cell))
                           (-> (d/assoc-in-when [:layout-grid-cells cell-id :position] :manual)
+                              (d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
                               (ctl/assign-cells objects)))))
                     shape))
 

frontend/src/app/main/data/workspace/thumbnails.cljs

@@ -58,15 +58,17 @@
 
 (defn request-thumbnail
   "Enqueues a request to generate a thumbnail for the given ids."
-  [file-id page-id shape-id tag]
+  ([file-id page-id shape-id tag]
-  (ptk/reify ::request-thumbnail
+   (request-thumbnail file-id page-id shape-id tag "unknown"))
-    ptk/EffectEvent
+  ([file-id page-id shape-id tag requester]
-    (effect [_ _ _]
+   (ptk/reify ::request-thumbnail
-      (l/dbg :hint "request thumbnail" :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
+     ptk/EffectEvent
-      (q/enqueue-unique
+     (effect [_ _ _]
-       queue
+       (l/dbg :hint "request thumbnail" :requester requester :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
-       (create-request file-id page-id shape-id tag)
+       (q/enqueue-unique
-       (partial find-request file-id page-id shape-id tag)))))
+        queue
+        (create-request file-id page-id shape-id tag)
+        (partial find-request file-id page-id shape-id tag))))))
 
 ;; This function first renders the HTML calling `render/render-frame` that
 ;; returns HTML as a string, then we send that data to the iframe rasterizer
@@ -291,6 +293,6 @@
               (->> all-changes-s
                    (rx/buffer-until notifier-s)
                    (rx/mapcat #(into #{} %))
-                   (rx/map #(request-thumbnail file-id page-id % "frame"))))
+                   (rx/map #(request-thumbnail file-id page-id % "frame" "watch-state-changes"))))
 
              (rx/take-until stopper-s))))))

frontend/src/app/main/errors.cljs

@@ -124,6 +124,7 @@
     (let [message (tr "errors.paste-data-validation")]
       (st/async-emit!
        (msg/show {:content message
+                  :notification-type :toast
                   :type :error
                   :timeout 3000})))
 
@@ -138,6 +139,7 @@
   [error]
   (ts/schedule
    #(st/emit! (msg/show {:content "Internal Assertion Error"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000})))
 
@@ -153,6 +155,7 @@
   (ts/schedule
    #(st/emit!
      (msg/show {:content "Something wrong has happened (on worker)."
+                :notification-type :toast
                 :type :error
                 :timeout 3000})))
 
@@ -166,6 +169,7 @@
   [_]
   (ts/schedule
    #(st/emit! (msg/show {:content "SVG is invalid or malformed"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000}))))
 
@@ -174,6 +178,7 @@
   [_]
   (ts/schedule
    #(st/emit! (msg/show {:content "There was an error with the comment"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000}))))
 

frontend/src/app/main/fonts.cljs

@@ -18,7 +18,6 @@
    [app.util.http :as http]
    [app.util.object :as obj]
    [beicon.v2.core :as rx]
-   [clojure.set :as set]
    [cuerdas.core :as str]
    [lambdaisland.uri :as u]
    [okulary.core :as l]
@@ -273,13 +272,17 @@
 
 (defn get-content-fonts
   "Extracts the fonts used by the content of a text shape"
-  [{font-id :font-id children :children :as content}]
+  [content]
-  (let [current-font
+  (->> (txt/node-seq content)
-        (if (some? font-id)
+       (filter txt/is-text-node?)
-          #{(select-keys content [:font-id :font-variant-id])}
+       (reduce
-          #{(select-keys txt/default-text-attrs [:font-id :font-variant-id])})
+        (fn [result {:keys [font-id] :as node}]
-        children-font (->> children (mapv get-content-fonts))]
+          (let [current-font
-    (reduce set/union (conj children-font current-font))))
+                (if (some? font-id)
+                  (select-keys node [:font-id :font-variant-id])
+                  (select-keys txt/default-text-attrs [:font-id :font-variant-id]))]
+            (conj result current-font)))
+        #{})))
 
 (defn fetch-font-css
   "Given a font and the variant-id, retrieves the fontface CSS"

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

@@ -12,10 +12,10 @@
 
 (mf/defc link
   {::mf/wrap-props false}
-  [{:keys [action klass data-test keyboard-action children]}]
+  [{:keys [action class data-test keyboard-action children]}]
   (let [keyboard-action (d/nilv keyboard-action action)]
     [:a {:on-click action
-         :class klass
+         :class class
          :on-key-down (fn [event]
                         (when ^boolean (kbd/enter? event)
                           (keyboard-action event)))

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

@@ -7,498 +7,375 @@
 @use "common/refactor/common-refactor.scss" as *;
 @use "common/refactor/common-dashboard";
 
+// SIDEBAR COMPONENT
 .dashboard-sidebar {
   grid-row: 1 / span 2;
   grid-column: 1 / span 2;
-
+  display: grid;
-  background-color: var(--panel-background-color);
+  grid-template-rows: 1fr auto;
-  border-right: $s-1 solid $db-quaternary;
+  height: 100%;
-  margin: 0 $s-16 0 0;
+  width: 100%;
   padding: $s-16 0 0 0;
-
+  margin: 0 $s-16 0 0;
+  border-right: $s-1 solid var(--panel-border-color);
+  background-color: var(--panel-background-color);
   z-index: $z-index-1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
 }
 
+//SIDEBAR CONTENT COMPONENT
 .sidebar-content {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: auto auto auto auto 1fr;
+  gap: $s-24;
   height: 100%;
-  overflow-y: auto;
   padding: 0;
-
+  overflow-y: auto;
-  hr {
-    border-color: transparent;
-    margin: $s-12 $s-16;
-  }
 }
 
+// SIDEBAR TEAM SWITCH
 .sidebar-team-switch {
   position: relative;
-  display: flex;
   margin: $s-4 $s-16;
-
-  .switch-content {
-    background-color: $db-tertiary;
-    border-radius: $br-8;
-    height: $s-48;
-    display: flex;
-    width: 100%;
-    border: $s-1 solid $db-tertiary;
-    align-items: center;
-
-    svg {
-      fill: #8f9da3;
-    }
-  }
-
-  .switch-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      fill: $df-secondary;
-      width: $s-12;
-      height: $s-12;
-    }
-  }
-
-  .current-team {
-    height: 100%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    font-size: $fs-14;
-    padding: 0 $s-12;
-    background-color: transparent;
-    border: none;
-  }
-
-  .team-name {
-    flex-grow: 1;
-    display: flex;
-    height: $s-40;
-    align-items: center;
-  }
-
-  .team-text {
-    color: $df-primary;
-    width: $s-144;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    text-align: left;
-  }
-
-  .team-icon {
-    display: flex;
-    align-items: center;
-    padding-right: $s-12;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: $s-24;
-      width: $s-24;
-    }
-
-    svg {
-      width: $s-24;
-      height: $s-24;
-    }
-  }
-
-  .switch-options {
-    @include buttonStyle;
-    @include flexCenter;
-    max-width: $s-24;
-    min-width: $s-28;
-    height: 100%;
-    border-left: $s-1 solid $db-primary;
-    background-color: transparent;
-
-    svg {
-      fill: $df-secondary;
-      width: $s-16;
-      height: $s-12;
-    }
-  }
-
-  .dropdown {
-    right: $s-2;
-    top: $s-52;
-    max-height: $s-480;
-    &:not(.teams-dropdown) {
-      min-width: $s-160;
-    }
-  }
 }
 
-.dropdown {
+.switch-content {
-  @include menuShadow;
+  display: grid;
-  position: absolute;
+  grid-template-columns: 1fr auto;
-  z-index: $z-index-4;
+  align-items: center;
-  background-color: $db-tertiary;
+  height: $s-48;
-  border: $s-1 solid $db-quaternary;
+  width: 100%;
   border-radius: $br-8;
+  border: $s-1 solid var(--menu-background-color);
+  background-color: var(--menu-background-color);
+}
 
-  .separator {
+.current-team {
-    border-color: transparent;
+  @include buttonStyle;
-    margin-top: $s-12;
+  display: grid;
-  }
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  gap: $s-8;
+  height: 100%;
+  padding: 0 $s-12;
+}
 
-  li {
+.team-name {
-    border-radius: $br-8;
+  display: grid;
-    height: $s-40;
+  align-items: center;
-    margin: $s-6;
+  grid-template-columns: auto 1fr;
+  gap: $s-12;
+  height: $s-40;
+}
 
-    display: flex;
+.team-text {
-    align-items: center;
+  @include textEllipsis;
-    cursor: pointer;
+  @include smallTitleTipography;
-    font-size: $fs-14;
+  width: $s-144;
-    padding: $s-6 $s-16;
+  text-align: left;
+  color: var(--menu-foreground-color-hover);
+}
 
-    .warning {
+// This icon still use the old svg
-      color: var(--element-foreground-warning);
+.penpot-icon {
-    }
+  @include flexCenter;
-
+  svg {
-    &:hover {
+    fill: var(--icon-foreground);
-      background-color: $db-quaternary;
+    width: $s-24;
-    }
+    height: $s-24;
-    svg {
-      height: $s-12;
-      width: $s-12;
-    }
-  }
-
-  hr {
-    border-color: transparent;
-    margin: 0;
-  }
-
-  &.options-dropdown {
-    li {
-      color: $df-primary;
-      &.warning {
-        color: var(--element-foreground-warning);
-      }
-    }
   }
 }
 
+.team-picture {
+  @include flexCenter;
+  border-radius: 50%;
+  height: $s-24;
+  width: $s-24;
+}
+
+.arrow-icon {
+  @extend .button-icon;
+  transform: rotate(90deg);
+  stroke: var(--icon-foreground);
+}
+
+.switch-options {
+  @include buttonStyle;
+  @include flexCenter;
+  max-width: $s-24;
+  min-width: $s-28;
+  height: 100%;
+  border-left: $s-1 solid var(--panel-background-color);
+  background-color: transparent;
+}
+
+.menu-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+// DROPDOWNS
+
 .teams-dropdown {
-  background-color: $db-tertiary;
+  @extend .menu-dropdown;
-  border-radius: $br-8;
-  border: $s-1 solid $db-quaternary;
-  min-width: $s-248;
-
   left: 0;
   top: $s-52;
-
+  height: fit-content;
   max-height: $s-480;
+  min-width: $s-248;
+  width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+}
 
-  li {
+.team-dropdown-item {
-    border-radius: $br-8;
+  @extend .menu-item-base;
-    height: $s-40;
+  display: grid;
-    padding: 0 $s-6;
+  grid-template-columns: $s-24 1fr auto;
-    margin: $s-6;
+  gap: $s-8;
+  height: $s-40;
+}
 
-    svg {
+.action {
-      fill: $df-secondary;
+  --sidebar-action-icon-color: var(--icon-foreground);
+  --sidebar-icon-backgroun-color: var(--color-background-secondary);
+  &:hover {
+    --sidebar-action-icon-color: var(--color-background-secondary);
+    --sidebar-icon-backgroun-color: var(--color-accent-primary);
+  }
+}
+
+.icon-wrapper {
+  @include flexCenter;
+  width: $s-24;
+  height: $s-24;
+  margin-right: $s-12;
+  border-radius: 50%;
+  background-color: var(--sidebar-icon-backgroun-color);
+}
+
+.add-icon {
+  @extend .button-icon;
+  width: $s-24;
+  height: $s-24;
+  stroke: var(--sidebar-action-icon-color);
+}
+
+.team-separator {
+  border-top: $s-1 solid var(--dropdown-separator-color);
+  margin: 0;
+}
+
+.tick-icon {
+  @extend .button-icon-small;
+  stroke: var(--icon-foreground);
+}
+
+.options-dropdown {
+  @extend .menu-dropdown;
+  right: $s-2;
+  top: $s-52;
+  max-height: $s-480;
+  &:not(.teams-dropdown) {
+    min-width: $s-160;
+  }
+}
+
+.team-options-item {
+  @extend .menu-item-base;
+  height: $s-40;
+}
+
+.team-option-separator {
+  height: $s-1;
+  margin: 0;
+  border-top: $s-1 solid var(--dropdown-separator-color);
+}
+
+// Sections
+.sidebar-nav {
+  margin: 0;
+  user-select: none;
+  overflow: none;
+}
+
+.pinned-projects {
+  overflow-y: auto;
+}
+
+.sidebar-nav-item {
+  cursor: pointer;
+  &:hover {
+    background-color: var(--sidebar-element-background-color-hover);
+    span {
+      color: var(--sidebar-element-foreground-color-hover);
     }
+  }
 
-    &:hover {
+  &.current {
-      background-color: $db-quaternary;
+    background-color: var(--sidebar-element-background-color-selected);
-      .team-icon {
+    .element-title {
-        &.new-team {
+      color: var(--sidebar-element-foreground-color-selected);
-          background-color: $da-primary;
-          color: $db-primary;
-          svg {
-            fill: $db-secondary;
-          }
-        }
-      }
-    }
-    .team-icon {
-      display: flex;
-      align-items: center;
-    }
-    .team-text {
-      color: $df-primary;
-      width: $s-168;
-    }
-
-    &.action {
-      .team-icon {
-        background-color: #2e3434;
-        background-color: var(--new-team-button-background-color);
-        border-radius: 50%;
-        height: $s-24;
-        margin-right: $s-12;
-        padding: $s-6;
-        width: $s-24;
-
-        svg {
-          height: $s-12;
-          width: $s-12;
-        }
-      }
     }
   }
 }
 
+.recent-projects svg {
+  stroke: var(--main-icon-foreground);
+}
+
+.sidebar-link {
+  display: block;
+  padding: $s-8 $s-8 $s-8 $s-24;
+  font-weight: $fw400;
+  width: 100%;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.project-element {
+  padding: $s-8 $s-8 $s-8 $s-24;
+}
+
+.element-title {
+  @include textEllipsis;
+  color: var(--sidebar-element-foreground-color);
+  font-size: $fs-14;
+}
+
+// Pinned projects
+
 .sidebar-empty-placeholder {
   padding: $s-12;
-  color: $df-secondary;
+  color: var(--empty-message-foreground-color);
   display: flex;
   align-items: center;
-
-  .icon {
-    padding: 0 $s-12;
-    svg {
-      fill: none;
-      stroke: currentColor;
-      width: $s-12;
-      height: $s-12;
-    }
-  }
-  .text {
-    font-size: $fs-12;
-  }
 }
 
+.pin-icon {
+  @extend .button-icon-small;
+  stroke: var(--icon-foreground);
+  margin: 0 $s-12;
+}
+
+.empty-text {
+  font-size: $fs-12;
+}
+
+// Search
+
 .sidebar-search {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
   align-items: center;
   border: $s-1 solid transparent;
-  display: flex;
+  margin: 0 $s-16;
-  margin: $s-6 $s-16;
-
-  background-color: $db-tertiary;
   border-radius: $br-8;
-  margin-bottom: $s-32;
+  background-color: var(--search-bar-input-background-color);
-  margin-top: 0;
+}
-  position: relative;
 
-  .input-text {
+.input-text {
-    background: transparent;
+  @include smallTitleTipography;
-    border: 0;
+  height: $s-40;
-    font-size: $fs-14;
+  width: 100%;
-    margin: 0;
+  padding: $s-6 $s-12;
-    width: 100%;
+  margin: 0;
-    height: $s-40;
+  border: transparent;
+  border-radius: $br-8;
+  background: transparent;
+  color: var(--search-bar-foreground-color);
 
-    border-radius: $br-8;
+  &:focus,
-    color: $df-primary;
+  &:focus-within,
-    max-width: 100%;
+  &:focus-visible {
-    padding: $s-6 $s-12;
+    outline: none;
-
+    border: $s-1 solid var(--search-bar-input-border-color-focus);
-    &:focus,
-    &:focus-within {
-      border: $s-1 solid $da-primary;
-    }
   }
   ::placeholder {
-    color: $df-secondary;
+    color: var(--search-bar-placeholder-foreground-color);
-  }
-
-  .search,
-  .clear-search {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    height: $s-24;
-    margin-left: auto;
-    padding: 0 $s-8;
-    width: $s-32;
-
-    position: absolute;
-    top: calc(50% - $s-12);
-    right: $s-2;
-
-    svg {
-      fill: $df-secondary;
-      height: $s-16;
-      width: $s-16;
-    }
-  }
-
-  .clear-search svg {
-    transform: rotate(45deg);
-
-    &:hover {
-      fill: $da-primary;
-    }
   }
 }
 
-.sidebar-nav {
+.search-btn {
-  display: flex;
+  @include buttonStyle;
-  flex-direction: column;
+  @include flexCenter;
-  overflow-y: auto;
+  position: absolute;
-  margin: 0;
+  right: 0;
-  user-select: none;
+  height: $s-24;
-
+  width: $s-32;
-  &.no-overflow {
+  padding: 0 $s-8;
-    overflow: unset;
-  }
-
-  & > li {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
-
-    &.project-element {
-      padding: $s-8 $s-8 $s-8 $s-24;
-    }
-
-    a {
-      padding: $s-8 $s-8 $s-8 $s-24;
-      font-weight: $fw400;
-      width: 100%;
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    svg {
-      fill: $db-secondary;
-      margin-right: $s-8;
-      height: $s-12;
-      width: $s-12;
-    }
-
-    .element-title {
-      color: $df-secondary;
-      font-size: $fs-14;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &.recent-projects {
-      svg {
-        fill: $df-primary;
-      }
-    }
-
-    input.element-title {
-      border: 0;
-      height: $s-32;
-      padding: $s-6;
-      margin: 0;
-      width: 100%;
-      background-color: $df-primary;
-    }
-
-    .close {
-      background-color: $df-primary;
-      cursor: pointer;
-      padding-left: $s-6;
-
-      svg {
-        fill: $df-secondary;
-        height: $s-16;
-        transform: rotate(45deg) translateY(7px);
-        width: $s-16;
-        margin: 0;
-      }
-    }
-
-    .element-subtitle {
-      color: $df-secondary;
-      font-style: italic;
-    }
-
-    &:hover {
-      background-color: $db-secondary;
-      span {
-        color: $da-primary;
-      }
-    }
-
-    &.current {
-      background-color: $db-quaternary;
-      .element-title {
-        color: $da-primary;
-      }
-    }
-  }
 }
 
+.search-icon,
+.clear-search-btn {
+  @extend .button-icon;
+  --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
+  stroke: var(--sidebar-search-foreground-color);
+}
+
+.clear-search-btn:hover {
+  --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color-hover);
+}
+
+// Profile
 .profile-section {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  padding: $s-12 $s-16;
   position: relative;
-
+  display: grid;
-  background-color: $db-tertiary;
+  grid-template-columns: 1fr auto;
-  border-top: $s-1 solid $db-quaternary;
+  padding: $s-12 $s-16;
-
+  border-top: $s-1 solid var(--panel-border-color);
-  .profile {
+  background-color: var(--profile-section-background-color);
-    align-items: center;
+  cursor: pointer;
-    cursor: pointer;
+}
-    display: flex;
+
-    flex-grow: 1;
+.profile {
-
+  display: grid;
-    span {
+  grid-template-columns: auto 1fr;
-      @include text-ellipsis;
+  gap: $s-8;
-      color: $df-primary;
+  cursor: pointer;
-      margin: $s-12;
+}
-      font-size: $fs-14;
+
-      max-width: $s-160;
+.profile-fullname {
-    }
+  @include smallTitleTipography;
-
+  @include text-ellipsis;
-    img {
+  align-self: center;
-      border-radius: 50%;
+  max-width: $s-160;
-      flex-shrink: 0;
+  color: var(--profile-foreground-color);
-      height: $s-40;
+}
-      width: $s-40;
+
-    }
+.profile-img {
-    svg {
+  height: $s-40;
-      height: $s-12;
+  width: $s-40;
-      margin-left: auto;
+  border-radius: $br-circle;
-      margin-right: $s-8;
+}
-      width: $s-12;
+
-    }
+.profile-dropdown {
-  }
+  @extend .menu-dropdown;
-
+  left: $s-16;
-  .dropdown {
+  bottom: $s-72;
-    left: $s-16;
+  min-width: $s-252;
-    bottom: $s-44;
+  // TODO ADD animation fadeInUp
-    background-color: var(--profile-drowpdown-background-color);
+}
-    border: $s-1 solid $db-tertiary;
+
-    border-radius: $br-8;
+.profile-dropdown-item {
-    min-width: $s-252;
+  @extend .menu-item-base;
-
+  @include smallTitleTipography;
-    @include animation(0, 0.2s, fadeInUp);
+  height: $s-40;
-
+  padding: $s-8 $s-16;
-    li {
+}
-      font-size: $fs-14;
+
-      padding: $s-8 $s-16;
+.profile-separator {
-
+  height: $s-6;
-      svg {
+}
-        fill: $df-secondary;
+
-        margin-right: $s-8;
+.item-with-icon {
-
+  display: grid;
-        height: $s-12;
+  grid-template-columns: auto 1fr;
-        width: $s-12;
+  gap: $s-8;
-      }
+}
-
+
-      .text {
+.exit-icon {
-        color: $df-primary;
+  @extend .button-icon;
-      }
+  stroke: var(--icon-foreground);
-
-      &.separator {
-        border-top: $s-1 solid transparent;
-      }
-    }
-  }
 }

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

@@ -89,7 +89,9 @@
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
-      [:& fm/form {:form form :on-submit on-submit}
+      [:& fm/form {:form form
+                   :on-submit on-submit
+                   :class (stl/css :team-form)}
 
        [:div {:class (stl/css :modal-header)}
         (if team

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

@@ -31,6 +31,10 @@
   margin-bottom: $s-24;
 }
 
+.team-form {
+  min-width: $s-400;
+}
+
 .group-name-input {
   @extend .input-element-label;
   label {
@@ -44,7 +48,6 @@
 
     input {
       @include bodySmallTypography;
-      margin-top: $s-8;
     }
   }
 }

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

@@ -348,6 +348,7 @@
 (def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
 (def ^:icon effects-refactor (icon-xref :effects-refactor))
 (def ^:icon elipse-refactor (icon-xref :elipse-refactor))
+(def ^:icon exit-refactor (icon-xref :exit-refactor))
 (def ^:icon expand-refactor (icon-xref :expand-refactor))
 (def ^:icon feedback-refactor (icon-xref :feedback-refactor))
 (def ^:icon fill-content-refactor (icon-xref :fill-content-refactor))
@@ -394,6 +395,7 @@
 (def ^:icon layers-refactor (icon-xref :layers-refactor))
 (def ^:icon locate-refactor (icon-xref :locate-refactor))
 (def ^:icon lock-refactor (icon-xref :lock-refactor))
+(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) ;; This icon will not change
 (def ^:icon library-refactor (icon-xref :library-refactor))
 (def ^:icon margin-bottom-refactor (icon-xref :margin-bottom-refactor))
 (def ^:icon margin-left-refactor (icon-xref :margin-left-refactor))

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

@@ -33,6 +33,7 @@
                          :links (:links message)
                          :content (:content message)}
 
+        is-context-msg (and (nil? (:timeout message)) (nil? (:actions message)))
         is-toast-msg   (or (= :toast (:notification-type message)) (some? (:timeout message)))
         is-inline-msg  (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
 
@@ -42,5 +43,7 @@
         [:& toast-notification toast-message]
         is-inline-msg
         [:& inline-notification inline-message]
+        is-context-msg
+        [:& context-notification context-message]
         :else
-        [:& context-notification context-message]))))
+        [:& toast-notification toast-message]))))

frontend/src/app/main/ui/notifications/toast_notification.scss

@@ -44,10 +44,10 @@
 }
 
 .info {
-  --bg-color: var(--alert-background-color-info);
+  --toast-notification-bg-color: var(--alert-background-color-info);
-  --fg-color: var(--alert-text-foreground-color-info);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-info);
-  --icon-color: var(--alert-icon-foreground-color-info);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-info);
-  --border-color: var(--alert-border-color-info);
+  --toast-notification-border-color: var(--alert-border-color-info);
 }
 
 .default {

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -21,7 +21,6 @@
   (let [valign (:vertical-align node "top")
         base   #js {:height (fmt/format-pixels height)
                     :width  (fmt/format-pixels width)
-                    :fontFamily "sourcesanspro"
                     :display "flex"
                     :whiteSpace "break-spaces"}]
     (cond-> base

frontend/src/app/main/ui/viewer/share_link.cljs

@@ -135,6 +135,7 @@
         (fn [_]
           (wapi/write-to-clipboard current-link)
           (st/emit! (msg/show {:type :info
+                               :notification-type :toast
                                :content (tr "common.share-link.link-copied-success")
                                :timeout 1000})))
 

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

@@ -107,9 +107,9 @@
     (-> (image-size href)
         (p/then
          (fn [{:keys [width height]}]
-           (when (or (not (mth/close? width fixed-width 2))
+           (when (or (not (mth/close? width fixed-width 5))
-                     (not (mth/close? height fixed-height 2)))
+                     (not (mth/close? height fixed-height 5)))
-             (st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))))))
+             (st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "check-thumbnail-size"))))))))
 
 (defn root-frame-wrapper-factory
   [shape-wrapper]
@@ -175,7 +175,7 @@
         (mf/with-effect []
           (when-not (some? thumbnail-uri)
             (tm/schedule-on-idle
-             #(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))
+             #(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "root-frame"))))
           #(when-let [task (mf/ref-val task-ref)]
              (d/close! task)))
 

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

@@ -224,10 +224,10 @@
               :on-double-click rename-color-clicked}
 
         (if (= (:name color) default-name)
-          [:span  {:class (stl/css :default-name-only)} default-name]
+          [:span  {:class (stl/css :default-name)} default-name]
           [:*
-           [:span  {:class (stl/css :name)} (:name color)]
+           (:name color)
-           [:span  {:class (stl/css :default-name)} default-name]])])
+           [:span  {:class (stl/css :default-name :default-name-with-color)} default-name]])])
 
      (when local?
        [:& cmm/assets-context-menu

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

@@ -6,10 +6,15 @@
 
 @import "refactor/common-refactor.scss";
 
+// TODO: we should be using subgrid in the common "assets component" to avoid
+// using this SCSS variable here (we cannot use a CSS var in this CSS module because
+// the elements are not part of the same cascade).
+$assets-button-width: $s-28;
+
 .assets-btn {
   @extend .button-tertiary;
   height: $s-32;
-  width: $s-28;
+  width: $assets-button-width;
   padding: 0;
   border-radius: $br-8;
   svg {
@@ -28,10 +33,12 @@
 
 .asset-list-item {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr #{$assets-button-width};
   align-items: center;
   height: $s-32;
   padding: $s-8;
+  padding-inline-end: 0;
   margin-bottom: $s-4;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
@@ -48,7 +55,6 @@
       @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
-      height: $s-28;
       max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
       margin: 0;
       color: var(--layer-row-foreground-color);
@@ -63,25 +69,23 @@
   @include flexCenter;
   height: 100%;
   justify-content: flex-start;
-  margin-right: $s-4;
+  margin-inline-end: $s-4;
 }
 
 .name-block {
   @include bodySmallTypography;
-  display: grid;
+  @include textEllipsis;
-  grid-template-columns: auto 1fr;
   margin: 0;
-  overflow: hidden;
+  color: var(--assets-item-name-foreground-color);
-  .default-name-only,
+}
-  .name {
+
-    color: var(--assets-item-name-foreground-color);
+.default-name {
-    margin-right: $s-6;
+  margin-inline-start: $s-4;
-    @include textEllipsis;
+  color: var(--assets-item-name-foreground-color-rest);
-  }
+}
-  .default-name {
+
-    min-width: 0;
+.default-name-with-color {
-    color: var(--assets-item-name-foreground-color-rest);
+  margin-left: $s-6;
-  }
 }
 
 .element-name {

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

@@ -380,7 +380,8 @@
                                {:value "" :label (tr "workspace.options.interaction-none")})]
         destination-options
         (mf/with-memo [frames-opts default-opts]
-          (d/concat-vec default-opts frames-opts))
+          (let [sorted-frames-opts (sort-by :label frames-opts)]
+            (d/concat-vec default-opts sorted-frames-opts)))
 
         shape-parents-opts (get-shared-frames-options shape-parents)
 

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

@@ -918,8 +918,11 @@
         on-gap-change
         (fn [multiple? type val]
           (let [val (mth/finite val 0)]
-            (if ^boolean multiple?
+            (cond
+              ^boolean multiple?
               (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
+
+              (some? type)
               (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
 
         ;; Padding
@@ -941,7 +944,7 @@
                (and (= type :simple) (= prop :p2))
                (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
 
-               :else
+               (some? prop)
                (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))))
 
         ;; Grid-direction
@@ -1126,16 +1129,16 @@
                                  :on-change on-column-justify-change}]
            [:& justify-grid-row {:is-column false
                                  :value grid-justify-content-row
-                                 :on-change on-row-justify-change}]]]
+                                 :on-change on-row-justify-change}]]
-         [:div {:class (stl/css :row)}
-          [:& gap-section {:on-change on-gap-change
-                           :value (:layout-gap values)}]]
 
-         [:div {:class (stl/css :row :padding-section)}
+          [:div {:class (stl/css :row)}
-          [:& padding-section {:value (:layout-padding values)
+           [:& gap-section {:on-change on-gap-change
-                               :type (:layout-padding-type values)
+                            :value (:layout-gap values)}]]
-                               :on-change-style on-padding-type-change
+          [:div {:class (stl/css :row :padding-section)}
-                               :on-change on-padding-change}]]
+           [:& padding-section {:value (:layout-padding values)
+                                :type (:layout-padding-type values)
+                                :on-change-style on-padding-type-change
+                                :on-change on-padding-change}]]]
 
          nil))]))
 
@@ -1156,9 +1159,10 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [multiple? type val]
-           (if multiple?
+           (let [val (mth/finite val 0)]
-             (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
+             (if multiple?
-             (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
+               (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
+               (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))))
 
         ;; Padding
         on-padding-type-change
@@ -1169,15 +1173,16 @@
 
         on-padding-change
         (fn [type prop val]
-          (cond
+          (let [val (mth/finite val 0)]
-            (and (= type :simple) (= prop :p1))
+            (cond
-            (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
+              (and (= type :simple) (= prop :p1))
+              (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
 
-            (and (= type :simple) (= prop :p2))
+              (and (= type :simple) (= prop :p2))
-            (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
+              (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
 
-            :else
+              :else
-            (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
+              (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))
 
         ;; Align grid
         align-items-row    (:layout-align-items values)
@@ -1308,7 +1313,8 @@
                             :on-change on-row-justify-change}]
 
       [:button {:on-click handle-locate-grid
-                :class (stl/css :locate-button)}
+                :class (stl/css :locate-button)
+                :title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
        i/locate-refactor]]
 
      [:div {:class (stl/css :row)}

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

@@ -736,20 +736,23 @@
                  [track-type value]
                  (cond
                    (str/ends-with? value "%")
-                   [:percent value-int]
+                   [:percent (d/nilv value-int 50)]
 
                    (str/ends-with? value "FR")
-                   [:flex value-int]
+                   [:flex (d/nilv value-int 1)]
 
                    (some? value-int)
-                   [:fixed value-int]
+                   [:fixed (d/nilv value-int 100)]
 
-                   (or (= value "AUTO") (= "" value))
+                   :else
-                   [:auto nil])]
+                   [:auto nil])
 
+                 track-data (when (some? track-type) {:type track-type :value value})]
+
+             (dom/set-value! (mf/ref-val track-input-ref) (format-size track-data))
              (if (some? track-type)
-               (do (st/emit! (dwsl/change-layout-track [(:id shape)] type index {:type track-type :value value}))
+               (do (st/emit! (dwsl/change-layout-track [(:id shape)] type index track-data))
-                   (dom/set-data! target "default-value" (format-size {:type track-type :value value})))
+                   (dom/set-data! target "default-value" (format-size track-data)))
                (obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
 
         handle-keydown-track-input

frontend/translations/en.po

@@ -3508,6 +3508,9 @@ msgstr "Editing grid"
 msgid "workspace.layout_grid.editor.top-bar.locate"
 msgstr "Locate"
 
+msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
+msgstr "Locate grid layout"
+
 msgid "workspace.layout_grid.editor.top-bar.done"
 msgstr "Done"
 

frontend/translations/es.po

@@ -3570,6 +3570,9 @@ msgstr "Editando rejilla"
 msgid "workspace.layout_grid.editor.top-bar.locate"
 msgstr "Mostrar"
 
+msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
+msgstr "Mostrar grid layout"
+
 msgid "workspace.layout_grid.editor.top-bar.done"
 msgstr "Hecho"