moved footer to layout. changed some css

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   position: relative;
   display: flex;
@@ -54,14 +56,14 @@
 }
 
 .sendButton {
+  display: none;
   border: none;
   background: none;
   cursor: pointer;
   padding: 0 1rem;
-  display: none;
 
   // Only show the chat send button on narrow screens to assist in mobile use.
-  @media (max-width: 768px) {
+  @include screen(desktop) {
     display: block;
   }
 }

web/components/common/ContentHeader/ContentHeader.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   position: relative;
   display: grid;
@@ -10,7 +12,7 @@
 
 .logoTitleSection {
   display: flex;
-  @media (max-width: 768px) {
+  @include screen(desktop) {
     flex-direction: column;
     .logo {
       margin-left: auto;
@@ -29,14 +31,14 @@
   .title {
     font-family: var(--theme-text-display-font-family);
     color: var(--theme-color-palette-0);
-    font-size: 2rem;
+    font-size: 1.7rem;
     font-weight: bold;
     line-height: 30px;
   }
 
   .subtitle {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 1.3;
     color: var(--theme-color-background-header);
     max-width: 900px;

web/components/layouts/Main.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-unescaped-entities */
 import { Layout } from 'antd';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
 import {
@@ -9,6 +9,7 @@ import {
   isChatAvailableSelector,
   clientConfigStateAtom,
   fatalErrorStateAtom,
+  isMobileAtom,
 } from '../stores/ClientConfigStore';
 import { Content } from '../ui/Content/Content';
 import { Header } from '../ui/Header/Header';
@@ -21,10 +22,12 @@ import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
 
 // @ts-ignore
 import ServerRenderedMetadata from '../ServerRendered/ServerRenderedMetadata.html';
+import Footer from '../ui/Footer/Footer';
 
 export const Main: FC = () => {
+  const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { name, title, customStyles } = clientConfig;
+  const { name, title, customStyles, version } = clientConfig;
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
 
@@ -90,6 +93,7 @@ export const Main: FC = () => {
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
+        {!isMobile && <Footer version={version} />}
       </Layout>
     </>
   );

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

@@ -1,10 +1,15 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-  height: 100%;
   width: 100%;
   background-color: var(--theme-color-background-main);
   
+  @include screen(desktop) {
+    height: var(--content-height);
+  }
+
   .mainSection {
     display: flex;
     overflow-y: scroll;
@@ -40,3 +45,4 @@
   height: 100%;
   grid-template-rows: 1fr auto;
 }
+

web/components/ui/Content/Content.tsx

@@ -355,7 +355,7 @@ export const Content: FC = () => {
             {showChat && !isMobile && <Sidebar />}
           </AntContent>
         </Spin>
-        {!isMobile && <Footer version={version} />}
+        {!isMobile && false && <Footer version={version} />}
       </div>
 
       {externalActionToDisplay && (

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -5,7 +5,7 @@
 }
 
 .customPageContent {
-  font-size: 1.1rem;
+  font-size: 1rem;
   line-height: 1.6em;
   color: var(--theme-color-palette-0);
   padding: calc(2 * var(--content-padding));
@@ -20,7 +20,7 @@
   }
 
   div.summary {
-    font-size: 1.1rem;
+    font-size: 0.9rem;
   }
 
   p {

web/components/ui/Footer/Footer.module.scss

@@ -1,13 +1,15 @@
 .footer {
   display: flex;
+  align-items: center;
+  height: var(--footer-height);
   justify-content: space-between;
   flex-direction: row;
   background-color: var(--theme-color-background-header);
   width: 100%;
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-body-font-family);
-
+  
-  padding: 0.6em;
+  padding: 0 .6rem;
   font-size: 0.8rem;
   font-weight: 600;
   border-top: 1px solid rgba(214, 211, 211, 0.5);

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

@@ -1,6 +1,7 @@
 .header {
   position: sticky;
   top: 0px;
+  height: var(--header-height) !important;
   display: flex;
   align-items: center;
   justify-content: space-between;

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,14 +1,14 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   background-color: var(--theme-color-background-chat);
   display: none;
-}
+  @include screen(desktop) {
-
+      position: sticky;
-@media (min-width: 768px) {
+      display: block;
-  .root {
-    position: sticky;
-    display: block;
   }
 }
+
 /*
 First div is .ant-layout-sider-children
 Only way to target it apparently

web/components/ui/Statusbar/Statusbar.module.scss

@@ -10,8 +10,4 @@
   background-color: var(--component-background);
   font-family: var(--theme-text-display-font-family);
   font-weight: 600;
-  
-  .right {
-    color: red;
-  }
 }

web/components/video/VideoJS/VideoJS.module.scss

@@ -1,9 +1,15 @@
+@import '../../../styles/mixins.scss';
+
 .player {
   height: auto !important;
   width: 100%;
   video {
     position: static !important;
   }
+
+  @include screen(desktop) {
+    height: 30vh !important;
+  }
 }
 
 .poster {
@@ -11,8 +17,3 @@
   height: 100%;
 }
 
-@media (max-width: 768px) {
-  .player {
-    height: 30vh !important;
-  }
-}

web/styles/globals.scss

@@ -4,10 +4,14 @@
 @import '@fontsource/open-sans/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
+@import './mixins.scss';
 
 :root {
   --content-padding: 12px;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
+  --header-height: 4rem; // needed for making main content scrollable;
+  --footer-height: 2.5rem; // needed for making main content scrollable;
+  --content-height: calc(100vh - var(--header-height) - var(--footer-height));
 }
 
 ::selection {

web/styles/mixins.scss

@@ -3,3 +3,16 @@
   justify-content: center;
   align-items: center;
 }
+
+@mixin screen ($breakpoint) { 
+    @if $breakpoint == desktop {    
+    @media only screen and (min-width: 768px) {
+      @content;
+    }
+  }
+  @if $breakpoint == mobile {
+    @media only screen and (max-width: 481px) {
+      @content;
+    }
+  }
+}