diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 2b72e4ef..0dd41bc7 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -1,6 +1,8 @@ import styled, { css } from "styled-components"; interface Props { + readonly compact?: boolean; + readonly accent?: boolean; readonly contrast?: boolean; readonly plain?: boolean; readonly error?: boolean; @@ -43,6 +45,19 @@ export default styled.button` background: var(--secondary-background); } + ${(props) => + props.compact && + css` + height: 32px !important; + padding: 2px 12px !important; + `} + + ${(props) => + props.accent && + css` + background: var(--accent) !important; + `} + ${(props) => props.plain && css` diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index fe9d79ec..8e0741da 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -64,7 +64,7 @@ export function Account() {
@{user.username}
- + }> {user._id} @@ -102,16 +102,21 @@ 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 3dfe7a90..91e52672 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -7,6 +7,7 @@ border-radius: 6px; align-items: center; background: var(--secondary-header); + overflow: hidden; .avatar { cursor: pointer; @@ -96,6 +97,11 @@ flex-grow: 1; } } + + .buttons { + display: flex; + gap: 12px; + } } .appearance {