From 3972e076f0208ee9276ca19ac11c1f7320870eb2 Mon Sep 17 00:00:00 2001
From: Mihai-Andrei Uscat <52234168+muscat1@users.noreply.github.com>
Date: Thu, 18 Mar 2021 15:56:20 +0200
Subject: [PATCH] fix(Chat): Fix modals displaying improperly due to chat.

* Adjust chat font size.
* Adjust invite more button and text size.
* Remove useless constant.
---
 css/_atlaskit_overrides.scss                  | 28 ++++++-------------
 css/_chat.scss                                | 19 +++++++++----
 css/modals/invite/_invite_more.scss           | 17 +++++++++--
 .../features/chat/components/AbstractChat.js  |  7 ++---
 react/features/chat/constants.js              |  4 +--
 5 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss
index a2c5917998..ef34ef6b00 100644
--- a/css/_atlaskit_overrides.scss
+++ b/css/_atlaskit_overrides.scss
@@ -113,27 +113,17 @@
     }
 }
 
-@media (min-width: 580px) and (max-width: 680px) {
-    .mobile-browser {
-        &.shift-right .focus-lock > div > div {
-            @include full-size-modal-positioner();
-        }
-
-        &.shift-right .focus-lock [role="dialog"] {
-            @include full-size-modal-dialog();
-        }
+@media (max-width: 580px) {
+    // Override Atlaskit inline style for the modal background.
+    // Important is unfortunately needed for that.
+    .shift-right .focus-lock [role="dialog"][style] {
+        background-color: $chatBackgroundColor !important;
     }
-}
-
-// Override Atlaskit inline style for the modal background.
-// Important is unfortunately needed for that.
-.shift-right .focus-lock [role="dialog"][style] {
-    background-color: $chatBackgroundColor !important;
-}
 
-// Remove Atlaskit padding from the chat dialog.
-.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
-    padding: 0;
+    // Remove Atlaskit padding from the chat dialog.
+    .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
+        padding: 0;
+    }
 }
 
 div.Tooltip {
diff --git a/css/_chat.scss b/css/_chat.scss
index 6ab54357ad..16b5ee2254 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -129,10 +129,6 @@
 
     &.populated {
         #chat-input {
-            &:focus-within {
-                border: 1px solid #619CF4;
-            }
-
             .send-button {
                 background: #1B67EC;
                 cursor: pointer;
@@ -161,6 +157,10 @@
     padding: 4px;
     border-radius: 3px;
 
+    &:focus-within {
+        border: 1px solid #619CF4;
+    }
+
     * {
         background-color: transparent;
     }
@@ -214,7 +214,7 @@
     border-radius:0;
     box-shadow: none;
     color: white;
-    font-size: 15px;
+    font-size: 14px;
     padding: 10px;
     overflow-y: auto;
     resize: none;
@@ -271,6 +271,14 @@
             height: 48px;
         }
     }
+
+    #usermsg {
+        font-size: 16px;
+    }
+
+    .chatmessage .usermessage {
+        font-size: 16px;
+    }
 }
 
 .sideToolbarContainer {
@@ -309,6 +317,7 @@
 
     .usermessage {
         white-space: pre-wrap;
+        font-size: 14px;
     }
 
     &.error {
diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss
index 56ef05cf39..93273d0b79 100644
--- a/css/modals/invite/_invite_more.scss
+++ b/css/modals/invite/_invite_more.scss
@@ -16,7 +16,7 @@
         background: rgba(0, 0, 0, 0.7);
         border-radius: 8px;
         color: #fff;
-        font-size: 16px;
+        font-size: 14px;
         line-height: 24px;
         font-weight: 600;
     }
@@ -32,9 +32,9 @@
     &-button {
         display: flex;
         max-width: 100%;
-        height: 48px;
+        height: 40px;
         box-sizing: border-box;
-        padding: 12px 16px;
+        padding: 8px 16px;
         background: #0376DA;
         border-radius: 3px;
         cursor: pointer;
@@ -207,3 +207,14 @@
         }
     }
 }
+
+.mobile-browser {
+    .invite-more-content {
+        font-size: 16px;
+    }
+
+    .invite-more-button {
+        height: 48px;
+        padding: 12px 16px;
+    }
+}
diff --git a/react/features/chat/components/AbstractChat.js b/react/features/chat/components/AbstractChat.js
index 537d0ca00b..22e6d5f87f 100644
--- a/react/features/chat/components/AbstractChat.js
+++ b/react/features/chat/components/AbstractChat.js
@@ -3,10 +3,9 @@
 import { Component } from 'react';
 import type { Dispatch } from 'redux';
 
-import { isMobileBrowser } from '../../base/environment/utils';
 import { getLocalParticipant } from '../../base/participants';
 import { sendMessage } from '../actions';
-import { DESKTOP_SMALL_WIDTH_THRESHOLD, MOBILE_SMALL_WIDTH_THRESHOLD } from '../constants';
+import { SMALL_WIDTH_THRESHOLD } from '../constants';
 
 /**
  * The type of the React {@code Component} props of {@code AbstractChat}.
@@ -106,9 +105,7 @@ export function _mapStateToProps(state: Object) {
     const _localParticipant = getLocalParticipant(state);
 
     return {
-        _isModal: isMobileBrowser()
-            ? window.innerWidth <= MOBILE_SMALL_WIDTH_THRESHOLD
-            : window.innerWidth <= DESKTOP_SMALL_WIDTH_THRESHOLD,
+        _isModal: window.innerWidth <= SMALL_WIDTH_THRESHOLD,
         _isOpen: isOpen,
         _messages: messages,
         _showNamePrompt: !_localParticipant.name
diff --git a/react/features/chat/constants.js b/react/features/chat/constants.js
index 7756488883..3cbbba58e1 100644
--- a/react/features/chat/constants.js
+++ b/react/features/chat/constants.js
@@ -30,6 +30,4 @@ export const MESSAGE_TYPE_LOCAL = 'local';
  */
 export const MESSAGE_TYPE_REMOTE = 'remote';
 
-export const DESKTOP_SMALL_WIDTH_THRESHOLD = 580;
-
-export const MOBILE_SMALL_WIDTH_THRESHOLD = 680;
+export const SMALL_WIDTH_THRESHOLD = 580;