From 30f18a849fb53fc83a33ceba624df1fafeed05ae Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Tue, 27 Jun 2023 10:27:09 -0400
Subject: [PATCH] [web] Introduce `large` variant of `ColorSelector`

Summary:
In this diff we introduce `size` prop to `ColorSelector` component and implement styling/layout for `large` variant.

This is for use in the `EmojiAvatarSelection` component.

Test Plan:
Here's how it looks:

{F607941}

Also ensured that other usages of `ColorSelector` in `web` continue to appear as expected (eg ThreadSettings)

Reviewers: ashoat, ginsu, rohan

Reviewed By: rohan

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8313
---
 web/avatars/emoji-avatar-selection-modal.css      |  5 +----
 web/avatars/emoji-avatar-selection-modal.react.js |  3 ++-
 web/modals/threads/color-selector-button.css      | 12 ++++++++++++
 web/modals/threads/color-selector-button.react.js | 14 +++++++++++---
 web/modals/threads/color-selector.css             |  4 ++++
 web/modals/threads/color-selector.react.js        | 14 +++++++++++---
 6 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
index d248652210..645728b2df 100644
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -15,6 +15,7 @@ div.modalBody {
 }
 
 div.tabBody {
+  height: 300px;
   padding-top: 20px;
   display: flex;
   justify-content: center;
@@ -33,10 +34,6 @@ div.emojiPickerContainer {
   align-items: center;
 }
 
-div.colorSelectorContainer {
-  margin: 20px 60px;
-}
-
 div.saveButtonContainer {
   display: flex;
   flex-direction: column;
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
index c92d398177..b9f889a320 100644
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -139,10 +139,11 @@ function EmojiAvatarSelectionModal(): React.Node {
             </div>
           </Tabs.Item>
           <Tabs.Item id="color" header="Color">
-            <div className={css.colorSelectorContainer}>
+            <div className={css.tabBody}>
               <ColorSelector
                 currentColor={pendingAvatarColor}
                 onColorSelection={onColorSelection}
+                size="large"
               />
             </div>
           </Tabs.Item>
diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
index dbdeff1fe1..be04a8c840 100644
--- a/web/modals/threads/color-selector-button.css
+++ b/web/modals/threads/color-selector-button.css
@@ -4,6 +4,12 @@
   border-radius: 24px;
 }
 
+.containerLarge {
+  height: 80px;
+  width: 80px;
+  border-radius: 40px;
+}
+
 .active,
 .container:hover {
   background-color: var(--color-selector-active-bg);
@@ -15,3 +21,9 @@ div.colorSplotch {
   border-radius: 16px;
   cursor: pointer;
 }
+
+div.colorSplotchLarge {
+  height: 60px;
+  width: 60px;
+  border-radius: 30px;
+}
diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
index 6d64e2849b..010756aa17 100644
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -11,15 +11,23 @@ type ColorSelectorButtonProps = {
   +color: string,
   +currentColor: string,
   +onColorSelection: (hex: string) => void,
+  +size?: 'small' | 'large',
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, currentColor, onColorSelection } = props;
+  const { color, currentColor, onColorSelection, size } = props;
 
   const active = tinycolor.equals(color, currentColor);
-  const containerClassName = classNames(css.container, {
+  const containerClassName = classNames({
+    [css.container]: true,
+    [css.containerLarge]: size === 'large',
     [css.active]: active,
   });
 
+  const colorSplotchClassName = classNames({
+    [css.colorSplotch]: true,
+    [css.colorSplotchLarge]: size === 'large',
+  });
+
   const colorSplotchStyle = React.useMemo(
     () => ({
       backgroundColor: `#${color}`,
@@ -33,7 +41,7 @@ function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
 
   return (
     <Button onClick={onColorSplotchClicked} className={containerClassName}>
-      <div className={css.colorSplotch} style={colorSplotchStyle} />
+      <div className={colorSplotchClassName} style={colorSplotchStyle} />
     </Button>
   );
 }
diff --git a/web/modals/threads/color-selector.css b/web/modals/threads/color-selector.css
index fb4231e8a7..8ebec76294 100644
--- a/web/modals/threads/color-selector.css
+++ b/web/modals/threads/color-selector.css
@@ -9,3 +9,7 @@ div.container {
   width: 100%;
   padding: 6px 0;
 }
+
+div.containerLarge {
+  row-gap: 36px;
+}
diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
index a6ff8788a7..29237a5caa 100644
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { selectedThreadColors } from 'lib/shared/color-utils.js';
@@ -10,9 +11,10 @@ import css from './color-selector.css';
 type ColorSelectorProps = {
   +currentColor: string,
   +onColorSelection: (hex: string) => void,
+  +size?: 'small' | 'large',
 };
 function ColorSelector(props: ColorSelectorProps): React.Node {
-  const { currentColor, onColorSelection } = props;
+  const { currentColor, onColorSelection, size } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
@@ -22,12 +24,18 @@ function ColorSelector(props: ColorSelectorProps): React.Node {
           color={color}
           currentColor={currentColor}
           onColorSelection={onColorSelection}
+          size={size}
         />
       )),
-    [currentColor, onColorSelection],
+    [currentColor, onColorSelection, size],
   );
 
-  return <div className={css.container}>{colorSelectorButtons}</div>;
+  const containerClassName = classNames({
+    [css.container]: true,
+    [css.containerLarge]: size === 'large',
+  });
+
+  return <div className={containerClassName}>{colorSelectorButtons}</div>;
 }
 
 export default ColorSelector;