Colors update contact name colors

stylesheets/_modules.scss

@@ -1361,10 +1361,6 @@
       @include dark-theme {
         color: $color-gray-15;
       }
-
-      @include light-theme {
-        color: $color-white-alpha-90;
-      }
     }
   }
 
@@ -1385,16 +1381,16 @@
 
   @include dark-theme() {
     border-color: $color-gray-95;
-    background: $color-gray-75;
+    background: $color-gray-90;
   }
 
   &--is-me {
     @include dark-theme() {
-      background: $color-gray-45;
+      background: $color-gray-60;
     }
 
     @include light-theme() {
-      background: $color-accent-blue;
+      background: $color-gray-25;
     }
   }
 }
@@ -1568,6 +1564,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 }
 
+.module-quote--incoming-custom,
 .module-quote--outgoing-custom {
   background-attachment: fixed;
 }

stylesheets/components/ChatColorPicker.scss

@@ -4,6 +4,21 @@
 .ChatColorPicker {
   $bubble-size: 40px;
 
+  &__container {
+    max-width: 748px;
+    margin: 0 auto;
+
+    hr {
+      @include light-theme {
+        border-color: $color-gray-15;
+      }
+
+      @include dark-theme {
+        border-color: $color-gray-75;
+      }
+    }
+  }
+
   &__bubbles {
     align-items: center;
     display: grid;
@@ -26,25 +41,23 @@
       @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 {
-      &:focus {
+      border-color: $color-ultramarine;
-        border-color: $color-ultramarine;
+      outline: none;
-        outline: none;
+    }
+
+    &--custom-selected {
+      &::after {
+        content: '';
+        display: block;
+        height: 24px;
+        width: 24px;
+        @include color-svg(
+          '../images/icons/v2/more-horiz-24.svg',
+          $color-gray-05
+        );
       }
     }
   }
@@ -55,4 +68,9 @@
     height: 24px;
     width: 24px;
   }
+
+  // specificity
+  &__modal__body.module-Modal__body {
+    overflow-x: hidden;
+  }
 }

stylesheets/components/ContactName.scss

@@ -5,147 +5,35 @@
   &--000 {
     color: #d00b0b;
     @include dark-theme {
-      color: #f76e6e;
+      color: #ff7070;
     }
   }
 
-  &--120 {
+  &--010 {
-    color: #067906;
+    color: #c13215;
     @include dark-theme {
-      color: #0ab80a;
+      color: #ff6f52;
-    }
-  }
-
-  &--240 {
-    color: #5151f6;
-    @include dark-theme {
-      color: #8b8bf9;
-    }
-  }
-
-  &--040 {
-    color: #866118;
-    @include dark-theme {
-      color: #d08f0b;
-    }
-  }
-
-  &--160 {
-    color: #067953;
-    @include dark-theme {
-      color: #09b37b;
-    }
-  }
-
-  &--280 {
-    color: #a20ced;
-    @include dark-theme {
-      color: #cb72f8;
-    }
-  }
-
-  &--080 {
-    color: #507406;
-    @include dark-theme {
-      color: #77ae09;
-    }
-  }
-
-  &--200 {
-    color: #086da0;
-    @include dark-theme {
-      color: #0da6f2;
-    }
-  }
-
-  &--320 {
-    color: #c70a88;
-    @include dark-theme {
-      color: #f76ec9;
     }
   }
 
   &--020 {
     color: #b34209;
     @include dark-theme {
-      color: #f4702f;
+      color: #f57a3d;
     }
   }
 
-  &--140 {
+  &--030 {
-    color: #06792d;
+    color: #9c5711;
     @include dark-theme {
-      color: #0ab844;
+      color: #d5920b;
     }
   }
 
-  &--240 {
+  &--040 {
-    color: #7a3df5;
+    color: #866118;
     @include dark-theme {
-      color: #ac86f9;
+      color: #d68f00;
-    }
-  }
-
-  &--060 {
-    color: #6c6c13;
-    @include dark-theme {
-      color: #a5a509;
-    }
-  }
-
-  &--180 {
-    color: #067474;
-    @include dark-theme {
-      color: #09aeae;
-    }
-  }
-
-  &--300 {
-    color: #b80ab8;
-    @include dark-theme {
-      color: #f75ff7;
-    }
-  }
-
-  &--100 {
-    color: #2d7906;
-    @include dark-theme {
-      color: #42b309;
-    }
-  }
-
-  &--220 {
-    color: #0d59f2;
-    @include dark-theme {
-      color: #6495f7;
-    }
-  }
-
-  &--340 {
-    color: #d00b4d;
-    @include dark-theme {
-      color: #f76998;
-    }
-  }
-
-  &--010 {
-    color: #c72a0a;
-    @include dark-theme {
-      color: #f67055;
-    }
-  }
-
-  &--130 {
-    color: #067919;
-    @include dark-theme {
-      color: #0ab827;
-    }
-  }
-
-  &--250 {
-    color: #6447f5;
-    @include dark-theme {
-      color: #9986f9;
     }
   }
 
@@ -156,59 +44,10 @@
     }
   }
 
-  &--170 {
+  &--060 {
-    color: #067462;
+    color: #6b6b24;
     @include dark-theme {
-      color: #09b397;
+      color: #a4a437;
-    }
-  }
-
-  &--290 {
-    color: #af0bd0;
-    @include dark-theme {
-      color: #e06ef7;
-    }
-  }
-
-  &--090 {
-    color: #3d7406;
-    @include dark-theme {
-      color: #5eb309;
-    }
-  }
-
-  &--210 {
-    color: #0a69c7;
-    @include dark-theme {
-      color: #429cf5;
-    }
-  }
-
-  &--330 {
-    color: #cb0b6b;
-    @include dark-theme {
-      color: #f76eb2;
-    }
-  }
-
-  &--030 {
-    color: #9c5711;
-    @include dark-theme {
-      color: #e97a0c;
-    }
-  }
-
-  &--150 {
-    color: #067940;
-    @include dark-theme {
-      color: #09b35e;
-    }
-  }
-
-  &--270 {
-    color: #8f2af4;
-    @include dark-theme {
-      color: #bd81f8;
     }
   }
 
@@ -219,10 +58,164 @@
     }
   }
 
