From 71bc4383332ef6648df4925138593a0c5f0d3c22 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Thu, 1 Jul 2021 18:54:11 +0200
Subject: [PATCH] Fix: small fixes for members sidebar

---
 external/lang                                 |  2 +-
 .../common/messaging/MessageBox.tsx           |  2 +-
 .../navigation/items/Item.module.scss         |  7 ++-
 src/pages/settings/server/Members.tsx         | 44 +++++--------------
 src/pages/settings/server/Panes.module.scss   | 21 +++++++++
 5 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/external/lang b/external/lang
index 588b882a..4ef73335 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 588b882a3acca644c2f65b67cd341c88fd97989d
+Subproject commit 4ef73335436f3118d660cec24ff7972d3ccd5984
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 1141d9aa..19ab5ce9 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/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;
     }
 `;
 
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index afb54073..fb855f0a 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/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;
         }
 
diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx
index b569e71a..e7d30a6f 100644
--- a/src/pages/settings/server/Members.tsx
+++ b/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>
     );
 }
diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss
index ba25ba08..91e4cb3b 100644
--- a/src/pages/settings/server/Panes.module.scss
+++ b/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);
+    }
+}
\ No newline at end of file