Update style again on the settings page.

views/dashboardPage/dashboard.css

@@ -584,7 +584,7 @@ ACCOUNT STRAND
             display: flex;
             flex-direction: column;
             justify-content: center;
-            align-items: center;
+            align-items: flex-start;
             margin: 15px 0;
             background: white;
             padding: 35px;
@@ -609,12 +609,23 @@ ACCOUNT STRAND
                         margin-right: 15px;
                     }
 
-            .settingsSection label{
-                margin-bottom: 10px;
+        #accountInformation{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        #accountInformationData{
+            width: 50%;
+        }
+
+            #accountInformation label{
                 display: flex;
+                justify-content: space-between;
+                width: 100%;
+                margin-bottom: 10px;
             }
 
-
     #accountUpdate{
         max-width: 500px;
     }
@@ -622,9 +633,25 @@ ACCOUNT STRAND
     #settingsMerchants{
         display: flex;
         flex-direction: column;
-        width: 50%;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+        #settingsMerchants button{
+            width: 50%;
+        }
+
+    #securityData{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
     }
 
+        #securityData button, #securityData a{
+            width: 240px;
+            box-sizing: border-box;
+        }
+
     #accountShowPassword{
         max-width: 300px;
     }
@@ -752,10 +779,11 @@ Modal
         justify-content: center;
         align-items: center;
         border: 1px solid black;
-        padding: 5px;
+        padding: 9px;
         cursor: pointer;
         margin-top: 0;
         margin-bottom: 0;
+        height: 44px;
     }
 
         #newMerchantSquareButton:hover{

views/dashboardPage/ejs/strands/account.ejs

@@ -4,20 +4,22 @@
     </div>
 
     <div class="settings">
-        <div class="settingsSection">
+        <div id="accountInformation" class="settingsSection">
             <div class="settingsSectionHeader">
                 <h2>ACCOUNT INFORMATION</h2>
             </div>
 
-            <label>BUSINESS NAME:
-                <input id="accountOwnerName" type="text">
-            </label>
+            <div id="accountInformationData">
+                <label>BUSINESS NAME:
+                    <input id="accountOwnerName" type="text">
+                </label>
 
-            <label>EMAIL:
-                <input id="accountEmail" type="email">
-            </label>
+                <label>EMAIL:
+                    <input id="accountEmail" type="email">
+                </label>
 
-            <button id="accountUpdate" class="button">UPDATE</button>
+                <button id="accountUpdate" class="button">UPDATE</button>
+            </div>
         </div>
 
         <div class="settingsSection">
@@ -28,11 +30,11 @@
                     <h1>NEW:</h1>
 
                     <button id="newMerchantSquareButton" type="button">
-                        <svg aria-hidden="true" viewBox="0 0 44 44" width="24" height="24">
+                        <svg aria-hidden="true" viewBox="0 0 44 44" width="21" height="21">
                             <path fill="currentColor" d="M36.65 0H7.354A7.354 7.354 0 0 0 0 7.354V36.65a7.354 7.354 0 0 0 7.354 7.354H36.65a7.353 7.353 0 0 0 7.354-7.354V7.354A7.352 7.352 0 0 0 36.65 0zm-.646 33.685a2.32 2.32 0 0 1-2.32 2.32H10.325a2.32 2.32 0 0 1-2.321-2.32v-23.36a2.32 2.32 0 0 1 2.321-2.321h23.359a2.32 2.32 0 0 1 2.32 2.321v23.36z"></path>
                             <path fill="currentColor" d="M17.333 28.003c-.736 0-1.332-.6-1.332-1.339V17.34c0-.739.596-1.339 1.332-1.339h9.338c.738 0 1.332.6 1.332 1.339v9.324c0 .739-.594 1.339-1.332 1.339h-9.338z"></path>
                         </svg>
