Settings: Changed to solid icons, fixes

This commit is contained in:
nizune 2021-07-04 21:33:05 +02:00
parent 3191d15cd0
commit 1129123aed
5 changed files with 41 additions and 39 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 7ed91d39ac72edc9d70c8e531caf50172bd79ff6 Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b

View file

@ -10,22 +10,19 @@ import {
Bell, Bell,
Palette, Palette,
Coffee, Coffee,
Globe,
IdCard, IdCard,
LogOut, CheckShield,
Sync as SyncIcon, Flask,
Shield, User,
Vial, Megaphone
User } from "@styled-icons/boxicons-solid";
} from "@styled-icons/boxicons-regular"; import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
import { Gitlab } from "@styled-icons/boxicons-logos"; import { Gitlab } from "@styled-icons/boxicons-logos";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision"; import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import LineDivider from "../../components/ui/LineDivider"; import LineDivider from "../../components/ui/LineDivider";
import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import ButtonItem from "../../components/navigation/items/ButtonItem"; import ButtonItem from "../../components/navigation/items/ButtonItem";
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient"; import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
import { Account } from "./panes/Account"; import { Account } from "./panes/Account";
import { Profile } from "./panes/Profile"; import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions"; import { Sessions } from "./panes/Sessions";
@ -64,7 +61,7 @@ export default function Settings() {
}, },
{ {
id: 'sessions', id: 'sessions',
icon: <Shield size={20} />, icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" /> title: <Text id="app.settings.pages.sessions.title" />
}, },
{ {
@ -91,7 +88,7 @@ export default function Settings() {
{ {
divider: true, divider: true,
id: 'experiments', id: 'experiments',
icon: <Vial size={20} />, icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" /> title: <Text id="app.settings.pages.experiments.title" />
}, },
{ {

View file

@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import Overline from "../../../components/ui/Overline"; import Overline from "../../../components/ui/Overline";
import { At, Key, Envelope } from "@styled-icons/boxicons-regular"; import { Envelope, Key } from "@styled-icons/boxicons-solid";
import { At } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks"; import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@ -47,9 +48,7 @@ export function Account() {
return ( return (
<div className={styles.user}> <div className={styles.user}>
<div className={styles.banner}> <div className={styles.banner}>
<Link to="/settings/profile"> <UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
<UserIcon target={user} size={72} />
</Link>
<div className={styles.username}>@{user.username}</div> <div className={styles.username}>@{user.username}</div>
</div> </div>
<div className={styles.details}> <div className={styles.details}>

View file

@ -8,16 +8,18 @@
align-items: center; align-items: center;
background: var(--secondary-header); background: var(--secondary-header);
.avatar {
cursor: pointer;
transition: 0.2s ease filter;
&:hover {
filter: brightness(80%);
}
}
.username { .username {
font-size: 24px; font-size: 24px;
} font-weight: 600;
a {
transition: 0.2s ease filter;
}
a:hover {
filter: brightness(80%);
} }
} }
@ -32,6 +34,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
> svg {
flex-shrink: 0;
}
} }
.detail { .detail {

View file

@ -82,6 +82,20 @@ export function Overview({ server }: Props) {
}} }}
/> />
<h3>
<Text id="app.main.servers.custom_banner" />
</h3>
<FileUploader
height={160}
style="banner"
fileType="banners"
behaviour="upload"
maxFileSize={6_000_000}
onUpload={banner => client.servers.edit(server._id, { banner })}
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
/>
<h3> <h3>
<Text id="app.settings.server_pages.overview.system_messages" /> <Text id="app.settings.server_pages.overview.system_messages" />
</h3> </h3>
@ -93,7 +107,7 @@ export function Overview({ server }: Props) {
].map(([ i18n, key ]) => ].map(([ i18n, key ]) =>
// ! FIXME: temporary code just so we can expose the options // ! FIXME: temporary code just so we can expose the options
<p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}> <p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<span style={{ flexShrink: '0' }}>{i18n}</span> <span style={{ flexShrink: '0', flex: `25%` }}>{i18n}</span>
<ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'} <ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
onChange={e => { onChange={e => {
if (!changed) setChanged(true) if (!changed) setChanged(true)
@ -123,20 +137,6 @@ export function Overview({ server }: Props) {
<Text id="app.special.modals.actions.save" /> <Text id="app.special.modals.actions.save" />
</Button> </Button>
</p> </p>
<h3>
<Text id="app.main.servers.custom_banner" />
</h3>
<FileUploader
height={160}
style="banner"
fileType="banners"
behaviour="upload"
maxFileSize={6_000_000}
onUpload={banner => client.servers.edit(server._id, { banner })}
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
/>
</div> </div>
); );
} }