Reworked mobile UI for some components

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

@@ -1,32 +1,8 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-  &.mobile {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 64px);
-    overflow-y: hidden;
-    .topHalf {
-      border: 1px dashed white;
-      height: calc(40vh - 64px);
-      overflow: hidden;
-    }
-    .lowerHalf {
-      border: 1px dashed red;
-      height: 60vh;
-    }
-  }
 }
 
-.mobileChat {
-  position: relative;
-  display: block;
-  // top: 0px;
-  width: 100%;
-  [data-virtuoso-scroller] {
-    height: 500px;
-  }
-}
 
 .leftCol {
   display: flex;
@@ -40,3 +16,26 @@
   z-index: 999999;
 }
 
+.mobile {
+  &.root {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 64px);
+    overflow: hidden;
+    .topHalf {
+      display: grid;
+      grid-template-rows: 30vh 5vh 5vh;
+      height: 40vh;
+      // overflow: hidden;
+    }
+    .lowerHalf {
+      height: 60vh;
+    }
+  }
+  .mobileChat {
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+}

web/components/ui/Content/Content.tsx

@@ -11,7 +11,6 @@ import {
   chatDisplayNameAtom,
   chatUserIdAtom,
   isChatVisibleSelector,
-  serverStatusState,
   appStateAtom,
   isOnlineSelector,
   isMobileAtom,
@@ -28,8 +27,6 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatTextField from '../../chat/ChatTextField/ChatTextField';
 import ActionButtonRow from '../../action-buttons/ActionButtonRow';
 import ActionButton from '../../action-buttons/ActionButton';
-import Statusbar from '../Statusbar/Statusbar';
-import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Follower } from '../../../interfaces/follower';
 import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
 import OfflineBanner from '../OfflineBanner/OfflineBanner';
@@ -38,13 +35,13 @@ import FollowButton from '../../action-buttons/FollowButton';
 import NotifyButton from '../../action-buttons/NotifyButton';
 import Modal from '../Modal/Modal';
 import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal';
+import StreamInfo from '../../common/StreamInfo';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
 
 export default function ContentComponent() {
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
-  const status = useRecoilValue<ServerStatus>(serverStatusState);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
@@ -54,7 +51,6 @@ export default function ContentComponent() {
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
 
   const { extraPageContent, version, name, summary } = clientConfig;
-  const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
 
@@ -129,13 +125,6 @@ export default function ContentComponent() {
               text="Stream is offline text goes here. Will create a new form to set it in the Admin."
             />
           )}
-
-          <Statusbar
-            online={online}
-            lastConnectTime={lastConnectTime}
-            lastDisconnectTime={lastDisconnectTime}
-            viewerCount={viewerCount}
-          />
           <div className={s.buttonsLogoTitleSection}>
             <ActionButtonRow>
               {externalActionButtons}
@@ -158,12 +147,18 @@ export default function ContentComponent() {
               <BrowserNotifyModal />
             </Modal>
           </div>
+          <StreamInfo isMobile={isMobile} />
         </div>
         <div className={s.lowerHalf}>
           <Tabs defaultActiveKey="0">
             {isChatVisible && isMobile && (
-              <TabPane tab="Chat" key="0" className={s.pageContentSection}>
-                <div style={{ position: 'relative' }}>
+              <TabPane
+                tab="Chat"
+                key="0"
+                className={s.pageContentSection}
+                style={{ height: '100%' }}
+              >
+                <div style={{ position: 'relative', height: '100%' }}>
                   <div className={s.mobileChat}>
                     <ChatContainer
                       messages={messages}
@@ -173,8 +168,8 @@ export default function ContentComponent() {
                       isModerator={false}
                       isMobile={isMobile}
                     />
+                    <ChatTextField />
                   </div>
-                  <ChatTextField />
                 </div>
               </TabPane>
             )}
@@ -186,7 +181,7 @@ export default function ContentComponent() {
               <FollowerCollection total={total} followers={followers} />
             </TabPane>
           </Tabs>
-          <Footer version={version} />
+          {!isMobile && <Footer version={version} />}
         </div>
       </div>
       {isChatVisible && !isMobile && <Sidebar />}

web/components/ui/Header/Header.module.scss

@@ -5,15 +5,22 @@
   align-items: center;
   justify-content: space-between;
   z-index: 20;
-  padding: 0.5rem 1rem;
+  padding: 0.4rem .7rem;
   background-color: var(--default-bg-color);
   .logo {
     display: flex;
     align-items: center;
     span {
-      margin-left: 1rem;
-      font-size: 1.7rem;
+      margin-left: .5rem;
+      font-size: 1.5rem;
       font-weight: 600;
     }
   }
 }
+
+@media (max-width: 768px) {
+  .header {
+    line-height: 5vh;
+    height: 5vh;
+  }
+}

web/components/ui/Logo/Logo.module.scss

@@ -4,8 +4,9 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  width: clamp(4rem, 10vw, 120px);
-  height: clamp(4rem, 10vw, 120px);
+  margin-right: .5rem;
+  width: clamp(2.5vh, 9vw, 120px);
+  height: clamp(2.5vh, 9vw, 120px);
   border-radius: 50%;
   border-width: 3px;
   border-style: solid;
@@ -27,3 +28,4 @@
   background-position: center;
   overflow: hidden;
 }
+

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -7,9 +7,8 @@
   width: clamp(200px, 100%, 300px);
   display: flex;
   flex-direction: column;
-  ;
   background-color: var(--theme-background-secondary);
-  margin: auto;
+  margin: 1rem auto;
   border-radius: var(--theme-rounded-corners);
   padding: 1rem;
 }

web/components/ui/Statusbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Statusbar';

web/components/ui/index.tsx

@@ -4,3 +4,4 @@ export { default as Footer } from './Footer/index';
 export { default as Content } from './Content/index';
 export { default as ModIcon } from './ModIcon';
 export { default as ServerLogo } from './Logo';
+export { default as StatusBar } from './Statusbar';