Fix: small fixes for members sidebar

external/lang

@@ -1 +1 @@
-Subproject commit 588b882a3acca644c2f65b67cd341c88fd97989d
+Subproject commit 4ef73335436f3118d660cec24ff7972d3ccd5984

src/components/common/messaging/MessageBox.tsx

@@ -64,7 +64,7 @@ const Blocked = styled.div`
 
     svg {
         flex-shrink: 0;
-        margin-inline-end: 8px;
+        margin-inline-end: 10px;
     }
 `;
 

src/components/navigation/items/Item.module.scss

@@ -17,11 +17,15 @@
     color: var(--tertiary-foreground);
 
     &.normal {
-        height: 38px;
+        height: 42px;
     }
 
     &.compact {
         height: 32px;
+
+        &[data-mobile="true"] { // TOFIX: make sure this works on mobile 
+            height: 50px;
+        }
     }
 
     &.user {
@@ -65,6 +69,7 @@
         }
 
         &.avatar {
+            display: flex;
             flex-shrink: 0;
         }
 

src/pages/settings/server/Members.tsx

@@ -1,7 +1,7 @@
+import styles from './Panes.module.scss';
 import { useEffect, useState } from "preact/hooks";
 import { Servers } from "revolt.js/dist/api/objects";
-import Checkbox from "../../../components/ui/Checkbox";
+import UserIcon from "../../../components/common/user/UserIcon";
-import Tip from "../../../components/ui/Tip";
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 interface Props {
@@ -21,37 +21,15 @@ export function Members({ server }: Props) {
     }, [ ]);
 
     return (
-        <div>
+        <div className={styles.members}>
-            <Tip warning>This section is under construction.</Tip>
+            <div className={styles.subtitle}>
-            { members && members.length > 0 && users?.map(x => x && <div>
+                X Members
-                <br/>
+            </div>
-                <br/>
+            { members && members.length > 0 && users?.map(x => x && 
-                <br/>
+                <div className={styles.member}>
-
+                    <div>@{x.username}</div>
-                <span>@{x.username}</span>
+                </div>) 
-                { server.roles && Object.keys(server.roles).map(id => {
+            }
-                    let role = server.roles?.[id]!;
-                    let member = members.find(y => x._id === y._id.user)!;
-
-                    return (
-                        <Checkbox checked={member.roles?.includes(id) ?? false} onChange={selected => {
-                            let roles = (member.roles ?? []).filter(z => z !== id);
-                            if (selected) roles.push(id);
-
-                            ctx.client.servers.members.editMember(server._id, x._id, { roles });
-                            setMembers(
-                                [
-                                    ...members.filter(e => e._id.user !== x._id),
-                                    {
-                                        ...member,
-                                        roles
-                                    }
-                                ]
-                            );
-                        }}>{ role.name }</Checkbox>
-                    )
-                }) }
-            </div>) }
         </div>
     );
 }

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

@@ -55,3 +55,24 @@
         }
     }
 }
+
+.members {
+
+    .subtitle {
+        display: flex;
+        justify-content: space-between;
+        font-size: 13px;
+        text-transform: uppercase;
+        color: var(--secondary-foreground);
+        font-weight: 700;
+    }
+    
+    .member {
+        gap: 8px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        background: var(--secondary-background);
+    }
+}