♻️ Update dashboard hero and template icons

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

@@ -24,6 +24,9 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
+(def ^:private menu-icon
+  (i/icon-xref :menu-refactor (stl/css :menu-icon)))
+
 (mf/defc header
   [{:keys [project create-fn] :as props}]
   (let [local (mf/use-state
@@ -92,8 +95,7 @@
                        :on-import on-import}]
 
      [:div {:class (stl/css :dashboard-header-actions)}
-      [:a
+      [:a {:class (stl/css :btn-secondary :btn-small :new-file)
-       {:class (stl/css :btn-secondary :btn-small :new-file)
            :tab-index "0"
            :on-click on-create-click
            :data-test "new-file"
@@ -109,15 +111,14 @@
           :on-click toggle-pin
           :on-key-down (fn [event] (when (kbd/enter? event) (toggle-pin event)))}])
 
-      [:div
+      [:div {:class (stl/css :icon)
-       {:class (stl/css :icon :tooltip :tooltip-bottom-left)
              :tab-index "0"
              :on-click on-menu-click
-        :alt (tr "dashboard.options")
+             :title (tr "dashboard.options")
              :on-key-down (fn [event]
                             (when (kbd/enter? event)
                               (on-menu-click event)))}
-       i/actions]]]))
+       menu-icon]]]))
 
 (mf/defc files-section
   [{:keys [project team] :as props}]

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

@@ -30,3 +30,8 @@
 .new-file {
   margin-inline-end: $s-8;
 }
+
+.menu-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}

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

@@ -37,6 +37,9 @@
 (def ^:private show-more-icon
   (i/icon-xref :arrow-refactor (stl/css :show-more-icon)))
 
+(def ^:private close-icon
+  (i/icon-xref :close-refactor (stl/css :close-icon)))
+
 (mf/defc header
   {::mf/wrap [mf/memo]}
   []
@@ -44,8 +47,7 @@
     [:header {:class (stl/css :dashboard-header)}
      [:div#dashboard-projects-title {:class (stl/css :dashboard-title)}
       [:h1 (tr "dashboard.projects-title")]]
-     [:button
+     [:button {:class (stl/css :btn-secondary :btn-small)
-      {:class (stl/css :btn-secondary :btn-small)
                :on-click on-click
                :data-test "new-project-button"}
       (tr "dashboard.new-project")]]))
@@ -84,11 +86,10 @@
         :on-click on-invite-click}
        (tr "onboarding.choice.team-up.invite-members")]]
 
-     [:button
+     [:button {:class (stl/css :close)
-      {:class (stl/css :close)
                :on-click on-close-click
                :aria-label (tr "labels.close")}
-      [:span i/close]]]))
+      close-icon]]))
 
 (def builtin-templates
   (l/derived :builtin-templates st/state))
@@ -139,11 +140,10 @@
          :importing [:span.loader i/loader-pencil]
          :success "")]]
 
-     [:button
+     [:button {:class (stl/css :close)
-      {:class (stl/css :close)
                :on-click close-tutorial
                :aria-label (tr "labels.close")}
-      [:span {:class (stl/css :icon)} i/close]]]))
+      close-icon]]))
 
 (mf/defc interface-walkthrough
   {::mf/wrap [mf/memo]}
@@ -163,11 +163,10 @@
            :target "_blank"
            :on-click handle-walkthrough-link}
        (tr "dasboard.walkthrough-hero.start")]]
