Colors update contact name colors

2021-06-01 19:37:12 -04:00 · 2021-06-01 19:37:12 -04:00 · 6d7849e6c7
commit 6d7849e6c7
parent 36c15fead4
9 changed files with 274 additions and 237 deletions
--- a/stylesheets/_modules.scss
+++ b/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;
 }
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/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 {
-        border-color: $color-ultramarine;
-        outline: none;
+    &:focus {
+      border-color: $color-ultramarine;
+      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;
+  }
 }
--- a/stylesheets/components/ContactName.scss
+++ b/stylesheets/components/ContactName.scss
@ -5,147 +5,35 @@
  &--000 {
    color: #d00b0b;
    @include dark-theme {
-      color: #f76e6e;
+      color: #ff7070;
    }
  }

-  &--120 {
-    color: #067906;
+  &--010 {
+    color: #c13215;
    @include dark-theme {
-      color: #0ab80a;
-    }
-  }
-
-  &--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;
+      color: #ff6f52;
    }
  }

  &--020 {
    color: #b34209;
    @include dark-theme {
-      color: #f4702f;
+      color: #f57a3d;
    }
  }

-  &--140 {
-    color: #06792d;
+  &--030 {
+    color: #9c5711;
    @include dark-theme {
-      color: #0ab844;
+      color: #d5920b;
    }
  }

-  &--240 {
-    color: #7a3df5;
+  &--040 {
+    color: #866118;
    @include dark-theme {
-      color: #ac86f9;
-    }
-  }
-
-  &--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;
+      color: #d68f00;
    }
  }

@ -156,59 +44,10 @@
    }
  }

-  &--170 {
-    color: #067462;
+  &--060 {
+    color: #6b6b24;
    @include dark-theme {
-      color: #09b397;
-    }
-  }
-
-  &--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;
+      color: #a4a437;
    }
  }

@ -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 {
-    color: #1a7906;
+  &--320 {
+    color: #c70a88;
    @include dark-theme {
-      color: #27b80a;
+      color: #f76ec9;
    }
  }

-  &--230 {
-    color: #3454f4;
+  &--330 {
+    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;
    }
  }
 }
--- a/stylesheets/components/CustomColorEditor.scss
+++ b/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;
--- a/ts/components/ChatColorPicker.tsx
+++ b/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')}
--- a/ts/components/CustomColorEditor.tsx
+++ b/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"
--- a/ts/components/GlobalModalContainer.tsx
+++ b/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')}
--- a/ts/test-both/state/selectors/conversations_test.ts
+++ b/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', 'jih'), '120');
-      assert.equal(contactNameColorSelector('group', 'mlk'), '240');
-      assert.equal(contactNameColorSelector('group', 'pon'), '040');
-      assert.equal(contactNameColorSelector('group', 'srq'), '160');
-      assert.equal(contactNameColorSelector('group', 'vut'), '280');
-      assert.equal(contactNameColorSelector('group', 'zyx'), '080');
+      assert.equal(contactNameColorSelector('group', 'gfe'), '200');
+      assert.equal(contactNameColorSelector('group', 'jih'), '150');
+      assert.equal(contactNameColorSelector('group', 'mlk'), '010');
+      assert.equal(contactNameColorSelector('group', 'pon'), '300');
+      assert.equal(contactNameColorSelector('group', 'srq'), '210');
+      assert.equal(contactNameColorSelector('group', 'vut'), '090');
+      assert.equal(contactNameColorSelector('group', 'zyx'), '330');
    });
  });
 });
--- a/ts/types/Colors.ts
+++ b/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',
-  '300',
+  '350',
  '100',
-  '220',
-  '340',
-  '010',
+  '290',
  '130',
-  '250',
+  '220',
  '050',
  '170',
-  '290',
-  '090',
-  '210',
-  '330',
-  '030',
-  '150',
-  '270',
+  '250',
  '070',
  '190',
  '310',
  '110',
-  '230',
-  '350',
 ];

 export type ContactNameColorType = typeof ContactNameColors[number];