♻️ Update sidebar old icons

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/src/app/main/ui/dashboard/sidebar.cljs

@@ -24,7 +24,7 @@
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.project-menu :refer [project-menu]]
    [app.main.ui.dashboard.team-form]
-   [app.main.ui.icons :as i]
+   [app.main.ui.icons :as i :refer [icon-xref]]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
    [app.util.i18n :as i18n :refer [tr]]
@@ -39,6 +39,33 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
+(def ^:private clear-search-icon
+  (icon-xref :delete-text-refactor (stl/css :clear-search-icon)))
+
+(def ^:private search-icon
+  (icon-xref :search-refactor (stl/css :search-icon)))
+
+(def ^:private tick-icon
+  (icon-xref :tick-refactor (stl/css :tick-icon)))
+
+(def ^:private logo-icon
+  (icon-xref :logo-refactor (stl/css :logo-icon)))
+
+(def ^:private add-icon
+  (icon-xref :add-refactor (stl/css :add-icon)))
+
+(def ^:private arrow-icon
+  (icon-xref :arrow-refactor (stl/css :arrow-icon)))
+
+(def ^:private menu-icon
+  (icon-xref :menu-refactor (stl/css :menu-icon)))
+
+(def ^:private pin-icon
+  (icon-xref :pin-refactor (stl/css :pin-icon)))
+
+(def ^:private exit-icon
+  (icon-xref :exit-refactor (stl/css :exit-icon)))
+
 (mf/defc sidebar-project
   [{:keys [item selected?] :as props}]
   (let [dstate           (mf/deref refs/dashboard-local)
@@ -231,11 +258,11 @@
                  :tab-index "0"
                  :on-click on-clear-click
                  :on-key-down handle-clear-search}
-        i/close]
+        clear-search-icon]
 
        [:button {:class (stl/css :search-btn)
                  :on-click on-clear-click}
-        i/search])]))
+        search-icon])]))
 
 (mf/defc teams-selector-dropdown-items
   {::mf/wrap-props false}
@@ -278,10 +305,11 @@
                               :on-key-down handle-select-default
                               :id          "teams-selector-default-team"
                               :class       (stl/css :team-dropdown-item)}
-      [:span {:class (stl/css :team-icon)} i/logo-icon]
+      [:span {:class (stl/css :penpot-icon)} i/logo-icon]
+
       [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
       (when (= (:default-team-id profile) (:id team))
-        [:span {:class (stl/css :check-icon)} i/tick])]
+        tick-icon)]
 
      (for [team-item (remove :is-default (vals teams))]
        [:> dropdown-menu-item* {:on-click    team-selected
@@ -296,7 +324,7 @@
         [:span {:class (stl/css :team-text)
                 :title (:name team-item)} (:name team-item)]
         (when (= (:id team-item) (:id team))
-          [:span {:class (stl/css :check-icon)} i/tick])])
+          tick-icon)])
 
      [:hr {:role "separator"
            :class (stl/css :team-separator)}]
@@ -304,7 +332,7 @@
                               :on-key-down handle-creation-key-down
                               :id          "teams-selector-create-team"
                               :class       (stl/css :team-dropdown-item :action)}
-      [:span {:class (stl/css :team-icon :new-team)} i/close]
+      [:span {:class (stl/css :icon-wrapper)} add-icon]
       [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
 
 (s/def ::member-id ::us/uuid)
@@ -612,7 +640,7 @@
 
        (if (:is-default team)
          [:div {:class (stl/css :team-name)}
-          [:span {:class (stl/css :team-icon)} i/logo-icon]
+          [:span {:class (stl/css :penpot-icon)} i/logo-icon]
           [:span {:class (stl/css :team-text)} (tr "dashboard.default-team-name")]]
 
          [:div {:class (stl/css :team-name)}
@@ -621,14 +649,14 @@
                  :alt (:name team)}]
           [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]])
 
-       [:span {:class (stl/css :switch-icon)} i/arrow-down]]
+       arrow-icon]
 
       (when-not (:is-default team)
         [:button {:class (stl/css :switch-options)
                   :on-click handle-show-opts-click
                   :tab-index "0"
                   :on-key-down handle-show-opts-keydown}
-         i/actions])]
+         menu-icon])]
 
      ;; Teams Dropdown
 
@@ -791,7 +819,7 @@
              :team-id (:id team)
              :selected? (= (:id item) (:id project))}])]
         [:div {:class (stl/css :sidebar-empty-placeholder)}
-         [:span {:class (stl/css :empty-placeholder-icon)} i/pin-refactor]
+         pin-icon
          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]))
 
 (mf/defc profile-section
@@ -1004,7 +1032,7 @@
              :on-click handle-logout-click
              :on-key-down handle-logout-keydown
              :data-test "logout-profile-opt"}
