0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 10:41:29 -05:00

♻️ Refactor access tokens file

This commit is contained in:
Eva Marco 2024-03-07 12:33:49 +01:00 committed by Andrey Antukh
parent bc04eaa910
commit 8b6be5b62e
2 changed files with 125 additions and 188 deletions

View file

@ -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)}])]])]))

View file

@ -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);