Username onboarding

2026-05-08 08:58:38 +01:00 · 2023-02-13 10:51:41 -08:00
parent 5626cea9c3
commit f9aaf30a32
17 changed files with 309 additions and 3 deletions
@@ -0,0 +1,107 @@
+// 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;
+      -webkit-mask-size: 100%;
+      content: '';
+
+      @include light-theme {
+        background-color: $color-gray-75;
+      }
+
+      @include dark-theme {
+        background-color: $color-gray-15;
+      }
+
+      -webkit-mask: url(../images/icons/v2/at-24.svg) no-repeat center;
+    }
+  }
+
+  &__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 {
+        background: url(../images/icons/v2/link_color_32.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;
+  }
+}