Settings: Changed to solid icons, fixes

src/pages/settings/Settings.tsx

@@ -10,22 +10,19 @@ import {
     Bell,
     Palette,
     Coffee,
-    Globe,
     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 { 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" />
                 },
                 {

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 className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
-                    <UserIcon target={user} size={72} />
-                </Link>
                 <div className={styles.username}>@{user.username}</div>
             </div>
             <div className={styles.details}>

src/pages/settings/panes/Panes.module.scss

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

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>
     );
 }