From 29041e6d76ab0def1a484618f91b53890f53ff7e Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Tue, 23 May 2023 16:32:35 -0700
Subject: [PATCH] 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>
---
 .../cypress/e2e/online/06_online_mobile_live.cy.js    |  4 ++++
 .../common/UserDropdown/UserDropdown.module.scss      |  2 +-
 web/components/ui/Content/Content.module.scss         |  7 ++++++-
 web/components/ui/Content/Content.tsx                 | 11 ++++++-----
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js b/test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js
index 03721e2ba..4c095dd53 100644
--- a/test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js
+++ b/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();
 		});
diff --git a/web/components/common/UserDropdown/UserDropdown.module.scss b/web/components/common/UserDropdown/UserDropdown.module.scss
index 78e93f6a4..c44f202fc 100644
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -27,7 +27,7 @@
 }
 
 .chatToggle {
-  @include screen(mobile) {
+  @include screen(tablet) {
     display: none;
   }
 }
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 856e38ea5..18ca0f394 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/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%);
 }
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 43c932df8..5bb6e5eaa 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/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>
       )}
     </>