penpot/frontend/src/app/main/ui/settings/subscription.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 *;
@use "../ds/typography.scss" as t;
@use "../ds/_borders.scss" as *;
@use "../ds/spacing.scss" as *;

.dashboard-section {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.dashboard-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: $s-500;
  margin-block-end: var(--sp-xxxl);
  width: $s-580;
  margin: $s-92 auto $s-120 auto;
  justify-content: center;
}

.membership-container {
  margin-block-start: var(--sp-l);
}

.membership {
  align-items: center;
  display: flex;
  margin-block-start: var(--sp-s);
}

.membership.first {
  margin-block-start: var(--sp-l);
}

.membership-date {
  @include t.use-typography("body-small");
  color: var(--color-foreground-secondary);
  margin-inline-start: var(--sp-s);
}

.subscription-member,
.penpot-member {
  @extend .button-icon;
}

.penpot-member {
  stroke: var(--icon-foreground);
}

.subscription-member {
  stroke: var(--color-badge-premium);
}

.title-section {
  @include t.use-typography("title-large");
  color: var(--color-foreground-primary);
  margin-block-end: var(--sp-xxl);
}

.plan-section-title {
  @include t.use-typography("headline-small");
  color: var(--color-foreground-primary);
}

.plan-card {
  border: $b-1 solid var(--color-foreground-secondary);
  border-radius: var(--sp-s);
  margin-block-start: var(--sp-l);
  padding: var(--sp-l);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--sp-m);
}

.plan-card-title-container {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}

.plan-title-icon {
  @extend .button-icon;
  stroke: var(--color-foreground-primary);
  height: var(--sp-xl);
  width: var(--sp-xl);
  border-radius: 6px;
  border: 1.75px solid var(--color-foreground-primary);
  stroke-width: 2.25px;
  padding: $s-1;

  svg {
    block-size: var(--sp-m);
    inline-size: var(--sp-m);
  }
}

.plan-card-title,
.plan-price-value {
  @include t.use-typography("title-medium");
  color: var(--color-foreground-primary);
}

.plan-editors {
  @include t.use-typography("body-medium");
  align-self: end;
  color: var(--color-foreground-primary);
  margin-block-end: 2px;
}

.plan-price-period {
  @include t.use-typography("body-small");
  color: var(--color-foreground-primary);
}

.benefits-list {
  margin-block: 0;
}

.benefits-title,
.benefit {
  @include t.use-typography("body-medium");
  color: var(--color-foreground-secondary);
}

.other-subscriptions {
  margin-block-start: $s-52;
}

.cta-button {
  @include t.use-typography("body-medium");
  @include buttonStyle;
  align-items: center;
  color: var(--color-accent-tertiary);
  display: flex;
  margin-block-start: var(--sp-m);
  text-align: left;
}

.cta-button svg {
  @extend .button-icon;
  height: var(--sp-l);
  width: var(--sp-l);
  stroke: var(--color-accent-tertiary);
  margin-inline-start: var(--sp-xs);
}

.icon-dropdown svg {
  transform: rotate(90deg);
}

.bottom-link {
  margin-block-start: var(--sp-xs);
}

.modal-overlay {
  @extend .modal-overlay-base;
}

.modal-dialog {
  @extend .modal-container-base;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: initial;
  min-width: $s-548;
}

.modal-dialog.subscription-success {
  min-width: $s-648;
}

.close-btn {
  @extend .modal-close-btn-base;
}

.modal-title {
  @include t.use-typography("title-large");
  margin-block-end: var(--sp-xxxl);
  color: var(--modal-title-foreground-color);
  display: flex;
  gap: var(--sp-m);
}

.subscription-title {
  margin-block-end: var(--sp-l);
}

.modal-text-medium {
  @include t.use-typography("body-medium");
}

.modal-text-cap {
  margin-inline-end: var(--sp-s);
}

.text-strikethrough {
  text-decoration: line-through;
}

.modal-text-medium strong,
.text-strikethrough strong,
.modal-text-cap strong {
  font-weight: $fw700;
}

.modal-content,
.modal-end {
  color: var(--color-foreground-secondary);
  display: flex;
  flex-direction: column;
}

.modal-success-content {
  display: flex;
  gap: $s-40;
}

.modal-footer {
  margin-block-start: $s-40;
}

.action-buttons {
  @extend .modal-action-btns;
}

.success-action-buttons {
  margin-block-start: var(--sp-l);
}

.primary-button {
  @extend .modal-accept-btn;
}

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

.modal-start {
  display: flex;
  justify-content: center;
  max-width: $s-220;

  svg {
    width: 100%;
    height: auto;
  }

  @media (max-width: 992px) {
    display: none;
  }
}

.editors-text {
  @include t.use-typography("body-medium");
  margin: 0;
}

.editors-list-warning {
  margin-inline-start: var(--sp-xl);
  margin-block: var(--sp-s);
}

.editors-list {
  @include t.use-typography("body-medium");
  list-style-position: inside;
  list-style-type: none;
  margin-inline-start: var(--sp-xl);
  max-height: $s-216;
  overflow-y: auto;
}

.input-field {
  --input-icon-padding: var(--sp-s);
  width: $s-80;
}

.error-message {
  @include t.use-typography("body-small");
  color: var(--color-foreground-error);
  margin-block-start: $s-8;
}

.editors-wrapper {
  align-items: center;
  display: flex;
  gap: var(--sp-xl);
  margin-block-start: var(--sp-l);
}

.editors-cost {
  display: flex;
  flex-direction: column;
}

.unlimited-capped-warning {
  @include t.use-typography("body-small");
  background-color: var(--color-background-tertiary);
  border-radius: var(--sp-s);
  margin-block-start: $s-40;
  padding-block: var(--sp-s);
  padding-inline: var(--sp-m);
}

.show-editors-button {
  padding-inline: 0;
}