Fixed UI issues for Sidebar

Author: abirc8010

packages/react/src/views/Message/Message.styles.js

@@ -75,7 +75,7 @@ export const getMessageDividerStyles = (theme) => {
       line-height: 1rem;
       position: relative;
       display: flex;
-      z-index: 1000;
+      z-index: 1;
       align-items: center;
       margin-top: 0.5rem;
       margin-bottom: 0.75rem;

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { isSameDay, format } from 'date-fns';
+import React, { useEffect, useState } from 'react';
+import { isSameDay, format, set } from 'date-fns';
 import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements';
 import { MessageDivider } from '../../Message/MessageDivider';
 import Message from '../../Message/Message';
@@ -41,14 +41,22 @@ export const MessageAggregator = ({
 
   const noMessages = messageList?.length === 0 || !messageRendered;
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  useEffect(() => {
+    setIsSmallScreen(window.innerWidth < 780);
+  }, []);
   return (
     <ViewComponent
       title={title}
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{ padding: 0 }}
+      style={{
+        ...(isSmallScreen && viewType === 'Sidebar'
+          ? styles.sidebarStyles
+          : null),
+        backgroundColor: theme.colors.background,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-const getMessageAggregatorStyles = () => {
+const getMessageAggregatorStyles = (theme) => {
   const styles = {
     listContainerStyles: css`
       flex: 1;
@@ -9,6 +9,7 @@ const getMessageAggregatorStyles = () => {
       justify-content: initial;
       align-items: initial;
       max-width: 100%;
+      overflow-y: auto;
     `,
 
     noMessageStyles: css`
@@ -21,6 +22,15 @@ const getMessageAggregatorStyles = () => {
       flex-direction: column;
       align-items: center;
     `,
+    sidebarStyles: {
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      top: '2',
+      width: '100%',
+      height: '93%',
+      zIndex: 1,
+    },
   };
 
   return styles;

packages/react/src/views/RoomInformation/RoomInformation.js

@@ -1,19 +1,22 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 import {
   Box,
   Avatar,
   Sidebar,
   Popup,
   useComponentOverrides,
+  useTheme,
 } from '@embeddedchat/ui-elements';
+import { getRoomInformationStyles } from './RoomInformation.styles';
 import RCContext from '../../context/RCInstance';
 import { useChannelStore } from '../../store';
 import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const Roominfo = () => {
   const { RCInstance } = useContext(RCContext);
-
+  const { theme } = useTheme();
+  const styles = getRoomInformationStyles(theme);
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
@@ -24,12 +27,21 @@ const Roominfo = () => {
   };
 
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  useEffect(() => {
+    setIsSmallScreen(window.innerWidth < 780);
+  }, []);
   return (
     <ViewComponent
       title="Room Information"
       iconName="info"
       onClose={() => setExclusiveState(null)}
+      style={{
+        ...(isSmallScreen && viewType === 'Sidebar'
+          ? styles.sidebarStyles
+          : null),
+        backgroundColor: theme.colors.background,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

packages/react/src/views/RoomInformation/RoomInformation.styles.js

@@ -0,0 +1,14 @@
+export const getRoomInformationStyles = () => {
+  const styles = {
+    sidebarStyles: {
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      top: '1',
+      width: '100%',
+      height: '93%',
+      zIndex: 1,
+    },
+  };
+  return styles;
+};

packages/react/src/views/RoomMembers/RoomMember.js

@@ -50,11 +50,21 @@ const RoomMembers = ({ members }) => {
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  useEffect(() => {
+    setIsSmallScreen(window.innerWidth < 780);
+  }, []);
   return (
     <ViewComponent
       title="Members"
       iconName="members"
       onClose={() => setExclusiveState(null)}
+      style={{
+        ...(isSmallScreen && viewType === 'Sidebar'
+          ? styles.containerStyles
+          : null),
+        backgroundColor: theme.colors.background,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -64,7 +74,7 @@ const RoomMembers = ({ members }) => {
       {isLoading ? (
         <LoadingIndicator />
       ) : (
-        <Box css={styles.container}>
+        <Box css={styles.memberListStyles}>
           {showInvite ? (
             <InviteMembers />
           ) : (
@@ -75,7 +85,7 @@ const RoomMembers = ({ members }) => {
 
               {isAdmin && (
                 <Button
-                  style={{ marginTop: '10px', width: '100%' }}
+                  style={styles.inviteButtonStyles}
                   onClick={async () => {
                     toggleInviteView();
                   }}

packages/react/src/views/RoomMembers/RoomMembers.styles.js

@@ -2,14 +2,30 @@ import { css } from '@emotion/react';
 
 export const getRoomMemberStyles = () => {
   const styles = {
-    container: css`
+    inviteButtonStyles: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: '1rem 1rem 1rem 1rem',
+      width: '100%',
+    },
+    memberListStyles: css`
+      padding: 0 1rem 1rem;
       display: flex;
       flex-direction: column;
-      overflow: auto;
       width: 100%;
-      justify-content: center;
-      padding: 0 1rem 1rem;
+      height: 100%;
+      overflow-y: auto;
     `,
+    containerStyles: {
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      top: '60px',
+      width: '100%',
+      height: 'auto',
+      zIndex: 1,
+    },
   };
 
   return styles;