♻️ Refactor project header css

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

@@ -40,6 +40,12 @@
 (def ^:private close-icon
   (i/icon-xref :close (stl/css :close-icon)))
 
+(def ^:private add-icon
+  (i/icon-xref :add (stl/css :add-icon)))
+
+(def ^:private menu-icon
+  (i/icon-xref :menu (stl/css :menu-icon)))
+
 (mf/defc header
   {::mf/wrap [mf/memo]}
   []
@@ -312,26 +318,26 @@
                        (dt/timeago {:locale locale}))]
           [:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
 
-        [:div {:class (stl/css :project-actions)}
+        [:div {:class (stl/css-case :project-actions true
+                                    :pinned-project (:is-pinned project))}
          (when-not (:is-default project)
            [:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
 
-         [:button {:class (stl/css :btn-secondary :btn-small)
+         [:button {:class (stl/css :add-file-btn)
                    :on-click on-create-click
                    :title (tr "dashboard.new-file")
                    :aria-label (tr "dashboard.new-file")
                    :data-test "project-new-file"
                    :on-key-down handle-create-click}
-          i/add]
+          add-icon]
 
-         [:button
+         [:button {:class (stl/css :options-btn)
-          {:class (stl/css :btn-secondary :btn-small)
                    :on-click on-menu-click
                    :title (tr "dashboard.options")
                    :aria-label  (tr "dashboard.options")
                    :data-test "project-options"
                    :on-key-down handle-menu-click}
-          i/menu]]]]]
+          menu-icon]]]]]
 
      [:div {:class (stl/css :grid-container) :ref rowref}
       [:& line-grid
@@ -343,14 +349,13 @@
 
      (when (and (> limit 0)
                 (> file-count limit))
-       [:button
+       [:button {:class (stl/css :show-more)
-        {:class (stl/css :show-more)
                  :on-click on-nav
                  :tab-index "0"
                  :on-key-down (fn [event]
                                 (when (kbd/enter? event)
                                   (on-nav)))}
-        [:div {:class (stl/css :placeholder-label)} (tr "dashboard.show-all-files")]
+        [:span {:class (stl/css :placeholder-label)} (tr "dashboard.show-all-files")]
         show-more-icon])]))
 
 

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

@@ -9,40 +9,53 @@
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: $s-16;
-  overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-quaternary;
+  margin-right: $s-16;
+  border-top: $s-1 solid var(--panel-border-color);
+  overflow-y: auto;
+}
 
-  &.dashboard-projects {
+.dashboard-projects {
   user-select: none;
 }
-  &.dashboard-shared {
+
+.dashboard-shared {
   width: calc(100vw - $s-320);
   margin-right: $s-52;
 }
 
-  &.search {
+.search {
   margin-top: $s-12;
 }
-}
 
 .dashboard-project-row {
+  --actions-opacity: 0;
   margin-bottom: $s-24;
   position: relative;
 
+  &:hover,
+  &:focus,
+  &:focus-within {
+    --actions-opacity: 1;
+  }
+}
+
+.pinned-project {
+  --actions-opacity: 1;
+}
+
 .project {
-    align-items: center;
-    border-radius: $br-4;
   display: flex;
   flex-direction: row;
-    justify-content: space-between;
   align-items: center;
-    margin-top: $s-16;
+  justify-content: space-between;
-    padding: $s-8 $s-8 $s-8 $s-16;
+  gap: $s-8;
   width: 99%;
   max-height: $s-40;
-    gap: $s-8;
+  padding: $s-8 $s-8 $s-8 $s-16;
+  margin-top: $s-16;
+  border-radius: $br-4;
+}
 
 .project-name-wrapper {
   display: flex;
@@ -53,33 +66,26 @@
   margin-left: $s-8;
 }
 
-    .btn-secondary {
+.project-name {
-      border: none;
+  @include bodyLargeTypography;
-      padding: $s-8;
+  @include textEllipsis;
+  width: fit-content;
+  margin-right: $s-12;
+  line-height: 0.8;
+  color: var(--title-foreground-color-hover);
+  cursor: pointer;
 }
 
-    .project-name {
-      @include textEllipsis;
-      cursor: pointer;
-      font-size: $fs-16;
-      line-height: 0.8;
-      font-weight: $fw400;
-      color: $df-primary;
-      margin-right: $s-4;
-      margin-right: $s-12;
-      width: fit-content;
-    }
 .info-wrapper {
   display: flex;
   align-items: center;
   gap: $s-8;
 }
+
 .info,
 .recent-files-row-title-info {
-      font-size: $fs-14;
+  @include bodyMediumTypography;
-      line-height: 1.15;
+  color: var(--title-foreground-color);
-      font-weight: $fw400;
-      color: $df-secondary;
   @media (max-width: 760px) {
     display: none;
   }
@@ -87,24 +93,23 @@
 
 .project-actions {
   display: flex;
-      opacity: 0;
+  opacity: var(--actions-opacity);
   margin-left: $s-32;
+}
 
-      .btn-small:not(.pin-button) {
+.add-file-btn,
+.options-btn {
+  @extend .button-tertiary;
   height: $s-32;
-        margin: 0 $s-8;
   width: $s-32;
+  margin: 0 $s-8;
+  padding: $s-8;
+}
 
-        &:not(:hover) {
+.add-icon,
-          background: transparent;
+.menu-icon {
-        }
+  @extend .button-icon;
-        svg {
+  stroke: var(--icon-foreground);
-          fill: $df-primary;
-          height: $s-16;
-          width: $s-16;
-        }
-      }
-    }
 }
 
 .grid-container {
@@ -112,32 +117,21 @@
   padding: 0 $s-4;
 }
 
-  &:hover,
-  &:focus,
-  &:focus-within {
-    .project-actions {
-      opacity: 1;
-    }
-  }
-}
-
 .show-more {
-  display: flex;
+  --show-more-color: var(--button-secondary-foreground-color-rest);
-  align-items: center;
+  @include buttonStyle;
-  column-gap: $s-12;
+  @include bodyMediumTypography;
-
-  color: $df-secondary;
-  font-size: $fs-14;
-  justify-content: space-between;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
   position: absolute;
   top: $s-8;
   right: $s-52;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: $s-12;
+  color: var(--show-more-color);
 
   &:hover {
-    color: $da-tertiary;
+    --show-more-color: var(--button-secondary-foreground-color-active);
   }
 }
 
@@ -145,7 +139,7 @@
   height: $s-16;
   width: $s-16;
   fill: none;
-  stroke: currentColor;
+  stroke: var(--show-more-color);
 }
 
 // Team hero