cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04: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 { At, Key } from "@styled-icons/boxicons-regular";
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid"; import { Envelope, HelpCircle } 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";
@ -77,7 +77,7 @@ export const Account = observer(() => {
[ [
["username", client.user!.username, <At size={24} />], ["username", client.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>
@ -86,13 +86,13 @@ export const Account = observer(() => {
<div className={styles.subtext}> <div className={styles.subtext}>
<Text id={`login.${field}`} /> <Text id={`login.${field}`} />
</div> </div>
<p> <div className={styles.entry}>
{field === "email" ? ( {field === "email" ? (
revealEmail ? ( revealEmail ? (
value value
) : ( ) : (
<> <>
***********@{value.split("@").pop()}{" "} •••••••••••@{value.split("@").pop()}{" "}
<a <a
onClick={() => onClick={() =>
setRevealEmail(true) setRevealEmail(true)
@ -104,7 +104,7 @@ export const Account = observer(() => {
) : ( ) : (
value value
)} )}
</p> </div>
</div> </div>
<div> <div>
<Button <Button

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

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