Support for creating New Groups

stylesheets/components/AvatarInput.scss

@@ -0,0 +1,77 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.module-AvatarInput {
+  @include button-reset;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  background: none;
+
+  &__avatar {
+    @include button-reset;
+
+    margin-top: 4px;
+    display: flex;
+    border-radius: 100%;
+    height: 80px;
+    width: 80px;
+    transition: background-color 100ms ease-out;
+
+    &--nothing {
+      align-items: stretch;
+      background: $color-white;
+
+      &::before {
+        flex-grow: 1;
+        content: '';
+        display: block;
+        @include color-svg(
+          '../images/icons/v2/camera-outline-24.svg',
+          $ultramarine-ui-light,
+          false
+        );
+        -webkit-mask-size: 24px 24px;
+      }
+    }
+
+    &--loading {
+      align-items: center;
+      background: $color-black;
+    }
+
+    &--has-image {
+      background-size: cover;
+      background-position: center center;
+    }
+  }
+
+  &__label {
+    @include button-reset;
+    @include font-body-1;
+
+    padding-bottom: 4px;
+    padding-top: 4px;
+
+    @include light-theme {
+      color: $ultramarine-ui-light;
+    }
+
+    @include dark-theme {
+      color: $ultramarine-ui-dark;
+    }
+  }
+
+  @include keyboard-mode {
+    &:focus {
+      .module-AvatarInput__avatar {
+        box-shadow: inset 0 0 0 2px $ultramarine-ui-light;
+      }
+
+      .module-AvatarInput__label {
+        @include font-body-1-bold;
+      }
+    }
+  }
+}