mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 17:11:55 +00:00
Add i18n to replies.
Add Fluent design category button. Update Account page with new design.
This commit is contained in:
Paul
@@ -1,5 +1,10 @@
|
||||
import { At, Key, Block } from "@styled-icons/boxicons-regular";
|
||||
import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
|
||||
import {
|
||||
Envelope,
|
||||
HelpCircle,
|
||||
Lock,
|
||||
Trash,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import { Profile } from "revolt-api/types/Users";
|
||||
@@ -8,6 +13,8 @@ import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { stopPropagation } from "../../../lib/stopPropagation";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import {
|
||||
ClientStatus,
|
||||
@@ -18,7 +25,9 @@ import {
|
||||
import Tooltip from "../../../components/common/Tooltip";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
|
||||
|
||||
export const Account = observer(() => {
|
||||
const { openScreen, writeClipboard } = useIntermediate();
|
||||
@@ -62,25 +71,29 @@ export const Account = observer(() => {
|
||||
<div className={styles.userDetail}>
|
||||
@{client.user!.username}
|
||||
<div className={styles.userid}>
|
||||
<Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.settings.pages.account.unique_id" />
|
||||
}>
|
||||
<HelpCircle size={16} />
|
||||
</Tooltip>
|
||||
<Tooltip content={<Text id="app.special.copy" />}>
|
||||
<a onClick={() => writeClipboard(client.user!._id)}>
|
||||
<a
|
||||
onClick={() =>
|
||||
writeClipboard(client.user!._id)
|
||||
}>
|
||||
{client.user!._id}
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => switchPage("profile")}
|
||||
contrast>
|
||||
Edit Profile
|
||||
|
||||
<Button onClick={() => switchPage("profile")} contrast>
|
||||
<Text id="app.settings.pages.profile.edit_profile" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.details}>
|
||||
<div>
|
||||
{(
|
||||
[
|
||||
["username", client.user!.username, <At size={24} />],
|
||||
@@ -88,64 +101,64 @@ export const Account = observer(() => {
|
||||
["password", "•••••••••", <Key size={24} />],
|
||||
] as const
|
||||
).map(([field, value, icon]) => (
|
||||
<div>
|
||||
{icon}
|
||||
<div className={styles.detail}>
|
||||
<div className={styles.subtext}>
|
||||
<Text id={`login.${field}`} />
|
||||
</div>
|
||||
<div className={styles.entry}>
|
||||
{field === "email" ? (
|
||||
revealEmail ? (
|
||||
<>
|
||||
{value}{" "}
|
||||
<a
|
||||
onClick={() =>
|
||||
setRevealEmail(false)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.hide" />
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
•••••••••••@{value.split("@").pop()}{" "}
|
||||
<a
|
||||
onClick={() =>
|
||||
setRevealEmail(true)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.reveal" />
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
<CategoryButton
|
||||
icon={icon}
|
||||
description={
|
||||
field === "email" ? (
|
||||
revealEmail ? (
|
||||
<>
|
||||
{value}{" "}
|
||||
<a
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
setRevealEmail(false),
|
||||
)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.hide" />
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "modify_account",
|
||||
field,
|
||||
})
|
||||
}
|
||||
plain>
|
||||
<Text id="app.settings.pages.account.change_field" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
•••••••••••@{value.split("@").pop()}{" "}
|
||||
<a
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
setRevealEmail(true),
|
||||
)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.reveal" />
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
value
|
||||
)
|
||||
}
|
||||
action="chevron"
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "modify_account",
|
||||
field,
|
||||
})
|
||||
}>
|
||||
<Overline type="subtle" noMargin>
|
||||
<Text id={`login.${field}`} />
|
||||
</Overline>
|
||||
</CategoryButton>
|
||||
))}
|
||||
</div>
|
||||
<h3>
|
||||
<Text id="app.settings.pages.account.2fa.title" />
|
||||
</h3>
|
||||
<h5><Text id="app.settings.pages.account.2fa.description" /></h5>
|
||||
<div className={styles.entrytest}>
|
||||
<Lock size={24}/>
|
||||
<div className={styles.content}>
|
||||
Currently not available
|
||||
<div className={styles.description}>
|
||||
<h5>
|
||||
<Text id="app.settings.pages.account.2fa.description" />
|
||||
</h5>
|
||||
<CategoryButton
|
||||
icon={<Lock size={24} color="var(--error)" />}
|
||||
description={
|
||||
<>
|
||||
Two-factor auth is currently work-in-progress, see{" "}
|
||||
<a
|
||||
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
|
||||
@@ -154,54 +167,45 @@ export const Account = observer(() => {
|
||||
tracking issue here
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<Button accent compact disabled>
|
||||
<Text id="app.settings.pages.account.2fa.add_auth" />
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
action={
|
||||
<Button accent compact disabled>
|
||||
<Text id="app.settings.pages.account.2fa.add_auth" />
|
||||
</Button>
|
||||
}>
|
||||
Currently not available
|
||||
</CategoryButton>
|
||||
<h3>
|
||||
<Text id="app.settings.pages.account.manage.title" />
|
||||
</h3>
|
||||
<h5>
|
||||
<Text id="app.settings.pages.account.manage.description" />
|
||||
</h5>
|
||||
<div className={styles.entrytest}>
|
||||
<Block size={24}/>
|
||||
<div className={styles.content}>
|
||||
<Text id="app.settings.pages.account.manage.disable" />
|
||||
<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">
|
||||
<Button error compact>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
<CategoryButton
|
||||
icon={<Block size={24} color="var(--error)" />}
|
||||
description={
|
||||
"Disable your account. You won't be able to access it unless you log back in."
|
||||
}
|
||||
action={
|
||||
<Button accent compact disabled>
|
||||
<Text id="general.unavailable" />
|
||||
</Button>
|
||||
</a>
|
||||
</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>
|
||||
}>
|
||||
<Text id="app.settings.pages.account.manage.disable" />
|
||||
</CategoryButton>
|
||||
<CategoryButton
|
||||
icon={<Trash size={24} color="var(--error)" />}
|
||||
description={"Delete your account, including all of your data."}
|
||||
action={
|
||||
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
|
||||
<Button error compact>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
</Button>
|
||||
</a>
|
||||
}>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
</CategoryButton>
|
||||
<Tip>
|
||||
<span>
|
||||
<Text id="app.settings.tips.account.a" />
|
||||
|
||||
@@ -78,42 +78,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.subtext {
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-foreground);
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: .875rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
@@ -126,7 +90,7 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
grid-template-columns: minmax(auto, 100%);
|
||||
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
@@ -152,40 +116,6 @@
|
||||
display: flex;
|
||||
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) {
|
||||
@@ -236,14 +166,13 @@
|
||||
}
|
||||
|
||||
details {
|
||||
|
||||
summary {
|
||||
font-size: .8125rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emojiPack {
|
||||
@@ -297,15 +226,12 @@
|
||||
text-transform: unset;
|
||||
|
||||
a {
|
||||
|
||||
opacity: 0.7;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@@ -331,7 +257,7 @@
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
padding: 8px;
|
||||
@@ -352,7 +278,7 @@
|
||||
row-gap: 8px;
|
||||
display: grid;
|
||||
column-gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
margin-bottom: 20px;
|
||||
|
||||
.entry {
|
||||
@@ -365,7 +291,7 @@
|
||||
flex: 1;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 8px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@@ -427,7 +353,7 @@
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-grow: 1;
|
||||
|
||||
|
||||
svg {
|
||||
margin-top: 1px;
|
||||
}
|
||||
@@ -452,7 +378,6 @@
|
||||
border-bottom: 2px solid var(--primary-background);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-deleting="true"] {
|
||||
@@ -487,7 +412,7 @@
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
color: var(--primary-text);
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -507,7 +432,7 @@
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--teriary-text);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -524,7 +449,7 @@
|
||||
align-items: unset;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
|
||||
> button {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -542,7 +467,7 @@
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
gap: 8px;
|
||||
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
@@ -601,4 +526,4 @@
|
||||
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user