-     [:button
+     [:button {:class (stl/css :close)
-      {:class (stl/css :close)
                :on-click close-walkthrough
                :aria-label (tr "labels.close")}
-      [:span {:class (stl/css :icon)} i/close]]]))
+      close-icon]]))
 
 (mf/defc project-item
   [{:keys [project first? team files] :as props}]
@@ -310,8 +309,7 @@
         (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
+        [:button {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
-         {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
                   :on-click on-create-click
                   :alt (tr "dashboard.new-file")
                   :aria-label (tr "dashboard.new-file")

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

@@ -141,6 +141,7 @@
   stroke: currentColor;
 }
 
+// Team hero
 .team-hero {
   background-color: $db-tertiary;
   border-radius: $br-8;
@@ -150,6 +151,18 @@
   padding: $s-8;
   position: relative;
 
+  img {
+    border-radius: $br-4;
+    height: $s-200;
+    width: auto;
+
+    @media (max-width: 1200px) {
+      display: none;
+      width: 0;
+    }
+  }
+}
+
 .text {
   display: flex;
   flex-direction: column;
@@ -157,11 +170,13 @@
   flex-grow: 1;
   padding: $s-20 $s-20;
 }
+
 .title {
   font-size: $fs-24;
   color: $df-primary;
   font-weight: $fw400;
 }
+
 .info {
   flex: 1;
   font-size: $fs-16;
@@ -174,23 +189,31 @@
   }
   padding: $s-8 0;
 }
+
 .close {
+  --close-icon-foreground-color: var(--icon-foreground);
   position: absolute;
   top: $s-20;
-    right: $s-20;
+  right: $s-24;
+  width: $s-24;
   background-color: transparent;
   border: none;
   cursor: pointer;
-    svg {
+  &:hover {
-      transform: rotate(45deg);
+    --close-icon-foreground-color: var(--button-icon-foreground-color-selected);
-      width: $s-16;
-      height: $s-16;
   }
 }
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--close-icon-foreground-color);
+}
+
 .invite {
   height: $s-32;
   width: $s-180;
 }
+
 .img-wrapper {
   display: flex;
   align-items: center;
@@ -204,20 +227,6 @@
     width: 0;
   }
 }
-  img {
-    border-radius: $br-4;
-    height: $s-200;
-    width: auto;
-
-    @media (max-width: 1200px) {
-      display: none;
-      width: 0;
-    }
-  }
-  svg {
-    fill: $df-secondary;
-  }
-}
 
 .hero-projects {
   display: grid;
@@ -279,30 +288,6 @@
       width: $s-180;
       height: $s-40;
     }
-    .close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: $s-24;
-      cursor: pointer;
-      display: flex;
-      margin: $s-20;
-      justify-content: center;
-      align-items: center;
-      background-color: transparent;
-      border: none;
-      .icon {
-        svg {
-          fill: $df-secondary;
-          height: $s-16;
-          width: $s-16;
-          transform: rotate(45deg);
-          &:hover {
-            fill: $da-tertiary;
-          }
-        }
-      }
-    }
   }
   .walkthrough {
     .thumbnail {

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

@@ -25,6 +25,12 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
+(def ^:private arrow-icon
+  (i/icon-xref :arrow-refactor (stl/css :arrow-icon)))
+
+(def ^:private download-icon
+  (i/icon-xref :download-refactor (stl/css :download-icon)))
+
 (def builtin-templates
   (l/derived :builtin-templates st/state))
 
@@ -76,10 +82,16 @@
 
     [:div {:class (stl/css :title)}
      [:button {:tab-index "0"
+               :class (stl/css :title-btn)
                :on-click on-click
                :on-key-down on-key-down}
-      [:span (tr "dashboard.libraries-and-templates")]
+      [:span {:class (stl/css :title-text)}
-      [:span {:class (stl/css :icon)} (if ^boolean collapsed i/arrow-up i/arrow-down)]]]))
+       (tr "dashboard.libraries-and-templates")]
+      (if ^boolean collapsed
+        [:span {:class (stl/css :title-icon :title-icon-collapsed)}
+         arrow-icon]
+        [:span {:class (stl/css :title-icon)}
+         arrow-icon])]]))
 
 (mf/defc card-item
   {::mf/wrap-props false}
@@ -112,8 +124,8 @@
        [:img {:src (dm/str thb)
               :alt (:name item)}]]
       [:div {:class (stl/css :card-name)}
-       [:span (:name item)]
+       [:span {:class (stl/css :card-text)} (:name item)]
-       [:span {:class (stl/css :icon)} i/download-refactor]]]]))
+       download-icon]]]))
 
 (mf/defc card-item-link
   {::mf/wrap-props false}
@@ -260,18 +272,16 @@
         :total total}]]
 
      (when (< card-offset 0)
-       [:button
+       [:button {:class (stl/css :move-button :move-left)
-        {:class (stl/css :button :left)
                  :tab-index (if ^boolean collapsed "-1" "0")
                  :on-click on-move-left
                  :on-key-down on-move-left-key-down}
-        i/go-prev])
+        arrow-icon])
 
      (when more-cards
-       [:button
+       [:button {:class (stl/css :move-button :move-right)
-        {:class (stl/css :button :right)
                  :tab-index (if collapsed "-1" "0")
                  :on-click on-move-right
                  :aria-label (tr "labels.next")
                  :on-key-down  on-move-right-key-down}
-        i/go-next])]))
+        arrow-icon])]))

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