-                        <svg aria-hidden="true" viewBox="0 0 66 22" width="75" height="24">
+                        <svg aria-hidden="true" viewBox="0 0 66 22" width="75" height="21">
                             <path d="M11.2 10c-.7-.2-1.3-.4-1.8-.6C8.4 9 8 8.4 8 7.6c0-1.5 1.5-2.2 3-2.2 1.4 0 2.6.6 3.5 1.6l.1.1 1.2-.9-.1-.1c-1.1-1.4-2.7-2.2-4.6-2.2-1.2 0-2.4.3-3.2.9-1 .8-1.5 1.7-1.5 2.9 0 2.7 2.6 3.4 4.6 3.9 2.1.6 3.4 1 3.4 2.6s-1.3 2.6-3.2 2.6c-1 0-2.8-.3-3.9-2l-.1-.1-1.2.9v.1c1.1 1.6 2.9 2.5 5.1 2.5 2.9 0 4.9-1.6 4.9-4.1 0-2.8-2.7-3.5-4.8-4.1z" fill="currentColor"></path>
                             <path d="M25.5 9.5V8h1.4v14h-1.4v-5.5c-.8 1.1-2 1.7-3.4 1.7-2.7 0-4.5-2.1-4.5-5.2s1.9-5.2 4.5-5.2c1.4-.1 2.6.6 3.4 1.7zM19.1 13c0 2.9 1.6 3.9 3.2 3.9 2 0 3.3-1.5 3.3-3.9s-1.3-3.9-3.3-3.9c-2.4 0-3.2 2-3.2 3.9z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
                             <path d="M36.2 8v5.5c0 1.9-1.3 3.3-3.2 3.3-1.5 0-2.3-.9-2.3-2.8V8h-1.4v6.4c0 2.4 1.3 3.8 3.5 3.8 1.4 0 2.5-.6 3.3-1.6V18h1.4V8h-1.3z" fill="currentColor"></path>
@@ -54,33 +56,35 @@
                 <h2>SECURITY</h2>
             </div>
 
-            <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
+            <div id="securityData">
+                <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
 
-            <div id="changePasswordBox"style="display:none;">
-                <label>CURRENT PASSWORD
-                    <input id="accountCurrentPassword" type="password">
-                </label>
+                <div id="changePasswordBox"style="display:none;">
+                    <label>CURRENT PASSWORD
+                        <input id="accountCurrentPassword" type="password">
+                    </label>
 
-                <label>NEW PASSWORD
-                    <input id="accountNewPassword" type="password">
-                </label>
+                    <label>NEW PASSWORD
+                        <input id="accountNewPassword" type="password">
+                    </label>
 
-                <label>CONFIRM NEW PASSWORD
-                    <input id="accountConfirmPassword" type="password">
-                </label>
+                    <label>CONFIRM NEW PASSWORD
+                        <input id="accountConfirmPassword" type="password">
+                    </label>
 
-                <div id="accountButtonBox" class="buttonBox">
-                    <button id="cancelPasswordChange" class="button">CANCEL</button>
+                    <div id="accountButtonBox" class="buttonBox">
+                        <button id="cancelPasswordChange" class="button">CANCEL</button>
 
-                    <button id="changePasswordButton" class="button">CHANGE PASSWORD</button>
-                </div>
+                        <button id="changePasswordButton" class="button">CHANGE PASSWORD</button>
+                    </div>
 
-                <p>* This will log you out of all current sessions</p>
-            </div>
+                    <p>* This will log you out of all current sessions</p>
+                </div>
 
-            <a href="/session/end" class="button">LOG OUT OF ALL DEVICES</a>
+                <a href="/session/end" class="button">LOG OUT OF ALL DEVICES</a>
 
-            <button id="deleteMerchant" class="dangerButton">DELETE THIS MERCHANT</button>
+                <button id="deleteMerchant" class="dangerButton">DELETE THIS MERCHANT</button>
+            </div>
         </div>
     </div>
 </div>

views/shared/shared.css

@@ -177,7 +177,6 @@ button::-moz-focus-inner{
     }
 
 .button{
-    display: initial;
     background: rgb(0, 27, 45);
     border: none;
     text-decoration: none;