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>

test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js

@@ -29,6 +29,10 @@ filterTests(['mobile'], () => {
 			cy.get('#chat-input').should('be.visible');
 		});
 
+		it('Chat user menu should be visible', () => {
+			cy.get('#chat-modal-user-menu').should('be.visible');
+		});
+
 		it('Click on user menu', () => {
 			cy.get('#chat-modal-user-menu').click();
 		});

web/components/common/UserDropdown/UserDropdown.module.scss

@@ -27,7 +27,7 @@
 }
 
 .chatToggle {
-  @include screen(mobile) {
+  @include screen(tablet) {
     display: none;
   }
 }

web/components/ui/Content/Content.module.scss

@@ -110,6 +110,11 @@
   width: 100px;
   height: 40px;
   bottom: 40px;
-  right: 10px;
+  right: var(--content-padding);
   font-weight: 600;
+	font-size: 1em;
+	z-index: 99;
+	background-color: var(--theme-color-components-chat-background);
+	border-width: 0;
+  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 20%);
 }

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>
       )}
     </>