Update AccountModal

* Uses new Selects
* Adds PictureSelectItem for showing an image next to text
* Adds translations
* Add theme select

components/AccountModal/index.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: $unit * 2;
-  width: $unit * 60;
+  width: $unit * 64;
 
   form {
     display: flex;
@@ -52,14 +52,6 @@
       flex-direction: row;
       gap: $unit * 2;
 
-      select {
-        background: no-repeat url('/icons/ArrowDark.svg'), $grey-90;
-        background-position-y: center;
-        background-position-x: 95%;
-        margin: 0;
-        width: 240px;
-      }
-
       .left {
         display: flex;
         flex-direction: column;
@@ -67,7 +59,7 @@
         gap: calc($unit / 2);
 
         label {
-          color: var(--text-secondary);
+          color: var(--text-tertiary);
           font-size: $font-regular;
         }
 
@@ -84,7 +76,7 @@
       }
 
       .preview {
-        $diameter: 48px;
+        $diameter: $unit * 6;
         background-color: $grey-90;
         border-radius: 999px;
         height: $diameter;

components/AccountModal/index.tsx

@@ -1,12 +1,21 @@
 import React, { useEffect, useState } from 'react'
-import { getCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
-import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
-import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from '~components/Dialog'
+// import * as Dialog from '@radix-ui/react-dialog'
 import * as Switch from '@radix-ui/react-switch'
 
+import Select from '~components/Select'
+import SelectItem from '~components/SelectItem'
+import PictureSelectItem from '~components/PictureSelectItem'
+
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 import { pictureData } from '~utils/pictureData'
@@ -15,63 +24,83 @@ import Button from '~components/Button'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
+import { useSnapshot } from 'valtio'
+import { getCookie, setCookie } from 'cookies-next'
 
 const AccountModal = () => {
-  const { account } = useSnapshot(accountState)
-
-  const cookie = getCookie('user')
-
   const router = useRouter()
   const { t } = useTranslation('common')
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  const accountCookie = getCookie('account')
+  const userCookie = getCookie('user')
+
+  const cookieData = {
+    account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
+    user: userCookie ? JSON.parse(userCookie as string) : undefined,
+  }
+
   // State
   const [open, setOpen] = useState(false)
+  const [openPictureSelect, setOpenPictureSelect] = useState(false)
+  const [openGenderSelect, setOpenGenderSelect] = useState(false)
+  const [openLanguageSelect, setOpenLanguageSelect] = useState(false)
+  const [openThemeSelect, setOpenThemeSelect] = useState(false)
+
+  const [username, setUsername] = useState('')
   const [picture, setPicture] = useState('')
   const [language, setLanguage] = useState('')
   const [gender, setGender] = useState(0)
-  const [privateProfile, setPrivateProfile] = useState(false)
+  const [theme, setTheme] = useState('system')
-
+  // const [privateProfile, setPrivateProfile] = useState(false)
-  // Refs
-  const pictureSelect = React.createRef<HTMLSelectElement>()
-  const languageSelect = React.createRef<HTMLSelectElement>()
-  const genderSelect = React.createRef<HTMLSelectElement>()
-  const privateSelect = React.createRef<HTMLInputElement>()
 
   useEffect(() => {
-    console.log(cookie)
+    setUsername(cookieData.account.username)
-    // if (cookie) setPicture(cookie.picture)
+    setGender(cookieData.user.gender)
-    // if (cookie) setLanguage(cookie.user.language)
+    setPicture(cookieData.user.picture)
-    // if (cookie) setGender(cookie.user.gender)
+    setLanguage(cookieData.user.language)
-  }, [cookie])
+    setTheme(cookieData.user.theme ? cookieData.user.theme : 'system')
+  }, [cookieData])
 
   const pictureOptions = pictureData
     .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
     .map((item, i) => {
       return (
-        <option key={`picture-${i}`} value={item.filename}>
+        <PictureSelectItem
+          key={`picture-${i}`}
+          element={item.element}
+          src={[
+            `/profile/${item.filename}.png`,
+            `/profile/${item.filename}@2x.png 2x`,
+          ]}
+          value={item.filename}
+        >
           {item.name[locale]}
-        </option>
+        </PictureSelectItem>
       )
     })
 
-  function handlePictureChange(event: React.ChangeEvent<HTMLSelectElement>) {
+  function handlePictureChange(value: string) {
-    if (pictureSelect.current) setPicture(pictureSelect.current.value)
+    setPicture(value)
   }
 
-  function handleLanguageChange(event: React.ChangeEvent<HTMLSelectElement>) {
+  function handleLanguageChange(value: string) {
-    if (languageSelect.current) setLanguage(languageSelect.current.value)
+    setLanguage(value)
   }
 
-  function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) {
+  function handleGenderChange(value: string) {
-    if (genderSelect.current) setGender(parseInt(genderSelect.current.value))
+    setGender(parseInt(value))
   }
 
-  function handlePrivateChange(checked: boolean) {
+  function handleThemeChange(value: string) {
-    setPrivateProfile(checked)
+    setTheme(value)
   }
 
+  // function handlePrivateChange(checked: boolean) {
+  //   setPrivateProfile(checked)
+  // }
+
   function update(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
 
@@ -81,42 +110,44 @@ const AccountModal = () => {
         element: pictureData.find((i) => i.filename === picture)?.element,
         language: language,
         gender: gender,
-        private: privateProfile,
+        // private: privateProfile,
       },
     }
 
-    // api.endpoints.users
+    api.endpoints.users
-    //   .update(cookies.account.user_id, object, headers)
+      .update(cookieData.account.user_id, object)
-    //   .then((response) => {
+      .then((response) => {
-    //     const user = response.data.user
+        const user = response.data.user
 
-    //     const cookieObj = {
+        const cookieObj = {
-    //       picture: user.picture.picture,
+          picture: user.picture.picture,
-    //       element: user.picture.element,
+          element: user.picture.element,
-    //       gender: user.gender,
+          gender: user.gender,
-    //       language: user.language,
+          language: user.language,
-    //     }
+        }
 
-    //     setCookies("user", cookieObj, { path: "/" })
+        setCookie('user', cookieObj, { path: '/' })
 
-    //     accountState.account.user = {
+        accountState.account.user = {
-    //       id: user.id,
+          id: user.id,
-    //       username: user.username,
+          username: user.username,
-    //       picture: user.picture.picture,
+          picture: user.picture.picture,
-    //       element: user.picture.element,
+          element: user.picture.element,
-    //       gender: user.gender,
+          language: user.language,
-    //     }
+          theme: user.theme,
+          gender: user.gender,
+        }
 
-    //     setOpen(false)
+        setOpen(false)
-    //     changeLanguage(user.language)
+        changeLanguage(user.language)
-    //   })
+      })
   }
 
   function changeLanguage(newLanguage: string) {
-    // if (newLanguage !== router.locale) {
+    if (newLanguage !== router.locale) {
-    //   setCookies("NEXT_LOCALE", newLanguage, { path: "/" })
+      // setCookies("NEXT_LOCALE", newLanguage, { path: "/" })
-    //   router.push(router.asPath, undefined, { locale: newLanguage })
+      // router.push(router.asPath, undefined, { locale: newLanguage })
-    // }
+    }
   }
 
   function openChange(open: boolean) {
@@ -124,104 +155,132 @@ const AccountModal = () => {
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={openChange}>
+    <Dialog open={open} onOpenChange={openChange}>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('menu.settings')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent className="Account Dialog">
-        <Dialog.Content
+        <div className="DialogHeader">
-          className="Account Dialog"
+          <div className="DialogTop">
-          onOpenAutoFocus={(event) => event.preventDefault()}
+            <DialogTitle className="SubTitle">
-        >
+              {t('modals.settings.title')}
-          <div className="DialogHeader">
+            </DialogTitle>
-            <div className="DialogTop">
+            <DialogTitle className="DialogTitle">@{username}</DialogTitle>
-              <Dialog.Title className="SubTitle">
-                {t('modals.settings.title')}
-              </Dialog.Title>
-              <Dialog.Title className="DialogTitle">
-                @{account.user?.username}
-              </Dialog.Title>
-            </div>
-            <Dialog.Close className="DialogClose" asChild>
-              <span>
-                <CrossIcon />
-              </span>
-            </Dialog.Close>
           </div>
+          <DialogClose className="DialogClose" asChild>
+            <span>
+              <CrossIcon />
+            </span>
+          </DialogClose>
+        </div>
 
-          <form onSubmit={update}>
+        <form onSubmit={update}>
-            <div className="field">
+          <div className="field">
-              <div className="left">
+            <div className="left">
-                <label>{t('modals.settings.labels.picture')}</label>
+              <label>{t('modals.settings.labels.picture')}</label>
-              </div>
+              {/* <p className={locale}>Displayed next to your name</p> */}
+            </div>
 
-              <div
+            <div
-                className={`preview ${
+              className={`preview ${
-                  pictureData.find((i) => i.filename === picture)?.element
+                pictureData.find((i) => i.filename === picture)?.element
-                }`}
+              }`}
-              >
+            >
-                {picture ? (
+              {picture ? (
-                  <img
+                <img
-                    alt="Profile preview"
+                  alt="Profile preview"
-                    srcSet={`/profile/${picture}.png,
+                  srcSet={`/profile/${picture}.png,
                                              /profile/${picture}@2x.png 2x`}
-                    src={`/profile/${picture}.png`}
+                  src={`/profile/${picture}.png`}
-                  />
+                />
-                ) : (
+              ) : (
-                  ''
+                ''
-                )}
+              )}
-              </div>
-
-              <select
-                name="picture"
-                onChange={handlePictureChange}
-                value={picture}
-                ref={pictureSelect}
-              >
-                {pictureOptions}
-              </select>
             </div>
-            <div className="field">
-              <div className="left">
-                <label>{t('modals.settings.labels.gender')}</label>
-              </div>
 
-              <select
+            <Select
-                name="gender"
+              name="picture"
-                onChange={handleGenderChange}
+              open={openPictureSelect}
-                value={gender}
+              onClick={() => setOpenPictureSelect(!openPictureSelect)}
-                ref={genderSelect}
+              onValueChange={handlePictureChange}
-              >
+              triggerClass="Bound Table"
-                <option key="gran" value="0">
+              value={picture}
-                  {t('modals.settings.gender.gran')}
+            >
-                </option>
+              {pictureOptions}
-                <option key="djeeta" value="1">
+            </Select>
-                  {t('modals.settings.gender.djeeta')}
+          </div>
-                </option>
+          <div className="field">
-              </select>
+            <div className="left">
+              <label>{t('modals.settings.labels.gender')}</label>
+              {/* <p className={locale}>
+                  Displayed on the Character tab of your teams
+                </p> */}
             </div>
-            <div className="field">
-              <div className="left">
-                <label>{t('modals.settings.labels.language')}</label>
-              </div>
 
-              <select
+            <Select
-                name="language"
+              name="gender"
-                onChange={handleLanguageChange}
+              open={openGenderSelect}
-                value={language}
+              onClick={() => setOpenGenderSelect(!openGenderSelect)}
-                ref={languageSelect}
+              onValueChange={handleGenderChange}
-              >
+              triggerClass="Bound Table"
-                <option key="en" value="en">
+              value={`${gender}`}
-                  {t('modals.settings.language.english')}
+            >
-                </option>
+              <SelectItem key="gran" value="0">
-                <option key="jp" value="ja">
+                {t('modals.settings.gender.gran')}
-                  {t('modals.settings.language.japanese')}
+              </SelectItem>
-                </option>
+              <SelectItem key="djeeta" value="1">
-              </select>
+                {t('modals.settings.gender.djeeta')}
+              </SelectItem>
+            </Select>
+          </div>
+          <div className="field">
+            <div className="left">
+              <label>{t('modals.settings.labels.language')}</label>
             </div>
-            <div className="field">
+
+            <Select
+              name="language"
+              open={openLanguageSelect}
+              onClick={() => setOpenLanguageSelect(!openLanguageSelect)}
+              onValueChange={handleLanguageChange}
+              triggerClass="Bound Table"
+              value={`${language}`}
+            >
+              <SelectItem key="en" value="en">
+                {t('modals.settings.language.english')}
+              </SelectItem>
+              <SelectItem key="ja" value="ja">
+                {t('modals.settings.language.japanese')}
+              </SelectItem>
+            </Select>
+          </div>
+          <div className="field">
+            <div className="left">
+              <label>{t('modals.settings.labels.theme')}</label>
+            </div>
+
+            <Select
+              name="theme"
+              open={openThemeSelect}
+              onClick={() => setOpenThemeSelect(!openThemeSelect)}
+              onValueChange={handleThemeChange}
+              triggerClass="Bound Table"
+              value={`${theme}`}
+            >
+              <SelectItem key="system" value="system">
+                {t('modals.settings.theme.system')}
+              </SelectItem>
+              <SelectItem key="light" value="light">
+                {t('modals.settings.theme.light')}
+              </SelectItem>
+              <SelectItem key="dark" value="dark">
+                {t('modals.settings.theme.dark')}
+              </SelectItem>
+            </Select>
+          </div>
+          {/* <div className="field">
               <div className="left">
                 <label>{t('modals.settings.labels.private')}</label>
                 <p className={locale}>
@@ -236,17 +295,15 @@ const AccountModal = () => {
               >
                 <Switch.Thumb className="Thumb" />
               </Switch.Root>
-            </div>
+            </div> */}
 
-            <Button
+          <Button
-              contained={true}
+            contained={true}
-              text={t('modals.settings.buttons.confirm')}
+            text={t('modals.settings.buttons.confirm')}
-            />
+          />
-          </form>
+        </form>
-        </Dialog.Content>
+      </DialogContent>
-        <Dialog.Overlay className="Overlay" />
+    </Dialog>
-      </Dialog.Portal>
-    </Dialog.Root>
   )
 }
 

components/PictureSelectItem/index.scss

@@ -0,0 +1,42 @@
+.SelectItem.Picture {
+  display: flex;
+  flex-direction: row;
+  gap: $unit;
+  align-items: center;
+
+  .preview {
+    $diameter: $unit-4x;
+    border-radius: $unit-2x;
+    width: $diameter;
+    height: $diameter;
+
+    img {
+      width: $diameter;
+      height: auto;
+    }
+
+    &.fire {
+      background: $fire-bg-20;
+    }
+
+    &.water {
+      background: $water-bg-20;
+    }
+
+    &.wind {
+      background: $wind-bg-20;
+    }
+
+    &.earth {
+      background: $earth-bg-20;
+    }
+
+    &.dark {
+      background: $dark-bg-10;
+    }
+
+    &.light {
+      background: $light-bg-20;
+    }
+  }
+}

components/PictureSelectItem/index.tsx

@@ -0,0 +1,35 @@
+import React, { ComponentProps } from 'react'
+import * as Select from '@radix-ui/react-select'
+
+import './index.scss'
+import classNames from 'classnames'
+
+interface Props extends ComponentProps<'div'> {
+  src: string[]
+  element: string
+  value: string
+}
+
+const PictureSelectItem = React.forwardRef<HTMLDivElement, Props>(
+  function selectItem({ children, ...props }, forwardedRef) {
+    return (
+      <Select.Item
+        className={classNames('SelectItem Picture', props.className)}
+        {...props}
+        ref={forwardedRef}
+        value={`${props.value}`}
+      >
+        <div className={`preview ${props.element}`}>
+          <img
+            alt={`${props.value}`}
+            src={props.src[0]}
+            srcSet={props.src.join(', ')}
+          />
+        </div>
+        <Select.ItemText>{children}</Select.ItemText>
+      </Select.Item>
+    )
+  }
+)
+
+export default PictureSelectItem

components/Select/index.scss

@@ -43,6 +43,10 @@
     }
   }
 
+  &.Table {
+    min-width: $unit * 30;
+  }
+
   .SelectIcon {
     display: flex;
     align-items: center;

public/locales/en/common.json

@@ -170,7 +170,8 @@
         "picture": "Picture",
         "language": "Language",
         "gender": "Main Character",
-        "private": "Private"
+        "private": "Private",
+        "theme": "Theme"
       },
       "descriptions": {
         "private": "Hide your profile and prevent your grids from showing up in collections"
@@ -183,6 +184,11 @@
         "english": "English",
         "japanese": "Japanese"
       },
+      "theme": {
+        "light": "Light",
+        "dark": "Dark",
+        "system": "Follow system"
+      },
       "buttons": {
         "confirm": "Save settings"
       }

public/locales/ja/common.json

@@ -170,7 +170,8 @@
         "picture": "プロフィール画像",
         "language": "言語",
         "gender": "主人公",
-        "private": "プライベート"
+        "private": "プライベート",
+        "theme": "表示"
       },
       "descriptions": {
         "private": "プロフィールを隠し、編成をコレクションに表示されないようにします"
@@ -183,6 +184,11 @@
         "english": "英語",
         "japanese": "日本語"
       },
+      "theme": {
+        "light": "ライト",
+        "dark": "ダーク",
+        "system": "システム"
+      },
       "buttons": {
         "confirm": "設定を保存する"
       }