♻️ Refactor access tokens file

frontend/src/app/main/ui/settings/access_tokens.cljs

@@ -138,7 +138,8 @@
                        :placeholder (tr "modals.create-access-token.name.placeholder")}]]
 
         [:div {:class (stl/css :fields-row)}
-         [:div {:class (stl/css :select-title)}  (tr "modals.create-access-token.expiration-date.label")]
+         [:div {:class (stl/css :select-title)}
+          (tr "modals.create-access-token.expiration-date.label")]
          [:& fm/select {:options [{:label (tr "dashboard.access-tokens.expiration-never")    :value "never" :key "never"}
                                   {:label (tr "dashboard.access-tokens.expiration-30-days")  :value "720h"  :key "720h"}
                                   {:label (tr "dashboard.access-tokens.expiration-60-days")  :value "1440h" :key "1440h"}
@@ -192,16 +193,13 @@
 (mf/defc access-tokens-hero
   []
   (let [on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
-    [:div {:class (stl/css :access-tokens-hero-container)}
+    [:div {:class (stl/css :access-tokens-hero)}
-     [:div {:class (stl/css :access-tokens-hero)}
+     [:h2 {:class (stl/css :hero-title)} (tr "dashboard.access-tokens.personal")]
-      [:div {:class (stl/css :desc)}
+     [:p {:class (stl/css :hero-desc)} (tr "dashboard.access-tokens.personal.description")]
-       [:h2 (tr "dashboard.access-tokens.personal")]
-       [:p (tr "dashboard.access-tokens.personal.description")]]
 
-      [:button
+     [:button {:class (stl/css :hero-btn)
-       {:class (stl/css :btn-primary)
+               :on-click on-click}
-        :on-click on-click}
+      (tr "dashboard.access-tokens.create")]]))
-       [:span (tr "dashboard.access-tokens.create")]]]]))
 
 (mf/defc access-token-actions
   [{:keys [on-delete]}]
@@ -231,11 +229,11 @@
              (dom/stop-propagation event)
              (on-menu-click event))))]
 
-    [:div {:class (stl/css :icon)
+    [:button {:class (stl/css :menu-btn)
-           :tab-index "0"
+              :tab-index "0"
-           :ref menu-ref
+              :ref menu-ref
-           :on-click on-menu-click
+              :on-click on-menu-click
-           :on-key-down on-keydown}
+              :on-key-down on-keydown}
      menu-icon
      [:& context-menu-a11y
       {:on-close on-menu-close
@@ -274,15 +272,15 @@
                        :on-accept delete-fn}))))]
 
     [:div {:class (stl/css :table-row)}
-     [:div {:class (stl/css :table-field :name)}
+     [:div {:class (stl/css :table-field :field-name)}
       (str (:name token))]
 
-     [:div {:class (stl/css :table-field :expiration-date)}
+     [:div {:class (stl/css-case :expiration-date true
-      [:span {:class (stl/css-case :expired expired? :content true)}
+                                 :expired expired?)}
-       (cond
+      (cond
-         (nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
+        (nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
-         expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
+        expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
-         :else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
+        :else (tr "dashboard.access-tokens.expires-on" expires-txt))]
      [:div {:class (stl/css :table-field :actions)}
       [:& access-token-actions
        {:on-delete on-delete}]]]))
@@ -295,14 +293,13 @@
       (st/emit! (du/fetch-access-tokens)))
 
     [:div {:class (stl/css :dashboard-access-tokens)}
-     [:div
+     [:& access-tokens-hero]
-      [:& access-tokens-hero]
+     (if (empty? tokens)
-      (if (empty? tokens)
+       [:div {:class (stl/css :access-tokens-empty)}
-        [:div {:class (stl/css :access-tokens-empty)}
+        [:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
-         [:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
+        [:div (tr "dashboard.access-tokens.empty.add-one")]]
-         [:div (tr "dashboard.access-tokens.empty.add-one")]]
+       [:div {:class (stl/css :dashboard-table)}
-        [:div {:class (stl/css :dashboard-table)}
+        [:div {:class (stl/css :table-rows)}
-         [:div {:class (stl/css :table-rows)}
+         (for [token tokens]
-          (for [token tokens]
+           [:& access-token-item {:token token :key (:id token)}])]])]))
-            [:& access-token-item {:token token :key (:id token)}])]])]]))
 

frontend/src/app/main/ui/settings/access_tokens.scss

@@ -6,175 +6,118 @@
 
 @use "common/refactor/common-refactor.scss" as *;
 
