signal-desktop/stylesheets/components/PreferencesDonations.scss

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.PreferencesDonations {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0;
  padding-inline: 0;
  margin-inline-start: 24px;
  margin-inline-end: 24px;

  &__title {
    @include mixins.font-title-medium;
    margin-bottom: 16px;
  }

  &__description {
    @include mixins.font-body-2;
    text-align: center;
    max-width: 320px;
    margin-bottom: 24px;
    color: light-dark(
      variables.$color-black-alpha-50,
      variables.$color-white-alpha-50
    );

    &__read-more {
      @include mixins.button-reset;

      & {
        color: variables.$color-ultramarine;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__donate-button {
    margin-bottom: 24px;
  }

  &__separator {
    width: 100%;
    height: 0.5px;
    border: none;
    margin: 0;
    background-color: light-dark(
      variables.$color-black-alpha-12,
      variables.$color-white-alpha-12
    );
  }

  &__section-header {
    @include mixins.font-body-2-bold;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 8px;
    color: light-dark(
      variables.$color-black-alpha-85,
      variables.$color-white-alpha-85
    );
  }

  &__list {
    margin-top: 24px;
    width: 100%;
  }

  &__list-item {
    @include mixins.button-reset;

    & {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 12px;
      padding-block: 12px;
      padding-inline: 24px;
      border-radius: 5px;
    }

    &:hover {
      background: light-dark(
        variables.$color-gray-02,
        variables.$color-gray-80
      );
    }

    @include mixins.keyboard-mode {
      &:focus {
        outline: 2px solid variables.$color-ultramarine;
      }
    }

    &__icon {
      width: 20px;
      height: 20px;

      &--receipts::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        @include mixins.color-svg(
          '../images/icons/v3/receipt/receipt.svg',
          light-dark(variables.$color-gray-75, variables.$color-gray-15)
        );
      }

      &--faqs::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        @include mixins.color-svg(
          '../images/icons/v3/help/help-light.svg',
          light-dark(variables.$color-gray-75, variables.$color-gray-15)
        );
      }
    }

    &__text {
      @include mixins.font-body-1;
      flex: 1;
      color: light-dark(variables.$color-gray-90, variables.$color-gray-05);
    }

    &__chevron {
      &::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        @include mixins.color-svg(
          '../images/icons/v3/chevron/chevron-right.svg',
          light-dark(variables.$color-gray-45, variables.$color-gray-25)
        );
      }
    }
  }
}

// Receipts page specific styles
.PreferencesDonations--receiptList {
  &__info {
    margin-inline: 24px;
    margin-bottom: 24px;

    &__text {
      @include mixins.font-subtitle;
      color: light-dark(
        variables.$color-black-alpha-50,
        variables.$color-white-alpha-50
      );
    }
  }

  &-yearContainer {
    width: 100%;
  }

  &__year-header {
    @include mixins.font-body-2-bold;
    color: light-dark(
      variables.$color-black-alpha-85,
      variables.$color-white-alpha-85
    );
    padding-block: 8px;
    padding-inline: 24px;
    background-color: light-dark(
      variables.$color-white,
      variables.$color-gray-95
    );
  }

  &__list {
    width: 100%;
  }

  &__receipt-item {
    @include mixins.button-reset;

    & {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-block: 8px;
      padding-inline: 24px;
      border-radius: 5px;
      width: 100%;
    }

    &:hover {
      background-color: light-dark(
        variables.$color-gray-02,
        variables.$color-gray-80
      );
    }

    // Placeholder for icon depending on receipt type
    &__icon {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      background-color: variables.$color-ultramarine-pale;
      flex-shrink: 0;
    }

    &__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    &__date {
      @include mixins.font-body-1;
      color: light-dark(
        variables.$color-black-alpha-85,
        variables.$color-white-alpha-85
      );
    }

    &__type {
      @include mixins.font-subtitle;
      color: light-dark(
        variables.$color-black-alpha-50,
        variables.$color-white-alpha-50
      );
    }

    &__amount {
      @include mixins.font-body-1;
      color: light-dark(
        variables.$color-black-alpha-50,
        variables.$color-white-alpha-50
      );
    }
  }

  &__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    margin: auto;

    &__title {
      @include mixins.font-body-2;
      color: light-dark(
        variables.$color-black-alpha-50,
        variables.$color-white-alpha-50
      );
    }

    &__description {
      @include mixins.font-caption;
      color: light-dark(
        variables.$color-black-alpha-50,
        variables.$color-white-alpha-50
      );
      max-width: 300px;
    }
  }
}

.PreferencesDonations__ReceiptModal {
  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  &__logo-container {
    margin-bottom: 16px;
  }

  &__logo {
    width: 100px;
    height: 28.571px;
    margin-bottom: 24px;
    background-image: url('../images/signal-logo-and-wordmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  &__amount {
    font-size: 40px;
    letter-spacing: 0.07px;
    color: light-dark(variables.$color-gray-90, variables.$color-gray-05);
    margin-bottom: 24px;
  }

  &__separator {
    width: 100%;
    height: 0.5px;
    border: none;
    margin: 0;
    background-color: light-dark(
      variables.$color-black-alpha-12,
      variables.$color-white-alpha-12
    );
  }

  &__details {
    width: 100%;
    text-align: start;
  }

  &__detail-item {
    padding-block: 10px;
    padding-inline: 0;
  }

  &__detail-label {
    @include mixins.font-body-1;
    color: light-dark(
      variables.$color-black-alpha-85,
      variables.$color-white-alpha-85
    );
    margin-bottom: 2px;
  }

  &__detail-value {
    @include mixins.font-subtitle;
    color: light-dark(
      variables.$color-black-alpha-50,
      variables.$color-white-alpha-50
    );
  }
}