♻️ 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,14 +95,13 @@
                        :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"
-        :tab-index "0"
+           :on-click on-create-click
-        :on-click on-create-click
+           :data-test "new-file"
-        :data-test "new-file"
+           :on-key-down (fn [event]
-        :on-key-down (fn [event]
+                          (when (kbd/enter? event)
-                       (when (kbd/enter? event)
+                            (on-create-click event)))}
-                         (on-create-click event)))}
        (tr "dashboard.new-file")]
 
       (when-not (:is-default project)
@@ -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"
-        :tab-index "0"
+             :on-click on-menu-click
-        :on-click on-menu-click
+             :title (tr "dashboard.options")
-        :alt (tr "dashboard.options")
+             :on-key-down (fn [event]
-        :on-key-down (fn [event]
+                            (when (kbd/enter? event)
-                       (when (kbd/enter? event)
+                              (on-menu-click event)))}
-                         (on-menu-click event)))}
+       menu-icon]]]))
-       i/actions]]]))
 
 (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,10 +47,9 @@
     [: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
-       :on-click on-click
+               :data-test "new-project-button"}
-       :data-test "new-project-button"}
       (tr "dashboard.new-project")]]))
 
 (mf/defc team-hero
@@ -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
-       :on-click on-close-click
+               :aria-label (tr "labels.close")}
-       :aria-label (tr "labels.close")}
+      close-icon]]))
-      [:span i/close]]]))
 
 (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
-       :on-click close-tutorial
+               :aria-label (tr "labels.close")}
-       :aria-label (tr "labels.close")}
+      close-icon]]))
-      [:span {:class (stl/css :icon)} i/close]]]))
 
 (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
-       :on-click close-walkthrough
+               :aria-label (tr "labels.close")}
-       :aria-label (tr "labels.close")}
+      close-icon]]))
-      [:span {:class (stl/css :icon)} i/close]]]))
 
 (mf/defc project-item
   [{:keys [project first? team files] :as props}]
@@ -310,13 +309,12 @@
         (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
-          :on-click on-create-click
+                  :alt (tr "dashboard.new-file")
-          :alt (tr "dashboard.new-file")
+                  :aria-label (tr "dashboard.new-file")
-          :aria-label (tr "dashboard.new-file")
+                  :data-test "project-new-file"
-          :data-test "project-new-file"
+                  :on-key-down handle-create-click}
-          :on-key-down handle-create-click}
          i/add-refactor]
 
         [:button

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,60 +151,6 @@
   padding: $s-8;
   position: relative;
 
-  .text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    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;
-    span {
-      color: $df-secondary;
-      display: block;
-    }
-    a {
-      color: $da-primary;
-    }
-    padding: $s-8 0;
-  }
-  .close {
-    position: absolute;
-    top: $s-20;
-    right: $s-20;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    svg {
-      transform: rotate(45deg);
-      width: $s-16;
-      height: $s-16;
-    }
-  }
-  .invite {
-    height: $s-32;
-    width: $s-180;
-  }
-  .img-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $s-200;
-    height: $s-200;
-    overflow: hidden;
-    border-radius: $br-4;
-    @media (max-width: 1200px) {
-      display: none;
-      width: 0;
-    }
-  }
   img {
     border-radius: $br-4;
     height: $s-200;
@@ -214,8 +161,70 @@
       width: 0;
     }
   }
-  svg {
+}
-    fill: $df-secondary;
+
+.text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  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;
+  span {
+    color: $df-secondary;
+    display: block;
+  }
+  a {
+    color: $da-primary;
+  }
+  padding: $s-8 0;
+}
+
+.close {
+  --close-icon-foreground-color: var(--icon-foreground);
+  position: absolute;
+  top: $s-20;
+  right: $s-24;
+  width: $s-24;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    --close-icon-foreground-color: var(--button-icon-foreground-color-selected);
+  }
+}
+
+.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;
+  justify-content: center;
+  width: $s-200;
+  height: $s-200;
+  overflow: hidden;
+  border-radius: $br-4;
+  @media (max-width: 1200px) {
+    display: none;
+    width: 0;
   }
 }
 
@@ -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")
-         :tab-index (if ^boolean collapsed "-1" "0")
+                 :on-click on-move-left
-         :on-click on-move-left
+                 :on-key-down on-move-left-key-down}
-         :on-key-down on-move-left-key-down}
+        arrow-icon])
-        i/go-prev])
 
      (when more-cards
-       [:button
+       [:button {:class (stl/css :move-button :move-right)
-        {:class (stl/css :button :right)
+                 :tab-index (if collapsed "-1" "0")
-         :tab-index (if collapsed "-1" "0")
+                 :on-click on-move-right
-         :on-click on-move-right
+                 :aria-label (tr "labels.next")
-         :aria-label (tr "labels.next")
+                 :on-key-down  on-move-right-key-down}
-         :on-key-down  on-move-right-key-down}
+        arrow-icon])]))
-        i/go-next])]))

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

@@ -20,173 +20,175 @@
     bottom: calc(-1 * $s-228);
     transition: bottom 300ms;
   }
+}
 
