Conversation Colors

stylesheets/components/ChatColorPicker.scss

@@ -0,0 +1,58 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ChatColorPicker {
+  $bubble-size: 40px;
+
+  &__bubbles {
+    align-items: center;
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: repeat(auto-fit, $bubble-size);
+    justify-content: center;
+    margin: 20px 0;
+  }
+
+  &__bubble {
+    align-items: center;
+    background-color: $color-gray-05;
+    display: flex;
+    justify-content: center;
+    @include color-bubble($bubble-size);
+
+    &--selected {
+      border-color: $color-gray-75;
+
+      @include dark-theme {
+        border-color: $color-white;
+      }
+
+      &:hover {
+        &::after {
+          content: '';
+          display: block;
+          height: 24px;
+          width: 24px;
+          @include color-svg(
+            '../images/icons/v2/more-horiz-24.svg',
+            $color-gray-05
+          );
+        }
+      }
+    }
+
+    @include keyboard-mode {
+      &:focus {
+        border-color: $color-ultramarine;
+        outline: none;
+      }
+    }
+  }
+
+  &__add-icon {
+    @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-90);
+    display: block;
+    height: 24px;
+    width: 24px;
+  }
+}