diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 870e7ed2..5e020fc8 100644 --- a/src/components/ui/Button.tsx +++ b/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` z-index: 1; - padding: 8px; - font-size: 16px; - text-align: center; + display: flex; + height: 38px; + 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` 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` 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` diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 18afb638..1368da03 100644 --- a/src/pages/settings/Settings.module.scss +++ b/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; diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 3ebd4430..472fb05d 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -67,15 +67,15 @@ export function Account() { [ ["username", user.username, ], ["email", email, ], - ["password", "*****", ], + ["password", "***********", ], ] as const ).map(([field, value, icon]) => (
{icon}
- +
- +

{value}

@@ -93,6 +93,16 @@ export function Account() {
))}
+ {/*

Two-factor Authentication

+
Coming Soon
+

Account Management

+
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.
+ + */} diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 34108c12..763210f9 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/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); } }