Move Profile Editor into the new Settings Tab

stylesheets/components/UsernameEditor.scss

@@ -0,0 +1,169 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+@use '../mixins';
+@use '../variables';
+
+.UsernameEditor {
+  &__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;
+      }
+    }
+  }
+
+  &__button-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    padding-block: 1em 16px;
+    gap: 8px;
+
+    .module-Button:not(:first-child) {
+      margin-inline-start: 4px;
+    }
+  }
+
+  &__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;
+  }
+}