From ad3141ef6e888e04fc351c7d31fea1cd94eed92c Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 10 May 2019 10:37:46 -0600
Subject: [PATCH] Style the settings modal a bit better

---
 index.html               | 37 ++++++++++++++++++++-----------------
 src/scss/_structure.scss |  6 ++++++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index a9adf8e..7f3633e 100644
--- a/index.html
+++ b/index.html
@@ -143,23 +143,26 @@
     <div class="modal-content">
       <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">&times;&#xFE0E;</a>
       <section>
-        <form>
-          <label>Use IPA Auto-Fill
-            <input id="settingsUseIPA" type="checkbox" checked><br />
-            <small>Check this to use character combinations to input International Phonetic Alphabet characters into
-              Pronunciation fields.</small>
-          </label>
-  
-          <label>Theme
-            <select disabled>
-              <option selected value="default">Default</option>
-              <option value="dark">Dark</option>
-              <option value="light">Light</option>
-              <option value="blue">Blue</option>
-              <option value="green">Green</option>
-              <option value="royal">Royal</option>
-            </select>
-          </label>
+        <form class="split two">
+          <div>
+            <label>Use IPA Auto-Fill
+              <input id="settingsUseIPA" type="checkbox" checked><br />
+              <small>Check this to use character combinations to input International Phonetic Alphabet characters into
+                Pronunciation fields.</small>
+            </label>
+    
+            <label>Theme
+              <select disabled>
+                <option selected value="default">Default</option>
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+                <option value="blue">Blue</option>
+                <option value="green">Green</option>
+                <option value="royal">Royal</option>
+              </select>
+            </label>
+            </div>
+            <div id="accountSettings"></div>
         </form>
       </section>
       <footer>
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index cb7eb43..b03bac4 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -82,6 +82,12 @@
   }
 }
 
+#settingsModal {
+  .modal-content section {
+    padding: ($general-padding * 2) $general-padding $general-padding;
+  }
+}
+
 #mobileWordFormShow {
   display: none;
 }