From debbfe636078996c94478ad615e9870a2f0acd33 Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Wed, 21 Jun 2023 18:57:07 -0400
Subject: [PATCH] [web] Split `EmojiAvatarSelectionModal` into "Emoji" and
 "Color" tab

Summary:
Separate Emoji and Color into separate tabs.

NOTE: Layout/Styling will be handled separately.

WARNING: Took some liberties here with styling to unblock myself since emoji selection part of this modal wasn't part of designs (https://blob.sh/84e83d.png). Kept things as simple as possible, happy to iterate on this further. (cc @ashoat, @ted)

---

Depends on D8286

Test Plan:
Looks (and continues to work) as expected:

{F600972}

Reviewers: ashoat, ginsu, rohan

Reviewed By: ginsu

Subscribers: tomek, ashoat, ted

Differential Revision: https://phab.comm.dev/D8287
---
 web/avatars/emoji-avatar-selection-modal.css  |  5 +-
 .../emoji-avatar-selection-modal.react.js     | 53 ++++++++++++-------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
index dd6306a9f5..dfa948d499 100644
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -1,7 +1,10 @@
-div.modalBody {
+div.modalContainer {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+}
+
+div.modalBody {
   padding: 20px;
 }
 
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
index 567294c76c..253bcfe384 100644
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -21,11 +21,14 @@ import type {
 import Avatar from './avatar.react.js';
 import css from './emoji-avatar-selection-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
+import Tabs from '../components/tabs.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Modal from '../modals/modal.react.js';
 import ColorSelector from '../modals/threads/color-selector.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
+type TabType = 'emoji' | 'color';
+
 function EmojiAvatarSelectionModal(): React.Node {
   const { popModal } = useModalContext();
 
@@ -110,9 +113,11 @@ function EmojiAvatarSelectionModal(): React.Node {
     saveButtonContent = 'Save Avatar';
   }
 
+  const [currentTabType, setCurrentTabType] = React.useState<TabType>('emoji');
+
   return (
     <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
-      <div className={css.modalBody}>
+      <div className={css.modalContainer}>
         <div className={css.avatarContainer}>
           <Avatar
             avatarInfo={pendingEmojiAvatar}
@@ -120,26 +125,34 @@ function EmojiAvatarSelectionModal(): React.Node {
             showSpinner={userAvatarSaveInProgress}
           />
         </div>
-        <div className={css.emojiPickerContainer}>
-          <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
-        </div>
-        <div className={css.colorSelectorContainer}>
-          <ColorSelector
-            currentColor={pendingAvatarColor}
-            onColorSelection={onColorSelection}
-          />
-        </div>
-        <div className={css.saveButtonContainer}>
-          <Button
-            variant="filled"
-            buttonColor={buttonColor}
-            onClick={onSaveAvatar}
-            disabled={userAvatarSaveInProgress}
-          >
-            <div className={css.saveAvatarButtonContent}>
-              {saveButtonContent}
+        <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
+          <Tabs.Item id="emoji" header="Emoji">
+            <div className={css.emojiPickerContainer}>
+              <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
+            </div>
+          </Tabs.Item>
+          <Tabs.Item id="color" header="Color">
+            <div className={css.colorSelectorContainer}>
+              <ColorSelector
+                currentColor={pendingAvatarColor}
+                onColorSelection={onColorSelection}
+              />
             </div>
-          </Button>
+          </Tabs.Item>
+        </Tabs.Container>
+        <div className={css.modalBody}>
+          <div className={css.saveButtonContainer}>
+            <Button
+              variant="filled"
+              buttonColor={buttonColor}
+              onClick={onSaveAvatar}
+              disabled={userAvatarSaveInProgress}
+            >
+              <div className={css.saveAvatarButtonContent}>
+                {saveButtonContent}
+              </div>
+            </Button>
+          </div>
         </div>
       </div>
     </Modal>