✨ Separate penpot from rest of organizations (#9753)

frontend/resources/images/assets/penpot-logo-subtle.svg

@@ -0,0 +1 @@
+<svg width="24" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-3ce8db62-a893-8010-8008-020dbf353255" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-3ce8db62-a893-8010-8008-020dbf353255"><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g fill="none"><g class="fills" id="fills-3ce8db62-a893-8010-8008-020dbf353255"><rect rx="0" ry="0" x="0" y="0" width="24" height="24" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-3ce8db62-a893-8010-8008-020da575dff9"><g class="fills" id="fills-3ce8db62-a893-8010-8008-020da575dff9"><path d="M8.376953125,2L6.275421142578125,4.960968017578125L6.275421142578125,6.636688232421875L4.4433746337890625,7.5078125L4.427734375,7.500030517578125L4.427734375,18.42181396484375L11.564437866210938,21.792938232421875L11.998077392578125,22L12.435546875,21.792938232421875L19.572250366210938,18.42181396484375L19.572250366210938,7.500030517578125L19.560562133789062,7.5078125L17.728515625,6.636688232421875L17.728515625,4.960968017578125L17.666030883789062,4.87109375L15.623046875,2L13.521514892578125,4.960968017578125L13.521514892578125,4.96478271484375L11.990234375,2.808563232421875L10.470687866210938,4.94921875L10.416046142578125,4.87109375ZM8.748046875,3.71875L9.560562133789062,4.863311767578125L7.1894378662109375,4.863311767578125L7.994171142578125,3.730499267578125ZM15.994140625,3.71875L16.806655883789062,4.863311767578125L14.435531616210938,4.863311767578125L15.240264892578125,3.730499267578125ZM12.361328125,4.531280517578125L13.173843383789062,5.67584228515625L10.802719116210938,5.67584228515625L11.607452392578125,4.54302978515625ZM6.966796875,5.445281982421875L8.091827392578125,5.445281982421875L8.091827392578125,9.23052978515625L6.966796875,8.69921875ZM8.669921875,5.445281982421875L9.787094116210938,5.445281982421875L9.787094116210938,10.03131103515625L8.669921875,9.50396728515625ZM14.212890625,5.445281982421875L15.337921142578125,5.445281982421875L15.337921142578125,9.5L14.212890625,10.03131103515625ZM15.912109375,5.445281982421875L17.029296875,5.445281982421875L17.029296875,8.69921875L15.912109375,9.2265625ZM10.576187133789062,6.25384521484375L11.701156616210938,6.25384521484375L11.701156616210938,10.937530517578125L10.576187133789062,10.406219482421875ZM12.279296875,6.25384521484375L13.396484375,6.25384521484375L13.396484375,10.41400146484375L12.279296875,10.94134521484375ZM17.724624633789062,7.496063232421875L18.712875366210938,7.90240478515625L17.724624633789062,8.37115478515625ZM6.2714691162109375,7.500030517578125L6.2714691162109375,8.37115478515625L5.2832183837890625,7.90240478515625ZM5.298858642578125,8.875L11.560546875,11.832000732421875L11.560546875,20.828125L5.298858642578125,17.871124267578125ZM18.697296142578125,8.875L18.697296142578125,17.871124267578125L12.435546875,20.828125L12.435546875,11.835968017578125Z" style="fill: rgb(143, 157, 163); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>

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

@@ -92,6 +92,7 @@
   (deprecated-icon/icon-xref :arrow-up-right (stl/css :arrow-up-right-icon)))
 
 (def ^:private ^:svg-id penpot-logo-icon "penpot-logo-icon")
+(def ^:private ^:svg-id penpot-logo-icon-subtle "penpot-logo-subtle")
 
 (mf/defc sidebar-project*
   {::mf/private true}
@@ -340,11 +341,14 @@
      [:> dropdown-menu-item* {:on-click    on-org-click
                               :data-value  default-team-id
                               :class       (stl/css :org-dropdown-item)}
-      [:span {:class (stl/css :org-icon)}
-       [:> raw-svg* {:id penpot-logo-icon}]]
-      "Penpot"
+      [:span {:class (stl/css :my-teams-icon)}
+       [:> raw-svg* {:id penpot-logo-icon-subtle}]]
+      [:span {:class (stl/css :team-text)
+              :title (tr "dashboard.my-teams")}
+       (tr "dashboard.my-teams")]
       (when (= default-team-id (:default-team-id organization))
         tick-icon)]
+     [:hr {:role "separator" :class (stl/css :team-separator)}]
 
      (for [org-item organizations]
        [:> dropdown-menu-item* {:on-click    on-org-click

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

@@ -225,7 +225,7 @@
 }
 
 .team-separator {
-  border-top: $b-1 solid var(--dropdown-separator-color);
+  border-top: $b-1 solid var(--color-background-quaternary);
   margin: 0;
 }
 
@@ -645,6 +645,17 @@
   }
 }
 
+.my-teams-icon {
+  height: var(--sp-xxl);
+  width: var(--sp-xxl);
+
+  svg {
+    fill: var(--icon-stroke-color);
+    width: var(--sp-xxl);
+    height: var(--sp-xxl);
+  }
+}
+
 .sidebar-org-switch {
   position: relative;
   width: 100%;

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs

@@ -28,6 +28,7 @@
 (def ^:svg-id marketing-layers "marketing-layers")
 (def ^:svg-id penpot-logo "penpot-logo")
 (def ^:svg-id penpot-logo-icon "penpot-logo-icon")
+(def ^:svg-id penpot-logo-subtle "penpot-logo-subtle")
 (def ^:svg-id empty-placeholder-1-left "empty-placeholder-1-left")
 (def ^:svg-id empty-placeholder-1-right "empty-placeholder-1-right")
 (def ^:svg-id empty-placeholder-2-left "empty-placeholder-2-left")

frontend/translations/en.po

@@ -380,6 +380,9 @@ msgstr "+ Create org"
 msgid "dashboard.create-new-org"
 msgstr "Create org"
 
+msgid "dashboard.my-teams"
+msgstr "My teams"
+
 msgid "dashboard.go-to-admin-console"
 msgstr "Go to Admin Console"
 

frontend/translations/es.po

@@ -389,6 +389,9 @@ msgstr "+ Crear org"
 msgid "dashboard.create-new-org"
 msgstr "Crear org"
 
+msgid "dashboard.my-teams"
+msgstr "Mis equipos"
+
 msgid "dashboard.go-to-admin-console"
 msgstr "Ir a la Admin Console"