💄 Improve dashboard's sidebar (#6736)

CHANGES.md

@@ -11,6 +11,7 @@
 ### :sparkles: New features & Enhancements
 
 - On components overrides, separate the content of the text from the rest of properties [Taiga #7434](https://tree.taiga.io/project/penpot/us/7434)
+- Improve dashboard's sidebar [Taiga #10700](https://tree.taiga.io/project/penpot/us/10700)
 
 ### :bug: Bugs fixed
 
@@ -2535,4 +2536,4 @@ time being.
 
 ## 1.0.0-alpha
 
-Initial release
+Initial release

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

@@ -847,6 +847,8 @@
 
 
       [:div {:class (stl/css :sidebar-content-section)}
+       [:div {:class (stl/css :sidebar-section-title)}
+        (tr "labels.sources")]
        [:ul {:class (stl/css :sidebar-nav)}
         [:li {:class (stl/css-case :sidebar-nav-item true
                                    :current fonts?)}
@@ -859,6 +861,8 @@
 
       [:div {:class (stl/css :sidebar-content-section)
              :data-testid "pinned-projects"}
+       [:div {:class (stl/css :sidebar-section-title)}
+        (tr "labels.pinned-projects")]
        (if (seq pinned-projects)
          [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
           (for [item pinned-projects]

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

@@ -4,6 +4,9 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "../ds/typography.scss" as *;
+@use "../ds/colors.scss" as *;
+@use "../ds/spacing.scss" as *;
 @use "common/refactor/common-refactor.scss" as *;
 @use "common/refactor/common-dashboard";
 @use "../ds/typography.scss" as t;
@@ -46,6 +49,12 @@
   border-bottom: $b-1 solid var(--color-background-quaternary);
 }
 
+.sidebar-section-title {
+  @include use-typography("headline-small");
+  padding: 0 var(--sp-s) var(--sp-s) var(--sp-xxl);
+  color: var(--color-foreground-secondary);
+}
+
 // SIDEBAR TEAM SWITCH
 .sidebar-team-switch {
   position: relative;
@@ -268,7 +277,7 @@
 .element-title {
   @include textEllipsis;
   width: $s-256;
-  color: var(--sidebar-element-foreground-color);
+  color: var(--color-foreground-primary);
   font-size: $fs-14;
 }
 

frontend/translations/en.po

@@ -7861,3 +7861,9 @@ msgstr "Autosaved versions will be kept for %s days."
 #, unused
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Click to close the path"
+
+msgid "labels.sources"
+msgstr "Sources"
+
+msgid "labels.pinned-projects"
+msgstr "Pinned Projects"

frontend/translations/es.po

@@ -7824,3 +7824,9 @@ msgstr "Los autoguardados duran %s días."
 #, unused
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Pulsar para cerrar la ruta"
+
+msgid "labels.sources"
+msgstr "Recursos"
+
+msgid "labels.pinned-projects"
+msgstr "Proyectos fijados"