Browse Source

Update style for the account strand.

Lee Morgan 5 năm trước cách đây
mục cha
commit
a92fffee82

+ 19 - 8
views/dashboardPage/dashboard.css

@@ -573,18 +573,29 @@ ACCOUNT STRAND
 #accountStrand{
     padding: 15px;
     box-sizing: border-box;
+    align-items: center;
 }
 
-    .horizontal{
-        display: flex;
-        justify-content: space-around;
-    }
-
-    .vertical{
+    .settings{
         display: flex;
         flex-direction: column;
+        width: 75%;
     }
 
+        .settingsSection{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin: 15px 0;
+            background: rgb(201, 201, 201);
+            padding: 35px;
+        }
+
+            .settingsSection h2{
+                margin-bottom: 25px;
+            }
+
     #accountUpdate{
         max-width: 500px;
     }
@@ -596,8 +607,8 @@ ACCOUNT STRAND
     #changePasswordBox{
         flex-direction: column;
         padding: 25px;
-        background: rgb(240, 252, 255);
-        border: 2px solid black;
+        background: rgb(201, 201, 201);
+        /* border: 2px solid black; */
         border-radius: 10px;
     }
 

+ 1 - 1
views/dashboardPage/ejs/menu.ejs

@@ -71,7 +71,7 @@
             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
             <circle cx="12" cy="7" r="4"></circle>
         </svg>
-        <p>ACCOUNT</p>
+        <p>SETTINGS</p>
     </button>
 
     <a class="menuButton" href="/logout">

+ 23 - 18
views/dashboardPage/ejs/strands/account.ejs

@@ -3,8 +3,9 @@
         <h1 id="accountStrandTitle" class="strandTitle"></h1>
     </div>
 
-    <div class="horizontal">
-        <div class="vertical">
+    <div class="settings">
+        <div class="settingsSection">
+            <h2>ACCOUNT INFORMATION</h2>
             <label>EMAIL
                 <input id="accountEmail" type="email">
             </label>
@@ -12,28 +13,32 @@
             <button id="accountUpdate" class="button">UPDATE</button>
         </div>
 
-        <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
+        <div class="settingsSection">
+            <h2>SECURITY</h2>
+            
+            <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>
+                <p>* This will log you out of all current sessions</p>
+            </div>
         </div>
     </div>
 </div>