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

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "common/refactor/common-refactor.scss" as *;

// 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;
}

// hero
.access-tokens-hero {
  display: grid;
  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;
  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 {
  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 {
  display: grid;
  grid-template-columns: 43% 1fr auto;
  align-items: center;
  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);
}

.menu-btn {
  @include buttonStyle;
}

// Create access token modal
.modal-overlay {
  @extend .modal-overlay-base;
}

.modal-container {
  @extend .modal-container-base;
  min-width: $s-408;
}

.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-content {
  @include flexColumn;
  gap: $s-24;
  @include bodySmallTypography;
  margin-bottom: $s-24;
}

.select-title {
  @include bodySmallTypography;
  color: var(--modal-title-foreground-color);
}

.custon-input-wrapper {
  @include flexRow;
  border-radius: $br-8;
  height: $s-32;
  background-color: var(--input-background-color);
}

.custom-input-token {
  @extend .input-element;
  @include bodySmallTypography;
  margin: 0;
  flex-grow: 1;
  &:focus {
    outline: none;
    border: $s-1 solid var(--input-border-color-active);
  }
}

.token-value {
  @include textEllipsis;
  @include bodySmallTypography;
  flex-grow: 1;
}

.copy-btn {
  @include flexCenter;
  @extend .button-secondary;
  height: $s-28;
  width: $s-28;
}

.clipboard-icon {
  @extend .button-icon-small;
}

.token-created-info {
  color: var(--modal-text-foreground-color);
}

.action-buttons {
  @extend .modal-action-btns;
  button {
    @extend .modal-accept-btn;
  }
}

.cancel-button {
  @extend .modal-cancel-btn;
}