From 396d799c715287ca9ebe2f3f75d46de8eb505b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Tue, 21 Jul 2026 15:51:13 +0200 Subject: [PATCH] :bug: Redesign my penpot review --- .../resources/images/icons/logo-files.svg | 1 - .../src/app/main/ui/dashboard/sidebar.cljs | 24 +++++++++++++----- .../src/app/main/ui/dashboard/sidebar.scss | 25 ++++++++++++++++--- frontend/src/app/main/ui/icons.cljs | 1 - frontend/translations/en.po | 5 +++- frontend/translations/es.po | 5 +++- frontend/translations/it.po | 2 +- 7 files changed, 48 insertions(+), 15 deletions(-) delete mode 100644 frontend/resources/images/icons/logo-files.svg diff --git a/frontend/resources/images/icons/logo-files.svg b/frontend/resources/images/icons/logo-files.svg deleted file mode 100644 index 55b707b557..0000000000 --- a/frontend/resources/images/icons/logo-files.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index f828134445..5acdc06b84 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -349,7 +349,7 @@ [:> dropdown-menu-item* {:on-click on-org-click :data-value default-team-id - :class (stl/css :org-dropdown-item)} + :class (stl/css :org-dropdown-item :org-dropdown-item-default-logo)} [:span {:class (stl/css :my-teams-icon)} [:> raw-svg* {:id penpot-logo-icon-subtle}]] [:span {:class (stl/css :team-text) @@ -413,13 +413,22 @@ [:> dropdown-menu* props [:> dropdown-menu-item* {:on-click on-team-click :data-value default-team-id - :class (stl/css :team-dropdown-item)} - [:span {:class (stl/css :penpot-icon)} (if (contains? cf/flags :nitrate) deprecated-icon/logo-files deprecated-icon/logo-icon)] + :class (stl/css-case :team-dropdown-item true + :team-dropdown-item-no-logo (contains? cf/flags :nitrate))} + (when-not (contains? cf/flags :nitrate) + [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]) [:span {:class (stl/css :team-text)} (if (contains? cf/flags :nitrate) (tr "dashboard.my-files") (tr "dashboard.your-penpot"))] (when (= default-team-id (:id team)) tick-icon)] + (when (and (contains? cf/flags :nitrate) + (seq (remove :is-default (vals teams)))) + [:* + [:hr {:role "separator" :class (stl/css :team-separator)}] + [:li {:role "presentation" :class (stl/css :org-section-label)} + (tr "dashboard.section.teams")]]) + (for [team-item (remove :is-default (vals teams))] [:> dropdown-menu-item* {:on-click on-team-click :data-value (:id team-item) @@ -780,7 +789,8 @@ :on-key-down on-show-orgs-keydown :aria-expanded show-orgs-menu? :aria-haspopup "menu"} - [:div {:class (stl/css :team-name)} + [:div {:class (stl/css-case :team-name true + :team-name-default-logo default-org?)} (if default-org? [:* [:span {:class (stl/css :my-teams-icon-xxxl)} @@ -919,8 +929,10 @@ :aria-haspopup "menu"} (cond is-default? - [:div {:class (stl/css :team-name)} - [:span {:class (stl/css :penpot-icon)} (if nitrate? deprecated-icon/logo-files deprecated-icon/logo-icon)] + [:div {:class (stl/css-case :team-name true + :team-name-no-logo nitrate?)} + (when-not nitrate? + [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]) [:span {:class (stl/css :team-text)} (if nitrate? (tr "dashboard.my-files") (tr "dashboard.default-team-name"))]] (and (contains? cf/flags :subscriptions) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 7f0a8b983a..0d9223bc77 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -94,17 +94,25 @@ grid-template-columns: 1fr auto; gap: var(--sp-s); height: 100%; - padding: 0 var(--sp-m); + padding: 0 var(--sp-m) 0 var(--sp-l); } .team-name { display: grid; align-items: center; grid-template-columns: auto 1fr; - gap: var(--sp-m); + gap: var(--sp-s); height: $sz-40; } +.team-name-no-logo { + grid-template-columns: 1fr; +} + +.team-name-default-logo { + gap: var(--sp-xs); +} + .team-text { @include deprecated.text-ellipsis; @include t.use-typography("title-small"); @@ -185,6 +193,11 @@ grid-template-columns: var(--sp-xxl) 1fr auto; gap: var(--sp-s); height: $sz-40; + padding-inline-start: var(--sp-m); +} + +.team-dropdown-item-no-logo { + grid-template-columns: 1fr auto; } .org-dropdown-item { @@ -194,6 +207,11 @@ grid-template-columns: auto 1fr auto; gap: var(--sp-s); height: $sz-40; + padding-inline-start: var(--sp-m); +} + +.org-dropdown-item-default-logo { + gap: var(--sp-xs); } .action { @@ -211,7 +229,6 @@ width: var(--sp-xxl); height: var(--sp-xxl); - margin-right: var(--sp-m); border-radius: 50%; background-color: var(--sidebar-icon-backgroun-color); } @@ -234,7 +251,7 @@ color: var(--color-foreground-secondary); list-style: none; - padding: var(--sp-m) $sz-6 $sz-6; + padding: var(--sp-m) $sz-6 $sz-6 var(--sp-m); text-transform: uppercase; } diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 5a68b70933..ee405fa7f8 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -17,7 +17,6 @@ (def ^:icon logo (icon-xref :penpot-logo)) (def ^:icon logo-icon (icon-xref :penpot-logo-icon)) (def ^:icon logo-error-screen (icon-xref :logo-error-screen)) -(def ^:icon logo-files (icon-xref :logo-files)) (def ^:icon logo-subscription (icon-xref :logo-subscription)) (def ^:icon logo-subscription-light (icon-xref :logo-subscription-light)) (def ^:icon nitrate-welcome (icon-xref :nitrate-welcome)) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 051d183632..fd5440a167 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -869,7 +869,7 @@ msgstr "Move to other team" #: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761 msgid "dashboard.my-teams" -msgstr "My teams" +msgstr "My Teams" #: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254 msgid "dashboard.new-file" @@ -1086,6 +1086,9 @@ msgstr "Searching for “%s“…" msgid "dashboard.section.organizations" msgstr "Organizations" +msgid "dashboard.section.teams" +msgstr "Teams" + #, unused msgid "dashboard.select-org-modal.accept" msgstr "ADD TO ORGANIZATION" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 581aeb3551..c075237bdd 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -877,7 +877,7 @@ msgstr "Mover a otro equipo" #: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761 msgid "dashboard.my-teams" -msgstr "Mis equipos" +msgstr "Mis Equipos" #: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254 msgid "dashboard.new-file" @@ -1096,6 +1096,9 @@ msgstr "Buscando “%s“…" msgid "dashboard.section.organizations" msgstr "Organizaciones" +msgid "dashboard.section.teams" +msgstr "Equipos" + #, unused msgid "dashboard.select-org-modal.accept" msgstr "AÑADIR A UNA ORGANIZACIÓN" diff --git a/frontend/translations/it.po b/frontend/translations/it.po index 227eb4e24f..f4f0a13bb2 100644 --- a/frontend/translations/it.po +++ b/frontend/translations/it.po @@ -875,7 +875,7 @@ msgstr "Sposta in un altro team" #: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761 msgid "dashboard.my-teams" -msgstr "I miei team" +msgstr "I miei Team" #: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254 msgid "dashboard.new-file"