Edit profile

2021-07-19 15:26:06 -04:00 · 2021-07-19 15:26:06 -04:00 · cd35a29638
commit cd35a29638
parent f14c426170
42 changed files with 2124 additions and 356 deletions
--- a/stylesheets/components/ProfileEditor.scss
+++ b/stylesheets/components/ProfileEditor.scss
@ -0,0 +1,84 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ProfileEditor {
+  padding-bottom: 48px;
+  position: relative;
+
+  &__buttons {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+
+    button {
+      margin-left: 12px;
+    }
+  }
+
+  &__icon {
+    &--container {
+      align-items: center;
+      display: flex;
+      font-size: 24px;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
+
+    &::after {
+      -webkit-mask-size: 100%;
+      content: '';
+      display: block;
+      height: 24px;
+      width: 24px;
+
+      @include light-theme {
+        background-color: $color-gray-75;
+      }
+
+      @include dark-theme {
+        background-color: $color-gray-15;
+      }
+    }
+
+    &--name {
+      &::after {
+        -webkit-mask: url(../images/icons/v2/profile-outline-20.svg) no-repeat
+          center;
+      }
+    }
+
+    &--bio {
+      &::after {
+        -webkit-mask: url(../images/icons/v2/compose-outline-24.svg) no-repeat
+          center;
+      }
+    }
+  }
+
+  &__about-input {
+    &__icon {
+      left: 4px;
+    }
+
+    &__input--with-icon {
+      padding-left: 32px;
+    }
+  }
+
+  &__row {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &__divider {
+    border-color: $color-gray-15;
+    border-style: solid;
+  }
+
+  &__info {
+    @include font-body-2;
+    color: $color-gray-60;
+    margin-top: 16px;
+  }
+}