cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 15:12:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Changed design of account settings

Browse source
This commit is contained in:
nizune 2021-08-04 12:21:29 +02:00
parent 907e11bd5e
commit 73c4bf34d6
2 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/pages/settings/panes/Account.tsx
View file

@ -1,5 +1,5 @@
import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
import { At, Key } from "@styled-icons/boxicons-regular";
import { Envelope, HelpCircle } 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";
@ -77,7 +77,7 @@ export const Account = observer(() => {
[
["username", client.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>
@ -86,13 +86,13 @@ export const Account = observer(() => {
<div className={styles.subtext}>
<Text id={`login.${field}`} />
</div>
<p>
<div className={styles.entry}>
{field === "email" ? (
revealEmail ? (
value
) : (
<>
***********@{value.split("@").pop()}{" "}
•••••••••••@{value.split("@").pop()}{" "}
<a
onClick={() =>
setRevealEmail(true)
@ -104,7 +104,7 @@ export const Account = observer(() => {
) : (
value
)}
</p>
</div>
</div>
<div>
<Button

28
src/pages/settings/panes/Panes.module.scss
View file

@ -4,11 +4,11 @@
margin-top: 5px;
gap: 24px;
width: 100%;
padding: 1em;
padding: 12px 10px;
display: flex;
overflow: hidden;
align-items: center;
background: var(--secondary-header);
/*background: var(--secondary-header);*/
border-radius: var(--border-radius);
.userDetail {
@ -51,10 +51,13 @@
> div {
gap: 12px;
padding: 4px;
/*padding: 4px;*/
padding: 8px 12px;
display: flex;
align-items: center;
flex-direction: row;
background: var(--secondary-header);
border-radius: 6px;
> svg {
flex-shrink: 0;
@ -70,16 +73,23 @@
.subtext {
display: inline;
font-size: .875rem;
font-size: 12px;
font-weight: 600;
color: var(--foreground);
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;
@ -88,12 +98,6 @@
text-decoration: underline;
}
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
p {
@ -481,7 +485,7 @@
display: flex;
height: 45px;
padding: 0 8px;
background: var(--tertiary-background);
background: var(--secondary-header);
border-radius: var(--border-radius);
margin-top: 0;