Display user badges

stylesheets/components/Avatar.scss

@@ -105,4 +105,11 @@
   &__spinner-container {
     padding: 4px;
   }
+
+  &__badge {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
 }

stylesheets/components/BadgeCarouselIndex.scss

@@ -0,0 +1,35 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.BadgeCarouselIndex {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  row-gap: 10px;
+  column-gap: 8px;
+
+  &__dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    margin-top: 8px;
+
+    @include light-theme {
+      background: $color-black-alpha-20;
+    }
+
+    @include dark-theme {
+      background: $color-white-alpha-20;
+    }
+
+    &--selected {
+      @include light-theme {
+        background: $color-ultramarine;
+      }
+
+      @include dark-theme {
+        background: $color-ultramarine-light;
+      }
+    }
+  }
+}

stylesheets/components/BadgeDialog.scss

@@ -0,0 +1,111 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.BadgeDialog {
+  @mixin fixed-height($height) {
+    height: $height;
+    overflow-y: auto;
+  }
+
+  user-select: none;
+
+  // We use this selector for specificity.
+  &.module-Modal {
+    max-width: 420px;
+  }
+
+  &__body {
+    display: flex;
+    align-items: center;
+  }
+
+  &__nav {
+    $light-color: $color-gray-65;
+    $dark-color: $color-gray-05;
+
+    @include button-reset;
+    align-items: center;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    padding: 3px 0;
+
+    &[disabled] {
+      visibility: hidden;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      width: 20px;
+      height: 20px;
+    }
+
+    @include light-theme {
+      &:hover,
+      &:focus {
+        background: $color-gray-02;
+      }
+      &:active {
+        background: $color-gray-05;
+      }
+    }
+    @include dark-theme {
+      &:hover,
+      &:focus {
+        background: $color-gray-80;
+      }
+      &:active {
+        background: $color-gray-75;
+      }
+    }
+
+    &--previous::before {
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-left-24.svg',
+          $light-color
+        );
+      }
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-left-24.svg',
+          $dark-color
+        );
+      }
+    }
+
+    &--next::before {
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-right-24.svg',
+          $light-color
+        );
+      }
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-right-24.svg',
+          $dark-color
+        );
+      }
+    }
+  }
+
+  &__main {
+    flex-grow: 1;
+    text-align: center;
+    padding: 24px 10px;
+  }
+
+  &__name {
+    @include font-title-2;
+    @include fixed-height(2.5rem);
+    margin-top: 24px;
+    margin-bottom: 8px;
+  }
+
+  &__description {
+    @include font-body-1;
+    @include fixed-height(3.5rem);
+  }
+}