From e033fd2cf304845943e06cebea07342512bcfe4a Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 1 Oct 2021 12:16:44 -0400
Subject: [PATCH] Fix background bleed through on color bubbles

---
 stylesheets/components/ChatColorPicker.scss | 5 ++++-
 ts/components/ChatColorPicker.tsx           | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 2549e74327..102da35aec 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -30,7 +30,6 @@
 
   &__bubble {
     align-items: center;
-    background-color: $color-gray-05;
     display: flex;
     justify-content: center;
     @include color-bubble($bubble-size);
@@ -60,6 +59,10 @@
         );
       }
     }
+
+    &--custom {
+      background-color: $color-gray-05;
+    }
   }
 
   &__add-icon {
diff --git a/ts/components/ChatColorPicker.tsx b/ts/components/ChatColorPicker.tsx
index ea32805d3f..672624eb76 100644
--- a/ts/components/ChatColorPicker.tsx
+++ b/ts/components/ChatColorPicker.tsx
@@ -223,7 +223,7 @@ export const ChatColorPicker = ({
         })}
         <div
           aria-label={i18n('ChatColorPicker__custom-color--label')}
-          className="ChatColorPicker__bubble"
+          className="ChatColorPicker__bubble ChatColorPicker__bubble--custom"
           onClick={() =>
             setCustomColorToEdit({ id: undefined, value: undefined })
           }