Changed design of account settings

src/pages/settings/panes/Account.tsx

-import { At } from "@styled-icons/boxicons-regular";
-import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
+import { At, Key } from "@styled-icons/boxicons-regular";
+import { Envelope, HelpCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
 import { Profile } from "revolt-api/types/Users";
@@ -77,7 +77,7 @@ export const Account = observer(() => {
                     [
                         ["username", client.user!.username, <At size={24} />],
                         ["email", email, <Envelope size={24} />],
-                        ["password", "*********", <Key size={24} />],
+                        ["password", "•••••••••", <Key size={24} />],
                     ] as const
                 ).map(([field, value, icon]) => (
                     <div>
@@ -86,13 +86,13 @@ export const Account = observer(() => {
                             <div className={styles.subtext}>
                                 <Text id={`login.${field}`} />
                             </div>
-                            <p>
+                            <div className={styles.entry}>
                                 {field === "email" ? (
                                     revealEmail ? (
                                         value
                                     ) : (
                                         <>
-                                            ***********@{value.split("@").pop()}{" "}
+                                            •••••••••••@{value.split("@").pop()}{" "}
                                             <a
                                                 onClick={() =>
                                                     setRevealEmail(true)
@@ -104,7 +104,7 @@ export const Account = observer(() => {
                                 ) : (
                                     value
                                 )}
-                            </p>
+                            </div>
                         </div>
                         <div>
                             <Button

src/pages/settings/panes/Panes.module.scss

@@ -4,11 +4,11 @@
         margin-top: 5px;
         gap: 24px;
         width: 100%;
-        padding: 1em;
+        padding: 12px 10px;
         display: flex;
         overflow: hidden;
         align-items: center;
-        background: var(--secondary-header);
+        /*background: var(--secondary-header);*/
         border-radius: var(--border-radius);
 
         .userDetail {
@@ -51,10 +51,13 @@
 
         > div {
             gap: 12px;
-            padding: 4px;
+            /*padding: 4px;*/
+            padding: 8px 12px;
             display: flex;
             align-items: center;
             flex-direction: row;
+            background: var(--secondary-header);
+            border-radius: 6px;
 
             > svg {
                 flex-shrink: 0;
@@ -70,14 +73,21 @@
 
             .subtext {
                 display: inline;
-                font-size: .875rem;
+                font-size: 12px;
                 font-weight: 600;
-                color: var(--foreground);
                 text-transform: uppercase;
+                color: var(--secondary-foreground);
+
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
 
+            .entry {
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
+                font-size: 15px;
             }
 
             a {
@@ -88,12 +98,6 @@
                     text-decoration: underline;
                 }
             }
-
-            p {
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-            }
         }
 
         p {
@@ -481,7 +485,7 @@
             display: flex;
             height: 45px;
             padding: 0 8px;
-            background: var(--tertiary-background);
+            background: var(--secondary-header);
             border-radius: var(--border-radius);
             margin-top: 0;