From 1129123aeda76b0ce042521852fcc6409ffc6691 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sun, 4 Jul 2021 21:33:05 +0200
Subject: [PATCH] Settings: Changed to solid icons, fixes
---
external/lang | 2 +-
src/pages/settings/Settings.tsx | 19 ++++++--------
src/pages/settings/panes/Account.tsx | 7 +++--
src/pages/settings/panes/Panes.module.scss | 20 ++++++++++-----
src/pages/settings/server/Overview.tsx | 30 +++++++++++-----------
5 files changed, 40 insertions(+), 38 deletions(-)
diff --git a/external/lang b/external/lang
index 7ed91d3..2a9ef2c 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 0141409..4fa2b58 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 1fc80c2..7a849e0 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 f2f4149..2068102 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 19c8fed..849e0e0 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>
);
}
--
GitLab