fix(settings): improved server settings tabs

src/pages/channels/Channel.tsx

@@ -66,14 +66,13 @@ const PlaceholderBase = styled.div`
         animation-duration: 3s;
         animation-iteration-count: infinite;
         animation-timing-function: ease-in-out;
-        margin-left: 30px;
-        margin-top: 5px;
     }
 
     .placeholder {
         justify-content: center;
         text-align: center;
         margin: auto;
+        padding: 12px;
 
         .primary {
             color: var(--secondary-foreground);

src/pages/settings/ServerSettings.tsx

@@ -50,7 +50,7 @@ export default observer(() => {
         <GenericSettings
             pages={[
                 {
-                    category: <Category variant="uniform" text={server.name} />,
+                    category: <div>{server.name}</div>,
                     id: "overview",
                     icon: <InfoCircle size={20} />,
                     title: (
@@ -66,6 +66,13 @@ export default observer(() => {
                     hideTitle: true,
                 },
                 {
+                    id: "roles",
+                    icon: <FlagAlt size={20} />,
+                    title: <Text id="app.settings.server_pages.roles.title" />,
+                    hideTitle: true,
+                },
+                {
+                    category: "User Management",
                     id: "members",
                     icon: <Group size={20} />,
                     title: (
@@ -84,12 +91,6 @@ export default observer(() => {
                     icon: <UserX size={20} />,
                     title: <Text id="app.settings.server_pages.bans.title" />,
                 },
-                {
-                    id: "roles",
-                    icon: <FlagAlt size={20} />,
-                    title: <Text id="app.settings.server_pages.roles.title" />,
-                    hideTitle: true,
-                },
             ]}
             children={
                 <Switch>

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

@@ -486,7 +486,7 @@
         }
 
         .entry > span > span {
-            gap: 12px;
+            gap: 8px;
             display: flex;
             align-items: center;
             flex-direction: row;
@@ -501,7 +501,7 @@
                 }
 
                 > img {
-                    height: 32px !important;
+                    height: 28px !important;
                 }
             }