-.dashboard-table {
+// ACCESS TOKENS PAGE
-  display: flex;
+.dashboard-access-tokens {
-  flex-direction: column;
+  display: grid;
-  font-size: $fs-16;
+  grid-template-rows: auto 1fr;
-  margin-top: $s-20;
+  margin: $s-80 auto $s-120 auto;
+  gap: $s-32;
   width: $s-800;
-  svg {
-    width: $s-12;
-    height: $s-12;
-    fill: $df-primary;
-  }
 }
 
-.table-header {
+// hero
-  color: $df-secondary;
+.access-tokens-hero {
   display: grid;
-  font-size: $fs-12;
+  grid-template-rows: auto auto 1fr;
-  grid-template-columns: 43% 1fr $s-108 $s-12;
+  gap: $s-32;
-  height: $s-40;
+  width: $s-500;
+  font-size: $fs-14;
+  margin: $s-16 auto 0 auto;
+}
+
+.hero-title {
+  @include bigTitleTipography;
+  color: var(--title-foreground-color-hover);
+}
+
+.hero-desc {
+  color: var(--title-foreground-color);
+  margin-bottom: 0;
+  font-size: $fs-14;
+}
+
+.hero-btn {
+  @extend .button-primary;
+}
+
+// table empty
+.access-tokens-empty {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  height: $s-156;
   max-width: $s-1000;
-  padding: 0 $s-16;
-  text-transform: uppercase;
   width: 100%;
+  padding: $s-32;
+  border: $s-1 solid var(--panel-border-color);
+  border-radius: $br-8;
+  color: var(--dashboard-list-text-foreground-color);
+}
+
+// Access tokens table
+.dashboard-table {
+  height: fit-content;
 }
 
 .table-rows {
-  color: $db-secondary;
+  display: grid;
-  display: flex;
+  grid-auto-rows: $s-64;
-  flex-direction: column;
+  gap: $s-16;
-  margin-top: $s-16;
-  max-width: $s-1000;
-  padding-top: 0;
   width: 100%;
+  height: 100%;
+  max-width: $s-1000;
+  margin-top: $s-16;
+  color: var(--title-foreground-color);
 }
 
 .table-row {
-  align-items: center;
-  background-color: $db-tertiary;
-  border-radius: $br-8;
-  color: $df-primary;
   display: grid;
-  font-size: $fs-14;
+  grid-template-columns: 43% 1fr auto;
-  grid-template-columns: 1fr 43% $s-12;
-  height: fit-content;
-  min-height: $s-40;
-  padding: 0 $s-16;
-  width: 100%;
-
-  &:not(:first-child) {
-    margin-top: $s-8;
-  }
-}
-
-.table-field {
-  display: flex;
   align-items: center;
-
+  height: $s-64;
-  .icon {
+  width: 100%;
-    height: 100%;
+  padding: 0 $s-16;
-    width: $s-16;
+  border-radius: $br-8;
-    padding-left: $s-12;
+  background-color: var(--dashboard-list-background-color);
-    cursor: pointer;
+  color: var(--dashboard-list-foreground-color);
-  }
-
-  &.name {
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    color: $df-primary;
-    display: -webkit-box;
-    max-width: $s-480;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.expiration-date {
-    color: $df-secondary;
-    font-size: $fs-14;
-
-    .content {
-      padding: $s-2 $s-6;
-      &.expired {
-        background-color: var(--status-color-warning-500);
-        border-radius: $br-4;
-        color: $db-secondary;
-      }
-    }
-  }
-  &.access-token-created {
-    word-break: break-all;
-  }
-
-  &.actions {
-    position: relative;
-  }
 }
 
+.field-name {
+  @include textEllipsis;
+  display: grid;
+  width: 43%;
+  min-width: $s-300;
+}
+
+.expiration-date {
+  @include flexCenter;
+  min-width: $s-76;
+  width: fit-content;
+  height: $s-24;
+  border-radius: $br-8;
+  color: var(--dashboard-list-text-foreground-color);
+}
+
+.expired {
+  @include headlineSmallTypography;
+  padding: 0 $s-6;
+  color: var(--pill-foreground-color);
+  background-color: var(--status-widget-background-color-warning);
+}
+
+.actions {
+  position: relative;
+}
 .menu-icon {
   @extend .button-icon;
   stroke: var(--icon-foreground);
 }
 
-.dashboard-access-tokens {
+.menu-btn {
-  display: flex;
+  @include buttonStyle;
-  flex-direction: column;
-  margin-left: $s-120;
-  margin-top: $s-80;
-  width: $s-800;
-}
-
-.access-tokens-hero-container {
-  background-color: transparent;
-  display: flex;
-  flex-direction: column;
-  max-width: $s-1000;
-  width: 100%;
-}
-
-.access-tokens-hero {
-  display: flex;
-  flex-direction: column;
-  font-size: $fs-14;
-  gap: $s-32;
-  justify-content: space-between;
-  width: $s-468;
-
-  .desc {
-    background-color: transparent;
-    color: $df-secondary;
-    width: 100%;
-
-    h2 {
-      color: $df-primary;
-      font-size: $fs-24;
-      font-weight: regular;
-      margin-bottom: $s-32;
-    }
-    p {
-      color: $df-secondary;
-      margin-bottom: 0;
-      font-size: $fs-14;
-    }
-  }
-  .btn-primary {
-    flex-shrink: 0;
-  }
-}
-
-.access-tokens-empty {
-  align-items: center;
-  border-radius: $br-8;
-  border: $s-1 solid $db-quaternary;
-  color: $df-secondary;
-  display: flex;
-  flex-direction: column;
-  font-size: $fs-14;
-  justify-content: center;
-  margin-top: $s-32;
-  max-width: $s-1000;
-  min-height: $s-136;
-  padding: $s-32;
-  text-align: center;
-  width: $s-468;
-}
-
-.btn-primary {
-  @extend .button-primary;
-  height: $s-32;
 }
 
+// Create access token modal
 .modal-overlay {
   @extend .modal-overlay-base;
 }
@@ -186,13 +129,14 @@
 
 .modal-header {
   margin-bottom: $s-24;
-  .modal-title {
+}
-    @include uppercaseTitleTipography;
+
-    color: var(--modal-title-foreground-color);
+.modal-title {
-  }
+  @include uppercaseTitleTipography;
-  .modal-close-btn {
+  color: var(--modal-title-foreground-color);
-    @extend .modal-close-btn-base;
+}
-  }
+.modal-close-btn {
+  @extend .modal-close-btn-base;
 }
 
 .modal-content {
@@ -202,10 +146,6 @@
   margin-bottom: $s-24;
 }
 
-.fields-row {
-  @include flexColumn;
-}
-
 .select-title {
   @include bodySmallTypography;
   color: var(--modal-title-foreground-color);