Fix: small fixes for members sidebar

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 Tip from "../../../components/ui/Tip";
+import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 interface Props {
@@ -21,37 +21,15 @@ export function Members({ server }: Props) {
     }, [ ]);
 
     return (
-        <div>
-            <Tip warning>This section is under construction.</Tip>
-            { members && members.length > 0 && users?.map(x => x && <div>
-                <br/>
-                <br/>
-                <br/>
-
-                <span>@{x.username}</span>
-                { 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 className={styles.members}>
+            <div className={styles.subtitle}>
+                X Members
+            </div>
+            { members && members.length > 0 && users?.map(x => x && 
+                <div className={styles.member}>
+                    <div>@{x.username}</div>
+                </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);
+    }
+}