+  &--080 {
+    color: #4b7000;
+    @include dark-theme {
+      color: #74ad00;
+    }
+  }
+
+  &--090 {
+    color: #3d7406;
+    @include dark-theme {
+      color: #5eb309;
+    }
+  }
+
+  &--100 {
+    color: #2d7906;
+    @include dark-theme {
+      color: #42b309;
+    }
+  }
+
+  &--110 {
+    color: #2d761e;
+    @include dark-theme {
+      color: #43b42d;
+    }
+  }
+
+  &--120 {
+    color: #067906;
+    @include dark-theme {
+      color: #0ab80a;
+    }
+  }
+
+  &--130 {
+    color: #067919;
+    @include dark-theme {
+      color: #0ab827;
+    }
+  }
+
+  &--140 {
+    color: #06792d;
+    @include dark-theme {
+      color: #0ab844;
+    }
+  }
+
+  &--150 {
+    color: #007a3d;
+    @include dark-theme {
+      color: #00b85c;
+    }
+  }
+
+  &--160 {
+    color: #067953;
+    @include dark-theme {
+      color: #00b87a;
+    }
+  }
+
+  &--170 {
+    color: #067462;
+    @include dark-theme {
+      color: #09b397;
+    }
+  }
+
+  &--180 {
+    color: #007575;
+    @include dark-theme {
+      color: #00b2b2;
+    }
+  }
+
   &--190 {
     color: #077288;
     @include dark-theme {
-      color: #0babcb;
+      color: #00aed1;
+    }
+  }
+
+  &--200 {
+    color: #006da3;
+    @include dark-theme {
+      color: #00a7fa;
+    }
+  }
+
+  &--210 {
+    color: #5b6976;
+    @include dark-theme {
+      color: #8ba1b6;
+    }
+  }
+
+  &--220 {
+    color: #2662d9;
+    @include dark-theme {
+      color: #7da1e8;
+    }
+  }
+
+  &--230 {
+    color: #2e51ff;
+    @include dark-theme {
+      color: #8599ff;
+    }
+  }
+
+  &--240 {
+    color: #5151f6;
+    @include dark-theme {
+      color: #9494ff;
+    }
+  }
+
+  &--250 {
+    color: #6447f5;
+    @include dark-theme {
+      color: #a18ff9;
+    }
+  }
+
+  &--260 {
+    color: #7a3df5;
+    @include dark-theme {
+      color: #af8af9;
+    }
+  }
+
+  &--270 {
+    color: #8f2af4;
+    @include dark-theme {
+      color: #bf80ff;
+    }
+  }
+
+  &--280 {
+    color: #a20ced;
+    @include dark-theme {
+      color: #cf7cf8;
+    }
+  }
+
+  &--290 {
+    color: #af0bd0;
+    @include dark-theme {
+      color: #e06ef7;
+    }
+  }
+
+  &--300 {
+    color: #b814b8;
+    @include dark-theme {
+      color: #f65af6;
     }
   }
 
