diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs index d7897db5e..dff8f400a 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.cljs +++ b/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 :desc)} - [:h2 (tr "dashboard.access-tokens.personal")] - [:p (tr "dashboard.access-tokens.personal.description")]] + [:div {:class (stl/css :access-tokens-hero)} + [:h2 {:class (stl/css :hero-title)} (tr "dashboard.access-tokens.personal")] + [:p {:class (stl/css :hero-desc)} (tr "dashboard.access-tokens.personal.description")] - [:button - {:class (stl/css :btn-primary) - :on-click on-click} - [:span (tr "dashboard.access-tokens.create")]]]])) + [:button {:class (stl/css :hero-btn) + :on-click on-click} + (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) - :tab-index "0" - :ref menu-ref - :on-click on-menu-click - :on-key-down on-keydown} + [:button {:class (stl/css :menu-btn) + :tab-index "0" + :ref menu-ref + :on-click on-menu-click + :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)} - [:span {:class (stl/css-case :expired expired? :content true)} - (cond - (nil? expires-at) (tr "dashboard.access-tokens.no-expiration") - expired? (tr "dashboard.access-tokens.expired-on" expires-txt) - :else (tr "dashboard.access-tokens.expires-on" expires-txt))]] + [:div {:class (stl/css-case :expiration-date true + :expired expired?)} + (cond + (nil? expires-at) (tr "dashboard.access-tokens.no-expiration") + expired? (tr "dashboard.access-tokens.expired-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] - (if (empty? tokens) - [:div {:class (stl/css :access-tokens-empty)} - [:div (tr "dashboard.access-tokens.empty.no-access-tokens")] - [:div (tr "dashboard.access-tokens.empty.add-one")]] - [:div {:class (stl/css :dashboard-table)} - [:div {:class (stl/css :table-rows)} - (for [token tokens] - [:& access-token-item {:token token :key (:id token)}])]])]])) + [:& access-tokens-hero] + (if (empty? tokens) + [:div {:class (stl/css :access-tokens-empty)} + [:div (tr "dashboard.access-tokens.empty.no-access-tokens")] + [:div (tr "dashboard.access-tokens.empty.add-one")]] + [:div {:class (stl/css :dashboard-table)} + [:div {:class (stl/css :table-rows)} + (for [token tokens] + [:& access-token-item {:token token :key (:id token)}])]])])) diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss index 92cd33be3..50239c61b 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.scss +++ b/frontend/src/app/main/ui/settings/access_tokens.scss @@ -6,175 +6,118 @@ @use "common/refactor/common-refactor.scss" as *; -.dashboard-table { - display: flex; - flex-direction: column; - font-size: $fs-16; - margin-top: $s-20; +// ACCESS TOKENS PAGE +.dashboard-access-tokens { + display: grid; + grid-template-rows: auto 1fr; + 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 { - color: $df-secondary; +// hero +.access-tokens-hero { display: grid; - font-size: $fs-12; - grid-template-columns: 43% 1fr $s-108 $s-12; - height: $s-40; + grid-template-rows: auto auto 1fr; + gap: $s-32; + 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: flex; - flex-direction: column; - margin-top: $s-16; - max-width: $s-1000; - padding-top: 0; + display: grid; + grid-auto-rows: $s-64; + gap: $s-16; 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: 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; + grid-template-columns: 43% 1fr auto; align-items: center; - - .icon { - height: 100%; - width: $s-16; - padding-left: $s-12; - cursor: pointer; - } - - &.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; - } + height: $s-64; + width: 100%; + padding: 0 $s-16; + border-radius: $br-8; + background-color: var(--dashboard-list-background-color); + color: var(--dashboard-list-foreground-color); } +.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 { - display: flex; - 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; +.menu-btn { + @include buttonStyle; } +// 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-close-btn { - @extend .modal-close-btn-base; - } +} + +.modal-title { + @include uppercaseTitleTipography; + color: var(--modal-title-foreground-color); +} +.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);