@@ -20,6 +20,7 @@
     bottom: calc(-1 * $s-228);
     transition: bottom 300ms;
   }
+}
 
 .title {
   pointer-events: all;
@@ -29,8 +30,9 @@
   height: $s-56;
   position: absolute;
   right: calc(-1 * $s-24);
+}
 
-    button {
+.title-btn {
   border: none;
   cursor: pointer;
   height: $s-56;
@@ -42,8 +44,9 @@
   position: relative;
   z-index: 1;
   background-color: $db-quaternary;
+}
 
-      span {
+.title-text {
   display: inline-block;
   vertical-align: middle;
   line-height: 1.2;
@@ -52,20 +55,29 @@
   margin-right: $s-8;
   color: $df-primary;
   font-weight: $fw400;
-        &.icon {
-          margin-left: $s-16;
-          margin-right: $s-16;
-        }
-      }
-      svg {
-        width: $s-12;
-        height: $s-12;
-        fill: $df-secondary;
-      }
-    }
 }
 
-  .button {
+.title-icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: $s-16;
+  margin-right: $s-8;
+  color: $df-primary;
+  margin-left: $s-16;
+  margin-right: $s-16;
+  transform: rotate(90deg);
+}
+
+.title-icon-collapsed {
+  transform: rotate(-90deg);
+}
+
+.arrow-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+.move-button {
   position: absolute;
   top: $s-136;
   border: $s-2 solid $df-secondary;
@@ -79,27 +91,23 @@
   align-items: center;
   justify-content: center;
   pointer-events: all;
-    svg {
-      width: $s-12;
-      height: $s-12;
-      fill: $df-secondary;
-    }
-
-    &.left {
-      left: 0;
-      margin-left: $s-44;
-    }
-
-    &.right {
-      right: 0;
-      margin-right: $s-44;
-    }
 
   &:hover {
     border: $s-2 solid $da-tertiary;
   }
 }
 
+.move-left {
+  left: 0;
+  margin-left: $s-44;
+  transform: rotate(180deg);
+}
+
+.move-right {
+  right: 0;
+  margin-right: $s-44;
+}
+
 .content {
   pointer-events: all;
   width: 200%;
@@ -108,6 +116,7 @@
   position: absolute;
   border-top-left-radius: $s-8;
   background-color: $db-quaternary;
+}
 
 .card-container {
   width: $s-276;
@@ -129,6 +138,11 @@
   padding: $s-3 $s-6 $s-16 $s-6;
   border-radius: $br-8;
 
+  &:hover {
+    background-color: $db-tertiary;
+  }
+}
+
 .img-container {
   width: 100%;
   height: $s-136;
@@ -149,21 +163,16 @@
   justify-content: space-between;
   height: $s-24;
   align-items: center;
+}
 
-        .icon {
+.card-text {
-          width: $s-16;
-          height: $s-16;
-        }
-        svg {
-          width: $s-16;
-          height: $s-16;
-          fill: none;
-          stroke: currentColor;
-        }
-        span {
   font-weight: $fw500;
   font-size: $fs-16;
 }
+
+.download-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
 }
 
 .template-link {
@@ -183,10 +192,3 @@
   margin-top: $s-8;
   color: $df-secondary;
 }
-
-      &:hover {
-        background-color: $db-tertiary;
-      }
-    }
-  }
-}