@@ -233,24 +226,31 @@
     }
   }
 
-  &--110 {
+  &--320 {
-    color: #1a7906;
+    color: #c70a88;
     @include dark-theme {
-      color: #27b80a;
+      color: #f76ec9;
     }
   }
 
-  &--230 {
+  &--330 {
-    color: #3454f4;
+    color: #cc0066;
     @include dark-theme {
-      color: #778df8;
+      color: #f76eb2;
+    }
+  }
+
+  &--340 {
+    color: #d00b4d;
+    @include dark-theme {
+      color: #ff6b9c;
     }
   }
 
   &--350 {
     color: #d00b2c;
     @include dark-theme {
-      color: #f76e85;
+      color: #f77389;
     }
   }
 }

stylesheets/components/CustomColorEditor.scss

@@ -37,10 +37,19 @@
       hsl(270, 100%, 50%),
       hsl(360, 100%, 45%)
     );
+    border-radius: 4px;
     margin-top: 8px;
     margin-bottom: 30px;
   }
 
+  &__hue-slider__handle {
+    &:focus {
+      outline: none;
+      border: 2px solid $color-white;
+      border-radius: 8px;
+    }
+  }
+
   &__saturation-slider.Slider {
     margin-top: 8px;
     margin-bottom: 30px;

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(
+                  backgroundColor: getHSL({
-                    color[selectedColorKnob] || ULTRAMARINE_ISH_VALUES
+                    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')}

ts/test-both/state/selectors/conversations_test.ts

@@ -1861,13 +1861,13 @@ describe('both/state/selectors/conversations', () => {
 
       const contactNameColorSelector = getContactNameColorSelector(state);
 
-      assert.equal(contactNameColorSelector('group', 'gfe'), '000');
+      assert.equal(contactNameColorSelector('group', 'gfe'), '200');
-      assert.equal(contactNameColorSelector('group', 'jih'), '120');
+      assert.equal(contactNameColorSelector('group', 'jih'), '150');
-      assert.equal(contactNameColorSelector('group', 'mlk'), '240');
+      assert.equal(contactNameColorSelector('group', 'mlk'), '010');
-      assert.equal(contactNameColorSelector('group', 'pon'), '040');
+      assert.equal(contactNameColorSelector('group', 'pon'), '300');
-      assert.equal(contactNameColorSelector('group', 'srq'), '160');
+      assert.equal(contactNameColorSelector('group', 'srq'), '210');
-      assert.equal(contactNameColorSelector('group', 'vut'), '280');
+      assert.equal(contactNameColorSelector('group', 'vut'), '090');
-      assert.equal(contactNameColorSelector('group', 'zyx'), '080');
+      assert.equal(contactNameColorSelector('group', 'zyx'), '330');
     });
   });
 });

ts/types/Colors.ts

@@ -43,6 +43,18 @@ export const ConversationColors = [
 ] as const;
 
 export const ContactNameColors = [
+  '200',
+  '150',
+  '010',
+  '300',
+  '210',
+  '090',
+  '330',
+  '230',
+  '030',
+  '180',
+  '340',
+  '270',
   '000',
   '120',
   '240',
@@ -50,35 +62,23 @@ export const ContactNameColors = [
   '160',
   '280',
   '080',
-  '200',
   '320',
   '020',
   '140',
   '260',
   '060',
-  '180',
+  '350',
-  '300',
   '100',
-  '220',
+  '290',
-  '340',
-  '010',
   '130',
-  '250',
+  '220',
   '050',
   '170',
-  '290',
+  '250',
-  '090',
-  '210',
-  '330',
-  '030',
-  '150',
-  '270',
   '070',
   '190',
   '310',
   '110',
-  '230',
-  '350',
 ];
 
 export type ContactNameColorType = typeof ContactNameColors[number];