From 82d1d7550afc4f1ae21ef6c425502df4f66f7944 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 20 Jan 2023 21:53:45 -0800
Subject: [PATCH] Fix styles for AccountModal

---
 components/AccountModal/index.scss |  9 +++++----
 components/AccountModal/index.tsx  | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss
index d77eed85..c8135020 100644
--- a/components/AccountModal/index.scss
+++ b/components/AccountModal/index.scss
@@ -1,13 +1,14 @@
-.Account.Dialog {
+.Account.DialogContent {
   display: flex;
   flex-direction: column;
-  gap: $unit * 2;
+  gap: $unit-2x;
   width: $unit * 64;
 
-  form {
+  .Fields {
     display: flex;
     flex-direction: column;
-    gap: $unit * 2;
+    gap: $unit-2x;
+    padding: 0 $unit-4x;
   }
 
   .DialogDescription {
diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index ede03821..1824bb1e 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -304,14 +304,18 @@ const AccountModal = (props: Props) => {
         </div>
 
         <form onSubmit={update}>
-          {pictureField()}
-          {genderField()}
-          {languageField()}
-          {themeField()}
-          <Button
-            contained={true}
-            text={t('modals.settings.buttons.confirm')}
-          />
+          <div className="Fields">
+            {pictureField()}
+            {genderField()}
+            {languageField()}
+            {themeField()}
+          </div>
+          <div className="DialogFooter">
+            <Button
+              contained={true}
+              text={t('modals.settings.buttons.confirm')}
+            />
+          </div>
         </form>
       </DialogContent>
     </Dialog>