From 87f3afd8fde309acb3362736a6944d380cf6d1fd Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 24 Apr 2022 16:47:24 +0530
Subject: [PATCH] Fix members btn not visible in small devices

---
 src/app/molecules/message/Message.scss     | 3 ++-
 src/app/organisms/room/RoomViewHeader.jsx  | 1 +
 src/app/organisms/room/RoomViewHeader.scss | 5 +++++
 src/app/partials/_screen.scss              | 2 +-
 src/index.scss                             | 4 +++-
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 54c9ad8..a1f5051 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -1,6 +1,7 @@
 @use '../../atoms/scroll/scrollbar';
 @use '../../partials/text';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .message,
 .ph-msg {
@@ -95,7 +96,7 @@
 .message__reactions {
   max-width: calc(100% - 88px);
   min-width: 0;
-  @media (max-width: 1124px) {
+  @include screen.smallerThan(tabletBreakpoint) {
     max-width: 100%;
   }
 }
diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index a4915ad..849ba14 100644
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -95,6 +95,7 @@ function RoomViewHeader({ roomId }) {
       </button>
       <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}
         tooltip="Options"
diff --git a/src/app/organisms/room/RoomViewHeader.scss b/src/app/organisms/room/RoomViewHeader.scss
index 267cd11..fc19c06 100644
--- a/src/app/organisms/room/RoomViewHeader.scss
+++ b/src/app/organisms/room/RoomViewHeader.scss
@@ -32,6 +32,11 @@
     display: none;
   }
 }
+.room-header__members-btn {
+  @include screen.biggerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
 
 .room-header__back-btn {
   @include dir.side(margin, 0, var(--sp-tight));
diff --git a/src/app/partials/_screen.scss b/src/app/partials/_screen.scss
index 6d524f2..99a0907 100644
--- a/src/app/partials/_screen.scss
+++ b/src/app/partials/_screen.scss
@@ -1,5 +1,5 @@
 
-$breakpoint-tablet: 900px;
+$breakpoint-tablet: 1124px;
 $breakpoint-mobile: 750px;
 
 @mixin smallerThan($deviceBreakpoint) {
diff --git a/src/index.scss b/src/index.scss
index 0276fea..b803534 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,5 @@
+@use './app/partials/screen';
+
 :root {
 
   /* background color | --bg-[background type]: value */
@@ -179,7 +181,7 @@
 
   --popup-window-drawer-width: 280px;
   
-  @media (max-width: 1124px) {
+  @include screen.smallerThan(tabletBreakpoint) {
     --navigation-drawer-width: calc(240px + var(--border-width));
     --people-drawer-width: calc(256px - var(--border-width));
     --popup-window-drawer-width: 240px;