Fixed message replies + refined account settings

This commit is contained in:
nizune 2021-08-04 14:48:33 +02:00
parent 1504f307fc
commit c93f0245f1
3 changed files with 93 additions and 26 deletions

View file

@ -48,7 +48,7 @@ export const ReplyBase = styled.div<{
} }
.user { .user {
gap: 4px; gap: 6px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
font-weight: 600; font-weight: 600;
@ -92,9 +92,9 @@ export const ReplyBase = styled.div<{
pointer-events: none; pointer-events: none;
} }
> span { /*> span > p {
display: flex; display: flex;
} }*/
} }
> svg:first-child { > svg:first-child {

View file

@ -1,5 +1,5 @@
import { At, Key } from "@styled-icons/boxicons-regular"; import { At, Key, Block } from "@styled-icons/boxicons-regular";
import { Envelope, HelpCircle } from "@styled-icons/boxicons-solid"; import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { Profile } from "revolt-api/types/Users"; import { Profile } from "revolt-api/types/Users";
@ -140,38 +140,68 @@ export const Account = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.account.2fa.title" /> <Text id="app.settings.pages.account.2fa.title" />
</h3> </h3>
<h5> <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
Currently work in progress, see{" "} <div className={styles.entrytest}>
<a <Lock size={24}/>
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2" <div className={styles.content}>
target="_blank" Currently not available
rel="noreferrer"> <div className={styles.description}>
tracking issue here Two-factor auth is currently work-in-progress, see{" "}
</a> <a
. href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
</h5> target="_blank"
{/*<h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5> rel="noreferrer">
<Button accent compact> tracking issue here
<Text id="app.settings.pages.account.two_factor_auth.add_auth" /> </a>
</Button>*/} .
</div>
</div>
<Button accent compact disabled>
<Text id="app.settings.pages.account.2fa.add_auth" />
</Button>
</div>
<h3> <h3>
<Text id="app.settings.pages.account.manage.title" /> <Text id="app.settings.pages.account.manage.title" />
</h3> </h3>
<h5> <h5>
<Text id="app.settings.pages.account.manage.description" /> <Text id="app.settings.pages.account.manage.description" />
</h5> </h5>
<div className={styles.buttons}> <div className={styles.entrytest}>
{/* <Button contrast> <Block size={24}/>
<div className={styles.content}>
<Text id="app.settings.pages.account.manage.disable" /> <Text id="app.settings.pages.account.manage.disable" />
</Button> */} <div className={styles.description}>
Disable your account. You won't be able to access it unless you log back in.
</div>
</div>
<Button accent compact disabled>
Unavailable
</Button>
</div>
<div className={styles.entrytest}>
<Trash size={24}/>
<div className={styles.content}>
<Text id="app.settings.pages.account.manage.delete" />
<div className={styles.description}>
Delete your account, including all of your data.
</div>
</div>
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account"> <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
<Button error compact> <Button error compact>
<Text id="app.settings.pages.account.manage.delete" /> <Text id="app.settings.pages.account.manage.delete" />
</Button> </Button>
</a> </a>
</div> </div>
<div className={styles.buttons}>
{/* <Button contrast>
<Text id="app.settings.pages.account.manage.disable" />
</Button>
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
<Button error compact>
<Text id="app.settings.pages.account.manage.delete" />
</Button>
</a>*/}
</div>
<Tip> <Tip>
<span> <span>
<Text id="app.settings.tips.account.a" /> <Text id="app.settings.tips.account.a" />

View file

@ -56,10 +56,13 @@
.details { .details {
display: flex; display: flex;
margin: 1em 0; padding: 1em 0;
gap: 10px; gap: 10px;
flex-direction: column; flex-direction: column;
/*border-top: 1px solid var(--secondary-header);
border-width: 100%;*/
> div { > div {
gap: 12px; gap: 12px;
/*padding: 4px;*/ /*padding: 4px;*/
@ -149,6 +152,40 @@
display: flex; display: flex;
gap: 12px; gap: 12px;
} }
.entrytest {
gap: 12px;
/* padding: 4px; */
height: 54px;
padding: 8px 12px;
display: flex;
align-items: center;
flex-direction: row;
background: var(--secondary-header);
border-radius: 6px;
margin-bottom: 10px;
> svg {
color: var(--error);
}
.content {
display: flex;
flex-grow: 1;
flex-direction: column;
font-weight: 600;
font-size: 14px;
.description {
font-size: 11px;
font-weight: 400;
a:hover {
text-decoration: underline;
}
}
}
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
@ -504,7 +541,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1em; margin-bottom: 1em;
gap: 10px; gap: 8px;
.entry { .entry {
display: flex; display: flex;