From 1c38883dddfcdeb6242a288e20d68554e3af5cb5 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 5 Mar 2024 14:15:05 +0100 Subject: [PATCH] :recycle: Update sidebar old icons --- .../resources/images/icons/exit-refactor.svg | 3 + .../src/app/main/ui/dashboard/sidebar.cljs | 52 ++++++-- .../src/app/main/ui/dashboard/sidebar.scss | 120 ++++++++---------- frontend/src/app/main/ui/icons.cljs | 2 + 4 files changed, 96 insertions(+), 81 deletions(-) create mode 100644 frontend/resources/images/icons/exit-refactor.svg diff --git a/frontend/resources/images/icons/exit-refactor.svg b/frontend/resources/images/icons/exit-refactor.svg new file mode 100644 index 000000000..9b80aa590 --- /dev/null +++ b/frontend/resources/images/icons/exit-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 7bad200fe..1a93e3a64 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 4bc58fb77..c6cea273a 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/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 { - @include flexCenter; - svg { - fill: var(--icon-foreground); - width: $s-12; - height: $s-12; - } +.arrow-icon { + @extend .button-icon; + transform: rotate(90deg); + stroke: var(--icon-foreground); } .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 { - height: $s-24; +.action { + --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 { - @extend .button-icon; - fill: var(--icon-foreground); - svg { - height: 12px; - width: 12px; - } +.tick-icon { + @extend .button-icon-small; + stroke: var(--icon-foreground); } .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 { - padding: 0 $s-12; - svg { - fill: none; - stroke: currentColor; - width: $s-12; - height: $s-12; - } +.pin-icon { + @extend .button-icon-small; + stroke: var(--icon-foreground); + margin: 0 $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 { - transform: rotate(45deg); +.search-icon, +.clear-search-btn { + @extend .button-icon; + --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color); + stroke: var(--sidebar-search-foreground-color); +} - &:hover { - fill: var(--search-bar-icon-foreground-color-hover); - } +.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; - - svg { - fill: var(--menu-icon-foreground-color); - margin-right: $s-8; - height: $s-12; - width: $s-12; - } + gap: $s-8; +} + +.exit-icon { + @extend .button-icon; + stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index be6dd7ab9..198a03515 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/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))