signal-desktop/stylesheets/components/UsernameOnboardingModalBody.scss

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

.UsernameOnboardingModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;

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

    width: 48px;
    height: 48px;
    border-radius: 24px;

    margin-bottom: 12px;

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

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

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

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

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

  &__title {
    @include font-title-2;
    margin-bottom: 20px;
    max-width: 240px;
    text-align: center;
  }

  &__row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    &__icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;

      &--number {
        background: url(../images/icons/v2/number_color_32.svg);
      }

      &--link {
        width: 32px;
        height: 34px;
        background: url(../images/qr-and-link.svg);
      }

      &--lock {
        background: url(../images/icons/v2/lock_color_32.svg);
      }
    }

    &__body {
      @include font-body-2;

      @include light-theme {
        color: $color-gray-60;
      }

      @include dark-theme {
        color: $color-gray-25;
      }

      max-width: 248px;
    }

    &--center {
      justify-content: center;
    }
  }

  &__learn-more {
    text-decoration: none;
    font-weight: 600;
  }

  &__submit {
    width: 100%;
    max-width: 296px;
    margin-bottom: 16px;
  }
}