separate out styles for markdowneditor; convert mainlayout style module styles to just sass; add style to stream title editor in header;

web/pages/_app.tsx

@@ -1,7 +1,11 @@
+// order matters!
 import 'antd/dist/antd.css';
 import '../styles/colors.scss';
 import '../styles/globals.scss';
 import '../styles/ant-overrides.scss';
+import '../styles/markdown-editor.scss';
+
+import '../styles/main-layout.scss';
 
 import '../styles/form-textfields.scss';
 import '../styles/form-toggleswitch.scss';
@@ -11,7 +15,6 @@ import '../styles/config-storage.scss';
 import '../styles/config-tags.scss';
 import '../styles/config-video-variants.scss';
 
-
 import '../styles/home.scss';
 import '../styles/chat.scss';
 import '../styles/config.scss';

web/pages/components/chart.tsx

@@ -9,11 +9,11 @@ interface TimedValue {
 }
 
 interface ChartProps {
-  data?: TimedValue[],
+  data?: TimedValue[];
-  title?: string,
+  title?: string;
-  color: string,
+  color: string;
-  unit: string,
+  unit: string;
-  dataCollections?: any[],
+  dataCollections?: any[];
 }
 
 function createGraphDataset(dataArray) {
@@ -33,18 +33,20 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
     renderData.push({
       name: title,
       color,
-      data: createGraphDataset(data)
+      data: createGraphDataset(data),
     });
   }
 
   dataCollections.forEach(collection => {
-    renderData.push(
+    renderData.push({
-      {name: collection.name, data: createGraphDataset(collection.data), color: collection.color}
+      name: collection.name,
-    )
+      data: createGraphDataset(collection.data),
+      color: collection.color,
+    });
   });
 
   return (
-    <div className={styles.lineChartContainer}>
+    <div className="line-chart-container">
       <LineChart
         xtitle="Time"
         ytitle={title}

web/pages/components/config/constants.tsx

@@ -63,7 +63,7 @@ export const TEXTFIELD_PROPS_SERVER_TITLE = {
 };
 export const TEXTFIELD_PROPS_STREAM_TITLE = {
   apiPath: API_STREAM_TITLE,
-  maxLength: TEXT_MAXLENGTH,
+  maxLength: 100,
   placeholder: 'Doing cool things...',
   label: 'Stream Title',
   tip: 'What is your stream about today?',

web/pages/components/logo.tsx

@@ -1,76 +1,150 @@
 import React from 'react';
-import adminStyles from '../../styles/styles.module.scss';
 
 export default function Logo() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.68623352050781 104.46271514892578" className={adminStyles.logoSVG}>  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 95.68623352050781 104.46271514892578"
+      className="logo-svg"
+    >
       <g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)">
         <g>
           <g>
             <g>
               <g transform="matrix(1.0445680396949917 0 0 1.0445679172996596 36.34559138380523 18.877718021903796)">
                 <g transform="matrix(1 0 0 1 0 0)">
-                  
                   <defs>
-                      <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient120" gradientTransform="rotate(-90 .5 .5)"> 
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient120"
+                      gradientTransform="rotate(-90 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#1f2022" stopOpacity="1" />
                       <stop offset="1" stopColor="#635e69" stopOpacity="1" />
                     </linearGradient>
                   </defs>
-                    <path fill="url(#gradient120)" d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"/>
+                  <path
+                    fill="url(#gradient120)"
+                    d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"
+                  />
                 </g>
                 <g transform="matrix(1 0 0 1 0 0)">
                   <defs>
-                      <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient121" gradientTransform="rotate(-180 .5 .5)">
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient121"
+                      gradientTransform="rotate(-180 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#2087e2" stopOpacity="1" />
                       <stop offset="1" stopColor="#b63fff" stopOpacity="1" />
                     </linearGradient>
                   </defs>
-                    <path fill="url(#gradient121)" d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"/>
+                  <path
+                    fill="url(#gradient121)"
+                    d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"
+                  />
                 </g>
                 <g transform="matrix(1 0 0 1 0 0)">
                   <defs>
-                      <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient122" gradientTransform="rotate(-90 .5 .5)">
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient122"
+                      gradientTransform="rotate(-90 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#100f0f" stopOpacity="1" />
                       <stop offset="1" stopColor="#49261F" stopOpacity="1" />
                     </linearGradient>
                   </defs>
-                    <path fill="url(#gradient122)" d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"/>
+                  <path
+                    fill="url(#gradient122)"
+                    d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"
+                  />
                 </g>
                 <g transform="matrix(1 0 0 1 0 0)">
                   <defs>
-                        <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient123" gradientTransform="rotate(-180 .5 .5)"> 
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient123"
+                      gradientTransform="rotate(-180 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#222020" stopOpacity="1" />
                       <stop offset="1" stopColor="#49261F" stopOpacity="1" />
                     </linearGradient>
                   </defs>
-                      <path fill="url(#gradient123)" d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"/>
+                  <path
+                    fill="url(#gradient123)"
+                    d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"
+                  />
                 </g>
                 <g transform="matrix(0.9999999999999999 0 0 1 0 5.684341886080802e-14)">
                   <defs>
-                          <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient124" gradientTransform="rotate(-180 .5 .5)"> <stop offset="0" stopColor="#1e1c1c" stopOpacity="1"/>
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient124"
+                      gradientTransform="rotate(-180 .5 .5)"
+                    >
+                      {' '}
+                      <stop offset="0" stopColor="#1e1c1c" stopOpacity="1" />
                       <stop offset="1" stopColor="#49261F" stopOpacity="1" />
                     </linearGradient>
                   </defs>
-                      <path fill="url(#gradient124)" d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"/>
+                  <path
+                    fill="url(#gradient124)"
+                    d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"
+                  />
                 </g>
                 <g transform="matrix(1 0 0 1 0 0)">
                   <defs>
-                        <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient125" gradientTransform="rotate(-360 .5 .5)"> 
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient125"
+                      gradientTransform="rotate(-360 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
                       <stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
                     </linearGradient>
                   </defs>
-                      <path fill="url(#gradient125)" d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"/>
+                  <path
+                    fill="url(#gradient125)"
+                    d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"
+                  />
                 </g>
                 <g transform="matrix(1 0 0 1 0 0)">
                   <defs>
-                        <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient126" gradientTransform="rotate(-360 .5 .5)">
+                    <linearGradient
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                      id="gradient126"
+                      gradientTransform="rotate(-360 .5 .5)"
+                    >
                       <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
                       <stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
                     </linearGradient>
                   </defs>
-                      <path fill="url(#gradient126)" d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"/>
+                  <path
+                    fill="url(#gradient126)"
+                    d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"
+                  />
                 </g>
               </g>
             </g>

web/pages/components/main-layout.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
-import Head from 'next/head'
+import Head from 'next/head';
-import { differenceInSeconds } from "date-fns";
+import { differenceInSeconds } from 'date-fns';
 import { useRouter } from 'next/router';
 import { Layout, Menu, Popover, Alert } from 'antd';
 
@@ -16,11 +16,10 @@ import {
   QuestionCircleOutlined,
   MessageOutlined,
   ExperimentOutlined,
-
 } from '@ant-design/icons';
 import classNames from 'classnames';
-import { upgradeVersionAvailable } from "../../utils/apis";
+import { upgradeVersionAvailable } from '../../utils/apis';
-import { parseSecondsToDurationString } from '../../utils/format'
+import { parseSecondsToDurationString } from '../../utils/format';
 
 import OwncastLogo from './logo';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -29,7 +28,7 @@ import { AlertMessageContext } from '../../utils/alert-message-context';
 import TextFieldWithSubmit from './config/form-textfield-with-submit';
 import { TEXTFIELD_PROPS_STREAM_TITLE } from './config/constants';
 
-import adminStyles from '../../styles/styles.module.scss';
+import { UpdateArgs } from '../../types/config-section';
 
 let performedUpgradeCheck = false;
 
@@ -37,10 +36,10 @@ export default function MainLayout(props) {
   const { children } = props;
 
   const context = useContext(ServerStatusContext);
-  const { serverConfig, online, broadcaster, versionNumber, streamTitle } = context || {};
+  const { serverConfig, online, broadcaster, versionNumber } = context || {};
   const { instanceDetails } = serverConfig;
 
-  const [currentStreamTitle, setCurrentStreamTitle] = useState(streamTitle);
+  const [currentStreamTitle, setCurrentStreamTitle] = useState('');
 
   const alertMessage = useContext(AlertMessageContext);
 
@@ -50,59 +49,34 @@ export default function MainLayout(props) {
   const { Header, Footer, Content, Sider } = Layout;
   const { SubMenu } = Menu;
 
-  // status indicator items
-  const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
-  const currentThumbnail = online ? (
-    <img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
-  ) : null;
-  const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
-  const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
-  const statusIndicator = (
-    <div className={adminStyles.statusIndicatorContainer}>
-      <span className={adminStyles.statusLabel}>{statusMessage}</span>
-      <span className={adminStyles.statusIcon}>{statusIcon}</span>
-    </div>
-  );
-  const statusIndicatorWithThumb = online ? (
-    <Popover
-      content={currentThumbnail}
-      title="Thumbnail"
-      trigger="hover"
-    >
-      {statusIndicator}
-    </Popover>
-  ) : statusIndicator;
-  // ///////////////
-
   const [upgradeVersion, setUpgradeVersion] = useState(null);
   const checkForUpgrade = async () => {
     try {
       const result = await upgradeVersionAvailable(versionNumber);
       setUpgradeVersion(result);
     } catch (error) {
-      console.log("==== error", error);
+      console.log('==== error', error);
     }
   };
 
   useEffect(() => {
     if (!performedUpgradeCheck) {
       checkForUpgrade();
-      performedUpgradeCheck = true
+      performedUpgradeCheck = true;
     }
   });
 
   useEffect(() => {
-    setCurrentStreamTitle(streamTitle);
+    setCurrentStreamTitle(instanceDetails.streamTitle);
-  }, [streamTitle]);
+  }, [instanceDetails]);
 
   const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
     setCurrentStreamTitle(value);
-  }
+  };
-
 
   const appClass = classNames({
-    "owncast-layout": true,
+    'app-container': true,
-    [adminStyles.online]: online,
+    online,
   });
 
   const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
