diff --git a/external/lang b/external/lang
index 7ed91d39ac72edc9d70c8e531caf50172bd79ff6..2a9ef2c8025dd71a20fddca7c94cb7af30978c4b 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 7ed91d39ac72edc9d70c8e531caf50172bd79ff6
+Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 0141409dba7720b57c74b3d8f950caa9e87b9e04..4fa2b5827333b1fb9f186fe5176263182f3a0e92 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -10,22 +10,19 @@ import {
Bell,
Palette,
Coffee,
- Globe,
IdCard,
- LogOut,
- Sync as SyncIcon,
- Shield,
- Vial,
- User
-} from "@styled-icons/boxicons-regular";
-import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
+ CheckShield,
+ Flask,
+ User,
+ Megaphone
+} from "@styled-icons/boxicons-solid";
+import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
import { Gitlab } from "@styled-icons/boxicons-logos";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import LineDivider from "../../components/ui/LineDivider";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
-
import { Account } from "./panes/Account";
import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions";
@@ -64,7 +61,7 @@ export default function Settings() {
},
{
id: 'sessions',
- icon: <Shield size={20} />,
+ icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" />
},
{
@@ -91,7 +88,7 @@ export default function Settings() {
{
divider: true,
id: 'experiments',
- icon: <Vial size={20} />,
+ icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" />
},
{
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 1fc80c251707b374215c26387807ac08cfc96814..7a849e0e45e01b704ba38064b384fbe7fc0c6bbb 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
import { Users } from "revolt.js/dist/api/objects";
import { Link, useHistory } from "react-router-dom";
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 UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -47,9 +48,7 @@ export function Account() {
return (
<div className={styles.user}>
<div className={styles.banner}>
- <Link to="/settings/profile">
- <UserIcon target={user} size={72} />
- </Link>
+ <UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
<div className={styles.username}>@{user.username}</div>
</div>
<div className={styles.details}>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index f2f41494202b20d59f52cede6c342c760e95f8bf..206810205c814fa4da06b0474ae654d43e9255e1 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -8,16 +8,18 @@
align-items: center;
background: var(--secondary-header);
- .username {
- font-size: 24px;
- }
-
- a {
+ .avatar {
+ cursor: pointer;
transition: 0.2s ease filter;
+
+ &:hover {
+ filter: brightness(80%);
+ }
}
- a:hover {
- filter: brightness(80%);
+ .username {
+ font-size: 24px;
+ font-weight: 600;
}
}
@@ -32,6 +34,10 @@
display: flex;
align-items: center;
flex-direction: row;
+
+ > svg {
+ flex-shrink: 0;
+ }
}
.detail {
diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx
index 19c8fed396db6a1498dc65cc144551337e79587d..849e0e01517e595f002ae37042e4b787dfd35181 100644
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -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>
<Text id="app.settings.server_pages.overview.system_messages" />
</h3>
@@ -93,7 +107,7 @@ export function Overview({ server }: Props) {
].map(([ i18n, key ]) =>
// ! FIXME: temporary code just so we can expose the options
<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'}
onChange={e => {
if (!changed) setChanged(true)
@@ -123,20 +137,6 @@ export function Overview({ server }: Props) {
<Text id="app.special.modals.actions.save" />
</Button>
</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>
);
}