-  .title {
+.title {
-    pointer-events: all;
+  pointer-events: all;
-    width: fit-content;
+  width: fit-content;
-    top: calc(-1 * $s-56);
+  top: calc(-1 * $s-56);
-    text-align: right;
+  text-align: right;
-    height: $s-56;
+  height: $s-56;
-    position: absolute;
+  position: absolute;
-    right: calc(-1 * $s-24);
+  right: calc(-1 * $s-24);
+}
 
-    button {
+.title-btn {
-      border: none;
+  border: none;
-      cursor: pointer;
+  cursor: pointer;
-      height: $s-56;
+  height: $s-56;
-      display: inline-flex;
+  display: inline-flex;
-      align-items: center;
+  align-items: center;
-      border-top-left-radius: $br-10;
+  border-top-left-radius: $br-10;
-      border-top-right-radius: $br-10;
+  border-top-right-radius: $br-10;
-      margin-right: $s-32;
+  margin-right: $s-32;
-      position: relative;
+  position: relative;
-      z-index: 1;
+  z-index: 1;
-      background-color: $db-quaternary;
+  background-color: $db-quaternary;
+}
 
-      span {
+.title-text {
-        display: inline-block;
+  display: inline-block;
-        vertical-align: middle;
+  vertical-align: middle;
-        line-height: 1.2;
+  line-height: 1.2;
-        font-size: $fs-16;
+  font-size: $fs-16;
-        margin-left: $s-16;
+  margin-left: $s-16;
-        margin-right: $s-8;
+  margin-right: $s-8;
-        color: $df-primary;
+  color: $df-primary;
-        font-weight: $fw400;
+  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 {
-    position: absolute;
+  display: inline-block;
-    top: $s-136;
+  vertical-align: middle;
-    border: $s-2 solid $df-secondary;
+  margin-left: $s-16;
-    border-radius: 50%;
+  margin-right: $s-8;
-    text-align: center;
+  color: $df-primary;
-    width: $s-36;
+  margin-left: $s-16;
-    height: $s-36;
+  margin-right: $s-16;
-    cursor: pointer;
+  transform: rotate(90deg);
-    background-color: $df-primary;
+}
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: all;
-    svg {
-      width: $s-12;
-      height: $s-12;
-      fill: $df-secondary;
-    }
 
-    &.left {
+.title-icon-collapsed {
-      left: 0;
+  transform: rotate(-90deg);
-      margin-left: $s-44;
+}
-    }
 
-    &.right {
+.arrow-icon {
-      right: 0;
+  @extend .button-icon;
-      margin-right: $s-44;
+  stroke: var(--icon-foreground);
-    }
+}
 
-    &:hover {
+.move-button {
-      border: $s-2 solid $da-tertiary;
+  position: absolute;
-    }
+  top: $s-136;
-  }
+  border: $s-2 solid $df-secondary;
+  border-radius: 50%;
+  text-align: center;
+  width: $s-36;
+  height: $s-36;
+  cursor: pointer;
+  background-color: $df-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
 
-  .content {
+  &:hover {
-    pointer-events: all;
+    border: $s-2 solid $da-tertiary;
-    width: 200%;
-    height: $s-228;
-    margin-left: $s-6;
-    position: absolute;
-    border-top-left-radius: $s-8;
-    background-color: $db-quaternary;
-
-    .card-container {
-      width: $s-276;
-      margin-top: $s-20;
-      display: inline-block;
-      text-align: center;
-      vertical-align: top;
-      background-color: transparent;
-      border: none;
-      padding: 0;
-    }
-
-    .template-card {
-      display: inline-block;
-      width: $s-256;
-      font-size: $fs-16;
-      cursor: pointer;
-      color: $df-primary;
-      padding: $s-3 $s-6 $s-16 $s-6;
-      border-radius: $br-8;
-
-      .img-container {
-        width: 100%;
-        height: $s-136;
-        margin-bottom: $s-16;
-        border-radius: $br-5;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-
-        img {
-          border-radius: $br-4;
-        }
-      }
-
-      .card-name {
-        padding: 0 $s-6;
-        display: flex;
-        justify-content: space-between;
-        height: $s-24;
-        align-items: center;
-
-        .icon {
-          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;
-        }
-      }
-
-      .template-link {
-        border: $s-2 solid transparent;
-        margin: $s-32;
-        padding: $s-32 0;
-      }
-
-      .template-link-title {
-        font-size: $fs-14;
-        color: $df-primary;
-        font-weight: $fw400;
-      }
-
-      .template-link-text {
-        font-size: $fs-12;
-        margin-top: $s-8;
-        color: $df-secondary;
-      }
-
-      &:hover {
-        background-color: $db-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%;
+  height: $s-228;
+  margin-left: $s-6;
+  position: absolute;
+  border-top-left-radius: $s-8;
+  background-color: $db-quaternary;
+}
+
+.card-container {
+  width: $s-276;
+  margin-top: $s-20;
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.template-card {
+  display: inline-block;
+  width: $s-256;
+  font-size: $fs-16;
+  cursor: pointer;
+  color: $df-primary;
+  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;
+  margin-bottom: $s-16;
+  border-radius: $br-5;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  img {
+    border-radius: $br-4;
+  }
+}
+
+.card-name {
+  padding: 0 $s-6;
+  display: flex;
+  justify-content: space-between;
+  height: $s-24;
+  align-items: center;
+}
+
+.card-text {
+  font-weight: $fw500;
+  font-size: $fs-16;
+}
+
+.download-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+.template-link {
+  border: $s-2 solid transparent;
+  margin: $s-32;
+  padding: $s-32 0;
+}
+
+.template-link-title {
+  font-size: $fs-14;
+  color: $df-primary;
+  font-weight: $fw400;
+}
+
+.template-link-text {
+  font-size: $fs-12;
+  margin-top: $s-8;
+  color: $df-secondary;
+}