Update: New button design

src/components/ui/Button.tsx

@@ -2,15 +2,21 @@ import styled, { css } from "styled-components";
 
 interface Props {
     readonly contrast?: boolean;
+    readonly plain?: boolean;
     readonly error?: boolean;
 }
 
 export default styled.button<Props>`
     z-index: 1;
-    padding: 8px;
+    display: flex;
-    font-size: 16px;
+    height: 38px;
-    text-align: center;
+    min-width: 96px;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 16px;
+    font-size: .875rem;
     font-family: inherit;
+    font-weight: 500;
 
     transition: 0.2s ease opacity;
     transition: 0.2s ease background-color;
@@ -18,7 +24,7 @@ export default styled.button<Props>`
     background: var(--primary-background);
     color: var(--foreground);
 
-    border-radius: 6px;
+    border-radius: 4px;
     cursor: pointer;
     border: none;
 
@@ -34,6 +40,24 @@ export default styled.button<Props>`
         background: var(--secondary-background);
     }
 
+    ${(props) =>
+        props.plain &&
+        css`
+            background: transparent !important;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:disabled {
+                opacity: .5;
+            }
+
+            &:active {
+                background: var(--secondary-background);
+            }
+        `}
+
     ${(props) =>
         props.contrast &&
         css`

src/pages/settings/Settings.module.scss

@@ -145,6 +145,12 @@
             text-transform: uppercase;
         }
 
+        h5 {
+            margin-top: 0;
+            font-size: 12px;
+            font-weight: 400;
+        }
+
         .footer {
             border-top: 1px solid;
             margin: 0;

src/pages/settings/panes/Account.tsx

@@ -67,15 +67,15 @@ export function Account() {
                     [
                         ["username", 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>
                         {icon}
                         <div className={styles.detail}>
-                            <Overline>
+                            <div className={styles.subtext}>
                                 <Text id={`login.${field}`} />
-                            </Overline>
+                            </div>
                             <p>{value}</p>
                         </div>
                         <div>
@@ -93,6 +93,16 @@ export function Account() {
                     </div>
                 ))}
             </div>
+            {/*<h3>Two-factor Authentication</h3>
+            <h5>Coming Soon</h5>
+            <h3>Account Management</h3>
+            <h5>Disable, schedule your deletion or outright delete your account at any time. This action will log you out and fully delete your account, including your chat history and friends.</h5>
+            <Button contrast>
+                Disable Account
+            </Button>
+            <Button contrast>
+                Delete Account
+            </Button>*/}
             <Tip>
                 <span>
                     <Text id="app.settings.tips.account.a" />

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

@@ -34,6 +34,7 @@
             display: flex;
             align-items: center;
             flex-direction: row;
+            margin-bottom: 5px;
 
             > svg {
                 flex-shrink: 0;
@@ -42,10 +43,20 @@
 
         .detail {
             flex-grow: 1;
+
+            .subtext {
+                display: inline;
+                margin: 0.4em 0;
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--foreground);
+                text-transform: uppercase;
+            }
         }
 
         p {
             margin: 0;
+            font-size: 1rem;
             color: var(--tertiary-foreground);
         }
     }