-        [:span {:class (stl/css :exit-icon)} i/exit]
+        exit-icon
         (tr "labels.logout")]]
 
       (when (and team profile)

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

@@ -75,7 +75,8 @@
   color: var(--menu-foreground-color-hover);
 }
 
-.team-icon {
+// This icon still use the old svg
+.penpot-icon {
   @include flexCenter;
   svg {
     fill: var(--icon-foreground);
@@ -91,13 +92,10 @@
   width: $s-24;
 }
 
-.switch-icon {
+.arrow-icon {
-  @include flexCenter;
+  @extend .button-icon;
-  svg {
+  transform: rotate(90deg);
-    fill: var(--icon-foreground);
+  stroke: var(--icon-foreground);
-    width: $s-12;
-    height: $s-12;
-  }
 }
 
 .switch-options {
@@ -108,12 +106,11 @@
   height: 100%;
   border-left: $s-1 solid var(--panel-background-color);
   background-color: transparent;
-
-  svg {
-    fill: var(--icon-foreground);
-    width: $s-16;
-    height: $s-12;
 }
+
+.menu-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
 }
 
 // DROPDOWNS
@@ -138,18 +135,29 @@
   height: $s-40;
 }
 
-.team-dropdown-item.action .team-icon {
+.action {
-  height: $s-24;
+  --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;
-  padding: $s-6;
+  height: $s-24;
   margin-right: $s-12;
   border-radius: 50%;
-  background-color: var(--new-team-button-background-color);
+  background-color: var(--sidebar-icon-backgroun-color);
-
-  svg {
-    height: $s-12;
-    width: $s-12;
 }
+
+.add-icon {
+  @extend .button-icon;
+  width: $s-24;
+  height: $s-24;
+  stroke: var(--sidebar-action-icon-color);
 }
 
 .team-separator {
@@ -157,13 +165,9 @@
   margin: 0;
 }
 
-.check-icon {
+.tick-icon {
-  @extend .button-icon;
+  @extend .button-icon-small;
-  fill: var(--icon-foreground);
+  stroke: var(--icon-foreground);
-  svg {
-    height: 12px;
-    width: 12px;
-  }
 }
 
 .options-dropdown {
@@ -200,14 +204,6 @@
 
 .sidebar-nav-item {
   cursor: pointer;
-
-  svg {
-    fill: var(--icon-foreground);
-    margin-right: $s-8;
-    height: $s-12;
-    width: $s-12;
-  }
-
   &:hover {
     background-color: var(--sidebar-element-background-color-hover);
     span {
@@ -224,7 +220,7 @@
 }
 
 .recent-projects svg {
-  fill: var(--main-icon-foreground);
+  stroke: var(--main-icon-foreground);
 }
 
 .sidebar-link {
@@ -256,14 +252,10 @@
   align-items: center;
 }
 
-.empty-placeholder-icon {
+.pin-icon {
-  padding: 0 $s-12;
+  @extend .button-icon-small;
-  svg {
+  stroke: var(--icon-foreground);
-    fill: none;
+  margin: 0 $s-12;
-    stroke: currentColor;
-    width: $s-12;
-    height: $s-12;
-  }
 }
 
 .empty-text {
@@ -313,20 +305,17 @@
   height: $s-24;
   width: $s-32;
   padding: 0 $s-8;
-
-  svg {
-    fill: var(--search-bar-icon-foreground-color);
-    height: $s-16;
-    width: $s-16;
-  }
 }
 
-.clear-search-btn svg {
+.search-icon,
-  transform: rotate(45deg);
+.clear-search-btn {
-
+  @extend .button-icon;
-  &:hover {
+  --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
-    fill: var(--search-bar-icon-foreground-color-hover);
+  stroke: var(--sidebar-search-foreground-color);
 }
+
+.clear-search-btn:hover {
+  --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color-hover);
 }
 
 // Profile
@@ -345,12 +334,6 @@
   grid-template-columns: auto 1fr;
   gap: $s-8;
   cursor: pointer;
-  svg {
-    height: $s-12;
-    width: $s-12;
-    margin-left: auto;
-    margin-right: $s-8;
-  }
 }
 
 .profile-fullname {
@@ -389,11 +372,10 @@
 .item-with-icon {
   display: grid;
   grid-template-columns: auto 1fr;
+  gap: $s-8;
+}
 
-  svg {
+.exit-icon {
-    fill: var(--menu-icon-foreground-color);
+  @extend .button-icon;
-    margin-right: $s-8;
+  stroke: var(--icon-foreground);
-    height: $s-12;
-    width: $s-12;
-  }
 }

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))