diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 2b72e4ef768adaa724002a62d92b6066f95c2fb7..0dd41bc771f67c0cbd9dd8391206e597f81b157b 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<Props>` 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 fe9d79ecf6847bbaabe29b97cfb1701d4a374980..8e0741da3dbc211f6f38db3362a09bdf669b9768 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -64,7 +64,7 @@ export function Account() { <div className={styles.userDetail}> <div className={styles.username}>@{user.username}</div> <div className={styles.userid}> - <Tooltip content={"This is your unique user identificator"}> + <Tooltip content={<Text id="app.settings.pages.account.tooltip_ulid" />}> <HelpCircle size={16} /> </Tooltip> {user._id} @@ -102,16 +102,21 @@ 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 + {/*<h3><Text id="app.settings.pages.account.two_factor_auth.title" /></h3> + <h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5> + <Button accent compact> + <Text id="app.settings.pages.account.two_factor_auth.add_auth" /> </Button>*/} + <h3><Text id="app.settings.pages.account.account_management.title" /></h3> + <h5><Text id="app.settings.pages.account.account_management.description" /></h5> + <div className={styles.buttons}> + {/*<Button error compact> + <Text id="app.settings.pages.account.account_management.disable_account" /> + </Button>*/} + <Button error compact> + <Text id="app.settings.pages.account.account_management.delete_account" /> + </Button> + </div> <Tip> <span> <Text id="app.settings.tips.account.a" /> diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 3dfe7a904a5fab02067b5115c1c869140429e0a5..91e5267218636f904032e6bd9c340b37c5599bc5 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 {