Colors update contact name colors

ts/components/ChatColorPicker.tsx

@@ -95,7 +95,7 @@ export const ChatColorPicker = ({
   }
 
   return (
-    <>
+    <div className="ChatColorPicker__container">
       {customColorToEdit ? renderCustomColorEditorWrapper() : null}
       {confirmResetAll ? (
         <ConfirmationDialog
@@ -173,7 +173,7 @@ export const ChatColorPicker = ({
         })}
         <div
           aria-label={i18n('ChatColorPicker__custom-color--label')}
-          className="ChatColorPicker__bubble ChatColorPicker__bubble"
+          className="ChatColorPicker__bubble"
           onClick={() =>
             setCustomColorToEdit({ id: undefined, value: undefined })
           }
@@ -201,7 +201,7 @@ export const ChatColorPicker = ({
           setConfirmResetAll(true);
         }}
       />
-    </>
+    </div>
   );
 };
 
@@ -248,7 +248,9 @@ const CustomColorBubble = ({
   const bubble = (
     <div
       aria-label={colorId}
-      className={classNames('ChatColorPicker__bubble', {
+      className={classNames({
+        ChatColorPicker__bubble: true,
+        'ChatColorPicker__bubble--custom-selected': isSelected,
         'ChatColorPicker__bubble--selected': isSelected,
       })}
       onClick={handleClick}
@@ -373,6 +375,7 @@ const CustomColorEditorWrapper = ({
       <Modal
         hasXButton
         i18n={i18n}
+        moduleClassName="ChatColorPicker__modal"
         noMouseClose
         onClose={onClose}
         title={i18n('CustomColorEditor__title')}

ts/components/CustomColorEditor.tsx

@@ -68,6 +68,13 @@ export const CustomColorEditor = ({
               end: ULTRAMARINE_ISH_VALUES,
             });
           }
+
+          if (selectedTab === TabViews.Solid && color.end) {
+            setColor({
+              ...color,
+              end: undefined,
+            });
+          }
         }}
         tabs={[
           {
@@ -85,6 +92,7 @@ export const CustomColorEditor = ({
             <div className="CustomColorEditor__messages">
               <SampleMessageBubbles
                 backgroundStyle={getCustomColorStyle(color)}
+                color="custom"
                 i18n={i18n}
                 includeAnotherBubble
               />
@@ -114,9 +122,10 @@ export const CustomColorEditor = ({
               {i18n('CustomColorEditor__hue')}
               <Slider
                 handleStyle={{
-                  backgroundColor: getHSL(
-                    color[selectedColorKnob] || ULTRAMARINE_ISH_VALUES
-                  ),
+                  backgroundColor: getHSL({
+                    hue,
+                    saturation: 100,
+                  }),
                 }}
                 label={i18n('CustomColorEditor__hue')}
                 moduleClassName="CustomColorEditor__hue-slider"

ts/components/GlobalModalContainer.tsx

@@ -28,6 +28,7 @@ export const GlobalModalContainer = ({
       <Modal
         hasXButton
         i18n={i18n}
+        moduleClassName="ChatColorPicker__modal"
         noMouseClose
         onClose={toggleChatColorEditor}
         title={i18n('ChatColorPicker__global-chat-color')}