@@ -110,14 +84,35 @@ export default function MainLayout(props) {
 
   const clearAlertMessage = () => {
     alertMessage.setMessage(null);
-  }
+  };
 
-  const headerAlertMessage = alertMessage.message ? ( <Alert
+  const headerAlertMessage = alertMessage.message ? (
-    message={alertMessage.message}
+    <Alert message={alertMessage.message} afterClose={clearAlertMessage} banner closable />
-    afterClose={clearAlertMessage}
+  ) : null;
-    banner
+
-    closable
+  // status indicator items
-  />): null;
+  const streamDurationString = broadcaster
+    ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time)))
+    : '';
+  const currentThumbnail = online ? (
+    <img src="/thumbnail.jpg" className="online-thumbnail" alt="current thumbnail" />
+  ) : null;
+  const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
+  const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';
+
+  const statusIndicator = (
+    <div className="online-status-indicator">
+      <span className="status-label">{statusMessage}</span>
+      <span className="status-icon">{statusIcon}</span>
+    </div>
+  );
+  const statusIndicatorWithThumb = online ? (
+    <Popover content={currentThumbnail} title="Thumbnail" trigger="hover">
+      {statusIndicator}
+    </Popover>
+  ) : (
+    statusIndicator
+  );
 
   return (
     <Layout className={appClass}>
@@ -126,47 +121,32 @@ export default function MainLayout(props) {
         <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
       </Head>
 
-      <Sider
+      <Sider width={240} className="side-nav">
-        width={240}
-        className={adminStyles.sideNav}
-      >
         <Menu
           theme="dark"
-          defaultSelectedKeys={[route.substring(1) || "home"]}
+          defaultSelectedKeys={[route.substring(1) || 'home']}
-          defaultOpenKeys={["current-stream-menu", "utilities-menu", "configuration"]}
+          defaultOpenKeys={['current-stream-menu', 'utilities-menu', 'configuration']}
           mode="inline"
         >
-          <h1 className={adminStyles.owncastTitleContainer}>
+          <h1 className="owncast-title">
-            <span className={adminStyles.logoContainer}>
+            <span className="logo-container">
               <OwncastLogo />
             </span>
-            <span className={adminStyles.owncastTitle}>Owncast Admin</span>
+            <span className="title-label">Owncast Admin</span>
           </h1>
           <Menu.Item key="home" icon={<HomeOutlined />}>
             <Link href="/">Home</Link>
           </Menu.Item>
 
-          <Menu.Item
+          <Menu.Item key="viewer-info" icon={<LineChartOutlined />} title="Current stream">
-            key="viewer-info"
-            icon={<LineChartOutlined />}
-            title="Current stream"
-          >
             <Link href="/viewer-info">Viewers</Link>
           </Menu.Item>
 
-          <Menu.Item
+          <Menu.Item key="chat" icon={<MessageOutlined />} title="Chat utilities">
-            key="chat"
-            icon={<MessageOutlined />}
-            title="Chat utilities"
-          >
             <Link href="/chat">Chat</Link>
           </Menu.Item>
 
-          <SubMenu
+          <SubMenu key="configuration" title="Configuration" icon={<SettingOutlined />}>
-            key="configuration"
-            title="Configuration"
-            icon={<SettingOutlined />}
-          >
             <Menu.Item key="config-public-details">
               <Link href="/config-public-details">General</Link>
             </Menu.Item>
@@ -189,11 +169,7 @@ export default function MainLayout(props) {
             </Menu.Item>
           </SubMenu>
 
-          <SubMenu
+          <SubMenu key="utilities-menu" icon={<ToolOutlined />} title="Utilities">
-            key="utilities-menu"
-            icon={<ToolOutlined />}
-            title="Utilities"
-          >
             <Menu.Item key="hardware-info">
               <Link href="/hardware-info">Hardware</Link>
             </Menu.Item>
@@ -206,11 +182,7 @@ export default function MainLayout(props) {
               </Link>
             </Menu.Item>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="integrations-menu" icon={<ExperimentOutlined />} title="Integrations">
-            key="integrations-menu"
-            icon={<ExperimentOutlined />}
-            title="Integrations"
-          >
             <Menu.Item key="webhooks">
               <Link href="/webhooks">Webhooks</Link>
             </Menu.Item>
@@ -218,38 +190,33 @@ export default function MainLayout(props) {
               <Link href="/access-tokens">Access Tokens</Link>
             </Menu.Item>
           </SubMenu>
-          <Menu.Item
+          <Menu.Item key="help" icon={<QuestionCircleOutlined />} title="Help">
-            key="help"
-            icon={<QuestionCircleOutlined />}
-            title="Help"
-          >
             <Link href="/help">Help</Link>
           </Menu.Item>
         </Menu>
       </Sider>
 
-      <Layout className={adminStyles.layoutMain}>
+      <Layout className="layout-main">
-        <Header className={adminStyles.header}>
+        <Header className="layout-header">
-          <div className={adminStyles.globalStreamTitleContainer}>
+          <div className="global-stream-title-container">
             <TextFieldWithSubmit
-            apiPath="/streamtitle"
-            maxLength={100}
-            className={adminStyles.globalStreamTitleInput}
               fieldName="streamTitle"
+              {...TEXTFIELD_PROPS_STREAM_TITLE}
               placeholder="What you're streaming right now"
               value={currentStreamTitle}
               initialValue={instanceDetails.streamTitle}
               onChange={handleStreamTitleChanged}
             />
           </div>
+
           {statusIndicatorWithThumb}
         </Header>
 
         {headerAlertMessage}
 
-        <Content className={adminStyles.contentMain}>{children}</Content>
+        <Content className="main-content-container">{children}</Content>
 
-        <Footer style={{ textAlign: "center" }}>
+        <Footer className="footer-container">
           <a href="https://owncast.online/">About Owncast v{versionNumber}</a>
         </Footer>
       </Layout>

web/pages/offline-notice.tsx

@@ -1,8 +1,13 @@
-import { Result, Card } from "antd";
-import { MessageTwoTone, QuestionCircleTwoTone, BookTwoTone, PlaySquareTwoTone } from '@ant-design/icons';
-import OwncastLogo from "./components/logo"
-import LogTable from "./components/log-table";
 import Link from 'next/link';
+import { Result, Card } from 'antd';
+import {
+  MessageTwoTone,
+  QuestionCircleTwoTone,
+  BookTwoTone,
+  PlaySquareTwoTone,
+} from '@ant-design/icons';
+import OwncastLogo from './components/logo';
+import LogTable from './components/log-table';
 
 const { Meta } = Card;
 
@@ -10,36 +15,42 @@ export default function Offline({ logs = [] }) {
   const data = [
     {
       icon: <BookTwoTone twoToneColor="#6f42c1" />,
-      title: "Use your broadcasting software",
+      title: 'Use your broadcasting software',
       content: (
         <div>
-          <a href="https://owncast.online/docs/broadcasting/">Learn how to point your existing software to your new server and start streaming your content.</a>
+          <a href="https://owncast.online/docs/broadcasting/">
+            Learn how to point your existing software to your new server and start streaming your
+            content.
+          </a>
         </div>
-      )
+      ),
     },
     {
       icon: <MessageTwoTone twoToneColor="#0366d6" />,
-      title: "Chat is disabled",
+      title: 'Chat is disabled',
-      content: "Chat will continue to be disabled until you begin a live stream."
+      content: 'Chat will continue to be disabled until you begin a live stream.',
     },
     {
       icon: <PlaySquareTwoTone twoToneColor="#f9826c" />,
-      title: "Embed your video onto other sites",
+      title: 'Embed your video onto other sites',
       content: (
         <div>
-          <a href="https://owncast.online/docs/embed">Learn how you can add your Owncast stream to other sites you control.</a>
+          <a href="https://owncast.online/docs/embed">
+            Learn how you can add your Owncast stream to other sites you control.
+          </a>
         </div>
-      )
+      ),
     },
     {
       icon: <QuestionCircleTwoTone twoToneColor="#ffd33d" />,
-      title: "Not sure what to do next?",
+      title: 'Not sure what to do next?',
       content: (
         <div>
-          If you're having issues or would like to know how to customize and configure your Owncast server visit <Link href="/help">the help page.</Link>
+          If you&apos;re having issues or would like to know how to customize and configure your
+          Owncast server visit <Link href="/help">the help page.</Link>
         </div>
       ),
-    }
+    },
   ];
 
   return (
@@ -53,19 +64,12 @@ export default function Offline({ logs = [] }) {
           />
         </div>
         <div className="list-section">
-          {
+          {data.map(item => (
-            data.map(item => (
             <Card key={item.title}>
-                <Meta
+              <Meta avatar={item.icon} title={item.title} description={item.content} />
-                  avatar={item.icon}
-                  title={item.title}
-                  description={item.content}
-                />
             </Card>
-            ))
+          ))}
-          }
         </div>
-
       </div>
       <LogTable logs={logs} pageSize={5} />
     </>

web/styles/globals.scss

@@ -36,48 +36,13 @@ code {
 }
 
 
-// markdown editor overrides
+.logo-svg {
-
+  height: 2rem;
-.rc-virtual-list-scrollbar {
+  width: 2rem;
-  display: block !important;
-}
-.rc-md-editor {
-  // Set the background color of the preview container
-  .editor-container {
-    background-color: #E2E8F0;
-    color: rgba(45,55,72,1);
 }
 
-  // Custom CSS for formatting the preview text
+p.page-description {
-  .markdown-editor-preview-pane {
+  margin: 1em 0;
-    // color:lightgrey;
+  color: #ccc; 
-    a {
+  width: 80%;
-      color: var(--owncast-purple);;
-    }
-    h1 {
-      font-size: 2em;
-    }
-  }
-
-  // Custom CSS class used to format the text of the editor
-  .markdown-editor-pane {
-    color: white !important;
-    background-color: black;
-    font-family: monospace;
-  }
-
-  // Set the background color of the editor text input
-  textarea {
-    background-color: rgb(44,44,44) !important;
-    color:lightgrey !important;
-  }
-.ant-btn {
-  transition-duration: .15s;
-  transition-delay: 0s;
-}
-
-  // Hide extra toolbar buttons.
-  .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
-    display: none !important;
-  }
 }

web/styles/main-layout.scss

@@ -0,0 +1,138 @@
+.app-container {
+  
+  .side-nav {
+    position: fixed;
+    height: 100vh;
+    overflow: auto;
+    z-index: 10;
+  }
+
+  h1.owncast-title {
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .logo-container {
+      background-color: #fff;
+      padding: .35rem;
+      border-radius: 9999px;
+    }
+
+    .title-label {
+      display: inline-block;
+      margin-left: 1rem;
+      color: rgba(203,213,224, 1);
+      font-size: 1.15rem;
+      font-weight: 200;
+      text-transform: uppercase;
+      line-height: normal;
+      letter-spacing: .05em;
+    }
+  }
+
+  .layout-main {
+    margin-left: 240px; // width of Ant Sider
+  }
+  .layout-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-right: 1rem;
+  }
+
+
+  .main-content-container {
+    padding: 3em;
+  }
+
+  .footer-container {
+    text-align: center;
+  }
+
+
+
+  .online-status-indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .online-thumbnail {
+      width: 12.5rem;
+    }
+
+    .status-label {
+      color: #fff;
+      text-transform: uppercase;
+      font-size: .75rem;
+      display: inline-block;
+      margin-right: .5rem;
+      color: #999;
+    }
+    .status-icon {
+      font-size: 1.5rem;
+      svg {
+        fill: #999;
+      }
+    }
+  }
+  .online {
+    .online-status-indicator {
+      .status-icon {
+        svg {
+          fill: var(--online-color);
+        }
+      }
+      .status-label {
+        color: var(--online-color);
+      }
+    }
+  }
+}
+
+
+// stream title form field in header
+.global-stream-title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  .textfield-with-submit-container {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+
+    .input-side {
+      width: 400px;
+    }
+
+    .label-side {
+      display: none;
+    }
+    .lower-container {
+      width: auto;
+      .lower-content {
+        flex-direction: column-reverse;
+        position: relative;
+      }
+      .label-spacer,
+      .field-tip {
+        display: none;
+      }
+      .status-container {
+        line-height: 1;
+        position: absolute;
+        bottom: -2em;
+      }
+      .update-button-container {
+        margin: 0;
+        margin-left: .5em;
+        line-height: 1;
+      }
+    } 
+  }  
+}
+

web/styles/markdown-editor.scss

@@ -0,0 +1,46 @@
+
+// markdown editor overrides
+
+.rc-virtual-list-scrollbar {
+  display: block !important;
+}
+.rc-md-editor {
+  // Set the background color of the preview container
+  .editor-container {
+    background-color: #E2E8F0;
+    color: rgba(45,55,72,1);
+  }
+
+  // Custom CSS for formatting the preview text
+  .markdown-editor-preview-pane {
+    // color:lightgrey;
+    a {
+      color: var(--owncast-purple);;
+    }
+    h1 {
+      font-size: 2em;
+    }
+  }
+
+  // Custom CSS class used to format the text of the editor
+  .markdown-editor-pane {
+    color: white !important;
+    background-color: black;
+    font-family: monospace;
+  }
+
+  // Set the background color of the editor text input
+  textarea {
+    background-color: rgb(44,44,44) !important;
+    color:lightgrey !important;
+  }
+.ant-btn {
+  transition-duration: .15s;
+  transition-delay: 0s;
+}
+
+  // Hide extra toolbar buttons.
+  .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
+    display: none !important;
+  }
+}

web/styles/styles.module.scss

@@ -1,9 +1,4 @@
 
-.logoSVG {
-  height: 2rem;
-  width: 2rem;
-}
-
 .owncastTitleContainer {
   padding: 1rem;
   display: flex;