Minor styling changes

web/components/action-buttons/NotifyButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import { NotificationFilled } from '@ant-design/icons';
+import { BellFilled } from '@ant-design/icons';
 import s from './ActionButton.module.scss';
 
 interface Props {
@@ -8,12 +8,7 @@ interface Props {
 
 export default function NotifyButton({ onClick }: Props) {
   return (
-    <Button
-      type="primary"
-      className={`${s.button}`}
-      icon={<NotificationFilled />}
-      onClick={onClick}
-    >
+    <Button type="primary" className={`${s.button}`} icon={<BellFilled />} onClick={onClick}>
       Notify
     </Button>
   );

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,15 +1,15 @@
-import { Button, Spin } from 'antd';
+import { Button } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef } from 'react';
-import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
 import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatUserMessage } from '..';
+import { ChatTextField, ChatUserMessage } from '..';
 
 interface Props {
   messages: ChatMessage[];
-  loading: boolean;
+  // loading: boolean;
   usernameToHighlight: string;
   chatUserId: string;
   isModerator: boolean;
@@ -17,12 +17,12 @@ interface Props {
 }
 
 export default function ChatContainer(props: Props) {
-  const { messages, loading, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
+  const { messages, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
 
   const [atBottom, setAtBottom] = useState(false);
   // const [showButton, setShowButton] = useState(false);
   const chatContainerRef = useRef(null);
-  const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
+  // const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
 
   const getNameChangeViewForMessage = (message: NameChangeEvent) => {
     const { oldName, user } = message;
@@ -65,9 +65,9 @@ export default function ChatContainer(props: Props) {
 
   const MessagesTable = useMemo(
     () => (
-      <div style={{ height: '100%' }}>
+      <>
         <Virtuoso
-          style={{ height: '100%', width: 'auto' }}
+          style={{ height: 'calc(100% - 110px)', width: 'auto' }}
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
@@ -92,21 +92,21 @@ export default function ChatContainer(props: Props) {
             </Button>
           </div>
         )}
-      </div>
+      </>
     ),
     [messages, usernameToHighlight, chatUserId, isModerator, atBottom, isMobile],
   );
 
   return (
-    <div>
+    <div style={{ height: '100%' }}>
       {
         // <div className={s.chatHeader}>
         //   <span>stream chat</span>
         // </div>
+        //
       }
-      <Spin spinning={loading} indicator={spinIcon}>
-        {MessagesTable}
-      </Spin>
+      {MessagesTable}
+      <ChatTextField />
     </div>
   );
 }

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,4 +1,6 @@
 .root {
+  * {
+    z-index: 100; }
   position: relative;
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;

web/components/ui/Content/Content.tsx

@@ -24,7 +24,7 @@ import Sidebar from '../Sidebar';
 import Footer from '../Footer';
 import ChatContainer from '../../chat/ChatContainer';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import ChatTextField from '../../chat/ChatTextField/ChatTextField';
+// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
 import ActionButtonRow from '../../action-buttons/ActionButtonRow';
 import ActionButton from '../../action-buttons/ActionButton';
 import { Follower } from '../../../interfaces/follower';
@@ -150,7 +150,7 @@ export default function ContentComponent() {
           <StreamInfo isMobile={isMobile} />
         </div>
         <div className={s.lowerHalf}>
-          <Tabs defaultActiveKey="0">
+          <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
               <TabPane
                 tab="Chat"
@@ -162,13 +162,12 @@ export default function ContentComponent() {
                   <div className={s.mobileChat}>
                     <ChatContainer
                       messages={messages}
-                      loading={appState.chatLoading}
+                      // loading={appState.chatLoading}
                       usernameToHighlight={chatDisplayName}
                       chatUserId={chatUserId}
                       isModerator={false}
                       isMobile={isMobile}
                     />
-                    <ChatTextField />
                   </div>
                 </div>
               </TabPane>

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatContainer, ChatTextField } from '../../chat';
+import { ChatContainer } from '../../chat';
 import s from './Sidebar.module.scss';
 
 import {
@@ -28,7 +28,6 @@ export default function Sidebar() {
         isModerator={false}
         isMobile={false}
       />
-      <ChatTextField />
     </Sider>
   );
 }