signal-desktop/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss

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

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

.module-InstallScreenQrCodeNotScannedStep {
  @include mixins.install-screen;

  &__contents {
    $base-max-width: 760px;

    align-items: center;
    background: variables.$color-white;
    border-radius: 8px;
    color: variables.$color-black;
    display: flex;
    flex-direction: row;
    animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in;
    position: relative;
    top: 0;

    @include mixins.light-theme {
      max-width: $base-max-width;
      padding: 22px;
    }

    @include mixins.dark-theme {
      max-width: $base-max-width + 44px;
      padding: 44px;
      margin-top: 44px; // Avoids overlap with the Signal logo
    }
  }

  &__qr-code {
    $size: 256px;

    align-items: center;
    border: 1.5px solid transparent;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-block: 8px;
    margin-inline: 8px 38px;
    min-height: $size;
    min-width: $size;
    width: $size;

    &--loaded {
      background: variables.$color-white;
    }

    &--load-failed {
      @include mixins.font-subtitle;
      border-color: variables.$color-gray-05;
      border-radius: 10px;
      color: variables.$color-gray-60;
    }

    &__link {
      @include mixins.button-reset;
      & {
        @include mixins.font-body-2-bold;

        display: flex;
        gap: 4px;
        align-items: center;

        color: variables.$color-ultramarine;
        margin-block-start: 16px;
      }

      &::before {
        @include mixins.color-svg(
          '../images/icons/v3/refresh/refresh-bold.svg',
          variables.$color-ultramarine
        );
        & {
          content: '';
          display: block;
          height: 16px;
          width: 16px;
        }
      }
    }

    &__code {
      height: $size;
      width: $size;
      animation: 1s module-InstallScreenQrCodeNotScannedStep__slide-in;
      position: relative;
    }

    &__error-message {
      text-align: center;
      @include mixins.font-body-2;

      &::before {
        @include mixins.color-svg(
          '../images/icons/v3/error/error-circle.svg',
          variables.$color-accent-red
        );
        & {
          content: '';
          display: block;
          height: 22px;
          margin-block: 0 8px;
          margin-inline: auto;
          width: 22px;
        }
      }

      & {
        margin-inline: 24px;
      }
    }

    &__error-message p {
      margin-block: 0;
    }

    &__get-help {
      @include mixins.font-body-2-bold;

      display: flex;
      gap: 4px;
      align-items: center;

      margin-block-start: 16px;

      color: variables.$color-ultramarine;
      text-decoration: none;

      &::before {
        @include mixins.color-svg(
          '../images/icons/v3/open/open-compact-bold.svg',
          variables.$color-ultramarine
        );
        & {
          content: '';
          display: block;
          height: 16px;
          width: 16px;
        }
      }
    }
  }

  ol {
    @include mixins.font-body-1;
    line-height: 26px;
    list-style-position: inside;
    padding-inline-start: 0;
  }

  a {
    // We want the right link color in dark mode. This is a no-op in light mode.
    color: variables.$color-ultramarine;
  }
}

@keyframes module-InstallScreenQrCodeNotScannedStep__slide-in {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }

  to {
    transform: translateY(0px);
    opacity: 1;
  }
}