signal-desktop/stylesheets/components/EditUsernameModalBody.scss

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

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

.EditUsernameModalBody {
  &__header {
    display: flex;
    flex-direction: column;
    align-items: center;

    &__large-at {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 64px;
      height: 64px;
      border-radius: 32px;

      margin-top: 21px;
      margin-bottom: 16px;

      @include mixins.light-theme {
        background-color: variables.$color-gray-04;
      }

      @include mixins.dark-theme {
        background-color: variables.$color-gray-65;
      }

      &::after {
        display: block;
        width: 36px;
        height: 36px;
        content: '';

        @include mixins.light-theme {
          @include mixins.color-svg(
            '../images/icons/v3/at/at.svg',
            variables.$color-gray-75
          );
        }

        @include mixins.dark-theme {
          @include mixins.color-svg(
            '../images/icons/v3/at/at.svg',
            variables.$color-gray-15
          );
        }
      }
    }

    &__preview {
      margin-bottom: 2px;
    }
  }

  &__divider {
    width: 2px;
    height: 20px;
    margin-block: 0;
    margin-inline: 12px;

    @include mixins.light-theme {
      background-color: variables.$color-gray-20;
    }

    @include mixins.dark-theme {
      background-color: variables.$color-gray-45;
    }
  }

  &__discriminator__input {
    text-align: end;
  }

  &__error {
    @include mixins.font-body-2;
    margin-block: 8px 12px;
    margin-inline: 6px;
    font-size: 12px;
    line-height: 17px;

    color: variables.$color-accent-red;
  }

  &__info {
    @include mixins.font-body-2;
    font-size: 12px;
    line-height: 17px;
    margin-block: 12px;
    margin-inline: 6px;

    @include mixins.light-theme {
      color: variables.$color-gray-60;
    }
    @include mixins.dark-theme {
      color: variables.$color-gray-25;
    }

    // To account for missing error section: 8px top margin, 17px line height,
    //   12px bottom margin.
    &--no-error {
      margin-bottom: 37px;
    }
  }

  &__learn-more-button {
    @include mixins.button-reset;
    & {
      color: variables.$color-accent-blue;
    }
  }

  &__learn-more {
    &__title.module-Modal__title {
      display: flex;
      align-items: center;
    }

    &__hashtag {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-inline-end: 12px;

      -webkit-mask-size: 100%;
      content: '';

      @include mixins.light-theme {
        background-color: variables.$color-gray-75;
      }

      @include mixins.dark-theme {
        background-color: variables.$color-gray-15;
      }

      & {
        -webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
      }
    }
  }

  &__input__container.Input__container {
    /**
     * Discriminator should always be to the right of the nickname.
     * This overrides the default direction of the page.
     */
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    direction: ltr;

    margin-block-end: 8px;
  }
}