Fix: Small update to categories and icons

src/components/common/messaging/MessageBox.tsx

@@ -24,6 +24,7 @@ import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads";
 import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
+import { ShieldX } from "@styled-icons/boxicons-regular";
 
 import ReplyBar from "./bars/ReplyBar";
 import FilePreview from './bars/FilePreview';
@@ -52,11 +53,16 @@ const Base = styled.div`
 `;
 
 const Blocked = styled.div`
-    padding: 15px 0;
-    line-height: 20px;
+    display: flex;
+    padding: 14px 0;
     user-select: none;
     font-size: .875rem;
     color: var(--tertiary-foreground);
+
+    svg {
+        flex-shrink: 0;
+        margin-right: 8px;
+    }
 `;
 
 const Action = styled.div`
@@ -80,7 +86,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
     if (!(permissions & ChannelPermission.SendMessage)) {
         return (
             <Base>
-                <Blocked><Text id="app.main.channel.misc.no_sending" /></Blocked>
+                <Blocked>
+                    <ShieldX size={20}/>
+                    <Text id="app.main.channel.misc.no_sending" />
+                </Blocked>
             </Base>
         )
     }

src/components/ui/Category.tsx

@@ -8,7 +8,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
     text-transform: uppercase;
 
     margin-top: 4px;
-    padding: 6px 10px;
+    padding: 6px 0;
     margin-bottom: 4px;
     white-space: nowrap;
     
@@ -22,6 +22,11 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
         cursor: pointer;
     }
 
+    &:first-child {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
     ${ props => props.variant === 'uniform' && css`
         padding-top: 6px;
     ` }

src/pages/settings/ServerSettings.tsx

@@ -30,7 +30,7 @@ export default function ServerSettings() {
         <GenericSettings
             pages={[
                 {
-                    category: <Category variant="uniform" text={server.name} />,
+                    category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category
                     id: 'overview',
                     icon: <ListUl size={20} />,
                     title: <Text id="app.settings.channel_pages.overview.title" />

src/pages/settings/Settings.tsx

@@ -8,17 +8,17 @@ import { GenericSettings } from "./GenericSettings";
 import { Route, useHistory } from "react-router-dom";
 import {
     Bell,
-    Box,
+    Palette,
     Coffee,
     Globe,
-    Image,
+    IdCard,
     LogOut,
     Sync as SyncIcon,
     Shield,
-    ToggleRight,
+    Vial,
     User
 } from "@styled-icons/boxicons-regular";
-import { Megaphone } from "@styled-icons/boxicons-solid";
+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";
@@ -59,7 +59,7 @@ export default function Settings() {
                 },
                 {
                     id: 'profile',
-                    icon: <Image size={20} />,
+                    icon: <IdCard size={20} />,
                     title: <Text id="app.settings.pages.profile.title" />
                 },
                 {
@@ -70,7 +70,7 @@ export default function Settings() {
                 {
                     category: <Text id="app.settings.categories.client_settings" />,
                     id: 'appearance',
-                    icon: <Box size={20} />,
+                    icon: <Palette size={20} />,
                     title: <Text id="app.settings.pages.appearance.title" />
                 },
                 {
@@ -91,7 +91,7 @@ export default function Settings() {
                 {
                     divider: true,
                     id: 'experiments',
-                    icon: <ToggleRight size={20} />,
+                    icon: <Vial size={20} />,
                     title: <Text id="app.settings.pages.experiments.title" />
                 },
                 {

src/pages/settings/panes/Experiments.tsx

@@ -36,7 +36,10 @@ export function Component(props: Props & WithDispatcher) {
             }
             {
                 AVAILABLE_EXPERIMENTS.length === 0 &&
-                <Text id="app.settings.pages.experiments.not_available" />
+                <div className={styles.empty}>
+                    <Text id="app.settings.pages.experiments.not_available" />
+                </div>
+                
             }
         </div>
     );