refactored ChannelSelector component

src/app/organisms/navigation/Drawer.jsx

@@ -102,6 +102,9 @@ function renderSelector(room, roomId, isSelected, isDM) {
   return (
     <ChannelSelector
       key={roomId}
+      name={room.name}
+      roomId={roomId}
+      imageSrc={isDM ? imageSrc : null}
       iconSrc={
         isDM
           ? null
@@ -112,16 +115,12 @@ function renderSelector(room, roomId, isSelected, isDM) {
             return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
           })()
       }
-      imageSrc={isDM ? imageSrc : null}
-      roomId={roomId}
-      unread={doesRoomHaveUnread(room)}
-      onClick={() => selectRoom(roomId)}
+      isSelected={isSelected}
+      isUnread={doesRoomHaveUnread(room)}
       notificationCount={room.getUnreadNotificationCount('total')}
-      alert={room.getUnreadNotificationCount('highlight') !== 0}
-      selected={isSelected}
-    >
-      {room.name}
-    </ChannelSelector>
+      isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+      onClick={() => selectRoom(roomId)}
+    />
   );
 }
 

src/app/organisms/navigation/Drawer.scss

@@ -35,7 +35,18 @@
 .channels-container {
   padding-bottom: var(--sp-extra-loose);
 
-  & > .channel-selector__button-wrapper:first-child {
+  & > .channel-selector {
+    width: calc(100% - var(--sp-extra-tight));
+    margin-left: auto;
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+  }
+
+  & > .channel-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }