🐛 Fix organization/team switcher ui (#12019)

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

@@ -17,8 +17,4 @@
   &.dashboard-projects {
     user-select: none;
   }
-
-  &.search {
-    margin-top: deprecated.$s-12;
-  }
 }

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

@@ -220,7 +220,7 @@
         [:> raw-svg* {:id penpot-logo-icon-subtle}]]
        [:> organization-avatar* {:organization organization :size "xxl"}])
      [:span {:class (stl/css :organization-text-group)}
-      [:span {:class (stl/css :organization-text)
+      [:span {:class (stl/css-case :organization-text true :organization-current (= bucket-id current-id))
               :title (if personal? (tr "dashboard.other-teams") (:name organization))}
        (if personal? (tr "dashboard.other-teams") (:name organization))]
       (when (= bucket-id current-id)
@@ -289,7 +289,7 @@
               :href admin-console-href
               :tab-index "-1"}
           [:span {:class (stl/css :icon-wrapper)}
-           [:> icon* {:icon-id i/arrow-up-right :class (stl/css :action-icon)}]]
+           [:> icon* {:size "s" :icon-id i/arrow-up-right :class (stl/css :action-icon)}]]
           [:span {:class (stl/css :organization-text)} (tr "dashboard.go-to-admin-console")]]])
 
       [:> dropdown-menu-item* {:on-click on-create-organization
@@ -319,7 +319,7 @@
                :class (stl/css :team-item-picture)
                :alt (:name team)}])
       [:span {:class (stl/css :team-text-group)}
-       [:span {:class (stl/css :team-text)
+       [:span {:class (stl/css-case :team-text true :team-current (= (:id team) selected-team-id))
                :title (team-display-name team)}
         (team-display-name team)]
        (when show-badge?

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

@@ -198,7 +198,7 @@
   padding: var(--sp-s);
   border-radius: $br-8;
   z-index: var(--z-index-dropdown);
-  color: var(--title-foreground-color-hover);
+  color: var(--color-foreground-secondary);
   background-color: var(--switcher-dropdown-background);
   border: $b-2 solid var(--panel-border-color);
   margin: 0;
@@ -261,7 +261,6 @@
 .column-label {
   @include t.use-typography("headline-small");
 
-  color: var(--color-foreground-secondary);
   padding: var(--sp-s) $sz-6 $sz-6 var(--sp-m);
   margin-block-end: var(--sp-xxs);
   text-transform: uppercase;
@@ -331,6 +330,7 @@
 
   &:hover {
     background-color: var(--menu-background-color-hover);
+    color: var(--color-foreground-primary);
   }
 }
 
@@ -366,7 +366,6 @@
 
   min-width: 0;
   text-align: left;
-  color: var(--menu-foreground-color-hover);
 }
 
 .organization-text,
@@ -376,6 +375,12 @@
 
 .selected {
   background-color: var(--menu-background-color-hover);
+  color: var(--color-foreground-primary);
+}
+
+.organization-current,
+.team-current {
+  color: var(--color-foreground-primary);
 }
 
 .action {

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

@@ -35,10 +35,6 @@
   margin-inline-end: px2rem(52);
 }
 
-.search {
-  margin-block-start: var(--sp-m);
-}
-
 .dashboard-project-row {
   --actions-opacity: 0;
 

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

@@ -23,10 +23,6 @@
     width: calc(100vw - deprecated.$s-320);
     margin-right: deprecated.$s-52;
   }
-
-  &.search {
-    margin-top: deprecated.$s-12;
-  }
 }
 
 .grid-empty-placeholder.search {