Updated AccountModal

components/auth/AccountModal/index.module.scss

@@ -1,9 +1,12 @@
-.Account.DialogContent {
+.fields {
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
-  width: $unit * 64;
-  overflow-y: hidden;
+  padding: 0 $unit-4x;
+
+  @include breakpoint(phone) {
+    gap: $unit-4x;
+  }
 
   .DialogDescription {
     font-size: $font-regular;

components/auth/AccountModal/index.tsx

@@ -4,12 +4,9 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { useTheme } from 'next-themes'
 
-import {
-  Dialog,
-  DialogClose,
-  DialogTitle,
-  DialogTrigger,
-} from '~components/common/Dialog'
+import { Dialog } from '~components/common/Dialog'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 import DialogContent from '~components/common/DialogContent'
 import Button from '~components/common/Button'
 import SelectItem from '~components/common/SelectItem'
@@ -197,17 +194,20 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
       .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
       .map((item, i) => {
         return (
-          <PictureSelectItem
+          <SelectItem
             key={`picture-${i}`}
             element={item.element}
-            src={[
+            icon={{
+              alt: item.name[locale],
+              src: [
                 `/profile/${item.filename}.png`,
                 `/profile/${item.filename}@2x.png 2x`,
-            ]}
+              ],
+            }}
             value={item.filename}
           >
             {item.name[locale]}
-          </PictureSelectItem>
+          </SelectItem>
         )
       })
 
@@ -215,15 +215,17 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
       <SelectTableField
         name="picture"
         description={t('modals.settings.descriptions.picture')}
-        className="Image"
+        className="image"
         label={t('modals.settings.labels.picture')}
+        image={{
+          className: pictureData.find((i) => i.filename === picture)?.element,
+          src: [`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`],
+          alt: pictureData.find((i) => i.filename === picture)?.name[locale],
+        }}
         open={pictureOpen}
         onOpenChange={() => openSelect('picture')}
         onChange={handlePictureChange}
         onClose={() => setPictureOpen(false)}
-        imageAlt={t('modals.settings.labels.image_alt')}
-        imageClass={pictureData.find((i) => i.filename === picture)?.element}
-        imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
         value={picture}
       >
         {pictureOptions}
@@ -308,36 +310,29 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
           onOpenAutoFocus={(event: Event) => {}}
           onEscapeKeyDown={onEscapeKeyDown}
         >
-          <div className="DialogHeader" ref={headerRef}>
-            <div className="DialogTop">
-              <DialogTitle className="SubTitle">
-                {t('modals.settings.title')}
-              </DialogTitle>
-              <DialogTitle className="DialogTitle">@{username}</DialogTitle>
-            </div>
-            <DialogClose className="DialogClose" asChild>
-              <span>
-                <CrossIcon />
-              </span>
-            </DialogClose>
-          </div>
+          <DialogHeader
+            title={`@${username}`}
+            subtitle={t('modals.settings.title')}
+          />
 
           <form onSubmit={update}>
-            <div className="Fields">
+            <div className={styles.fields}>
               {pictureField()}
               {genderField()}
               {languageField()}
               {themeField()}
             </div>
-            <div className="DialogFooter" ref={footerRef}>
-              <div className="Left"></div>
-              <div className="Right">
+
+            <DialogFooter
+              ref={footerRef}
+              rightElements={[
                 <Button
-                  contained={true}
+                  bound={true}
+                  key="confirm"
                   text={t('modals.settings.buttons.confirm')}
+                />,
+              ]}
             />
-              </div>
-            </div>
           </form>
         </DialogContent>
       </Dialog>