Address chat modal button issues (#3042)

* don't display chat button or modal if isModal is true. dont display the show/hide chat option in the userdropedown for tablet sizes either. tweak chat button styles and make chat button bg the same as the chat component bg color.

* only show chat button if online

* fix(chat): chat should be available through 5min buffer period. Fixes #3044

* fix(test): update mobile test

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/ui/Content/Content.tsx

@@ -17,6 +17,7 @@ import {
   isOnlineSelector,
   isMobileAtom,
   serverStatusState,
+  isChatAvailableSelector,
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 
@@ -97,6 +98,7 @@ export const Content: FC = () => {
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
+  const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
 
   const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
     useRecoilValue<ServerStatus>(serverStatusState);
@@ -180,7 +182,7 @@ export const Content: FC = () => {
     setSupportsBrowserNotifications(isPushNotificationSupported() && browserNotificationsEnabled);
   }, [browserNotificationsEnabled]);
 
-  const showChat = online && !chatDisabled && isChatVisible;
+  const showChat = isChatAvailable && !chatDisabled && isChatVisible;
 
   // accounts for sidebar width when online in desktop
   const dynamicPadding = showChat && !isMobile ? '320px' : '0px';
@@ -303,22 +305,21 @@ export const Content: FC = () => {
           handleClose={() => setShowFollowModal(false)}
         />
       </Modal>
-      {showChatModal && isChatVisible && (
+      {isMobile && showChatModal && isChatVisible && (
         <ChatModal
           messages={messages}
           currentUser={currentUser}
           handleClose={() => setShowChatModal(false)}
         />
       )}
-      {isChatVisible && (
+      {isMobile && isChatAvailable && (
         <Button
           id="mobile-chat-button"
           type="primary"
           onClick={() => setShowChatModal(true)}
           className={styles.floatingMobileChatModalButton}
-          style={{ zIndex: 99 }}
         >
-          Chat <MessageFilled style={{ transform: 'translateX(-1px)' }} />
+          Chat <MessageFilled />
         </Button>
       )}
     </>