From e64bffde2246aad0906e86d858bb4be9f75a2f03 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 5 Jul 2021 23:49:57 +0200
Subject: [PATCH] Update: New button design
---
src/components/ui/Button.tsx | 32 +++++++++++++++++++---
src/pages/settings/Settings.module.scss | 6 ++++
src/pages/settings/panes/Account.tsx | 16 +++++++++--
src/pages/settings/panes/Panes.module.scss | 11 ++++++++
4 files changed, 58 insertions(+), 7 deletions(-)
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 870e7ed..5e020fc 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<Props>`
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<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`
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 18afb63..1368da0 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 3ebd443..472fb05 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, <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" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 34108c1..763210f 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);
}
}
--
GitLab