Update: New button design

This commit is contained in:
nizune 2021-07-05 23:49:57 +02:00
parent fd57f81118
commit e64bffde22
4 changed files with 58 additions and 7 deletions

View file

@ -2,15 +2,21 @@ import styled, { css } from "styled-components";
interface Props { interface Props {
readonly contrast?: boolean; readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean; readonly error?: boolean;
} }
export default styled.button<Props>` export default styled.button<Props>`
z-index: 1; 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-family: inherit;
font-weight: 500;
transition: 0.2s ease opacity; transition: 0.2s ease opacity;
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
@ -18,7 +24,7 @@ export default styled.button<Props>`
background: var(--primary-background); background: var(--primary-background);
color: var(--foreground); color: var(--foreground);
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -34,6 +40,24 @@ export default styled.button<Props>`
background: var(--secondary-background); 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) =>
props.contrast && props.contrast &&
css` css`

View file

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

View file

@ -67,15 +67,15 @@ export function Account() {
[ [
["username", user.username, <At size={24} />], ["username", user.username, <At size={24} />],
["email", email, <Envelope size={24} />], ["email", email, <Envelope size={24} />],
["password", "*****", <Key size={24} />], ["password", "***********", <Key size={24} />],
] as const ] as const
).map(([field, value, icon]) => ( ).map(([field, value, icon]) => (
<div> <div>
{icon} {icon}
<div className={styles.detail}> <div className={styles.detail}>
<Overline> <div className={styles.subtext}>
<Text id={`login.${field}`} /> <Text id={`login.${field}`} />
</Overline> </div>
<p>{value}</p> <p>{value}</p>
</div> </div>
<div> <div>
@ -93,6 +93,16 @@ export function Account() {
</div> </div>
))} ))}
</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> <Tip>
<span> <span>
<Text id="app.settings.tips.account.a" /> <Text id="app.settings.tips.account.a" />

View file

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