From 63fb4d57e2585ba3664c54e57dc7b7cb363d7585 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 31 Jan 2022 15:20:12 +0530
Subject: [PATCH] Improve UX of members tab

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 .../molecules/room-members/RoomMembers.jsx    | 33 ++++++++++---------
 .../molecules/room-members/RoomMembers.scss   | 28 +++++++++++-----
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/app/molecules/room-members/RoomMembers.jsx b/src/app/molecules/room-members/RoomMembers.jsx
index f7dfbf2..1f409f4 100644
--- a/src/app/molecules/room-members/RoomMembers.jsx
+++ b/src/app/molecules/room-members/RoomMembers.jsx
@@ -137,22 +137,25 @@ function RoomMembers({ roomId }) {
   const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount);
   return (
     <div className="room-members">
-      <SegmentedControls
-        selected={
-          (() => {
-            const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
-            return getSegmentIndex[membership];
-          })()
-        }
-        segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
-        onSelect={(index) => {
-          const memberships = ['join', 'invite', 'ban'];
-          setMembership(memberships[index]);
-        }}
-      />
-      <Input onChange={handleSearch} label="Search member" placeholder="name" />
-      <div className="room-members__list">
+      <MenuHeader>Search member</MenuHeader>
+      <Input onChange={handleSearch} placeholder="Search for name" />
+      <div className="room-members__header">
         <MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
+        <SegmentedControls
+          selected={
+            (() => {
+              const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
+              return getSegmentIndex[membership];
+            })()
+          }
+          segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
+          onSelect={(index) => {
+            const memberships = ['join', 'invite', 'ban'];
+            setMembership(memberships[index]);
+          }}
+        />
+      </div>
+      <div className="room-members__list">
         {mList.map((member) => (
           <PeopleSelector
             key={member.userId}
diff --git a/src/app/molecules/room-members/RoomMembers.scss b/src/app/molecules/room-members/RoomMembers.scss
index d74c08a..4715508 100644
--- a/src/app/molecules/room-members/RoomMembers.scss
+++ b/src/app/molecules/room-members/RoomMembers.scss
@@ -1,17 +1,29 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .room-members {
   & .input-container {
     margin: var(--sp-normal);
-  }
-  
-  & .segmented-controls {
-    margin: var(--sp-normal);
-    display: flex;
-    & > * {
-      flex: 1;
-    }
   } 
 
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    & .context-menu__header {
+      @extend .cp-fx__item-one;
+      margin-top: 14px;
+      border-top: 1px solid var(--bg-surface-border);
+      border-bottom: none;
+    }
+    & .segmented-controls {
+      @include dir.side(margin, 0, var(--sp-normal));
+      & > button {
+        padding: var(--sp-ultra-tight) 0;
+      }
+    }
+  }
   &__list {
+    
     & .people-selector__container:last-child {
       margin-bottom: var(--sp-extra-tight);
     }