Merge branch 'admin-css-overhaul' into 0.0.6

2021-02-04 09:21:36 -08:00
parent 50b7425a03 c65c97df85
commit 5dd4d49118
32 changed files with 935 additions and 989 deletions
--- a/web/pages/components/chart.tsx
+++ b/web/pages/components/chart.tsx
@@ -1,7 +1,6 @@
 import { LineChart } from 'react-chartkick';
 import 'chart.js';
 import format from 'date-fns/format';
-import styles from '../../styles/styles.module.scss';

 interface TimedValue {
  time: Date;
@@ -9,11 +8,11 @@ interface TimedValue {
 }

 interface ChartProps {
-  data?: TimedValue[],
-  title?: string,
-  color: string,
-  unit: string,
-  dataCollections?: any[],
+  data?: TimedValue[];
+  title?: string;
+  color: string;
+  unit: string;
+  dataCollections?: any[];
 }

 function createGraphDataset(dataArray) {
@@ -22,7 +21,7 @@ function createGraphDataset(dataArray) {
    const dateObject = new Date(item.time);
    const dateString = format(dateObject, 'p P');
    dataValues[dateString] = item.value;
-  })
+  });
  return dataValues;
 }

@@ -33,18 +32,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(
-      {name: collection.name, data: createGraphDataset(collection.data), color: collection.color}
-    )
+    renderData.push({
+      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}
--- a/web/pages/components/config/constants.tsx
+++ b/web/pages/components/config/constants.tsx
@@ -63,7 +63,7 @@ export const TEXTFIELD_PROPS_SERVER_NAME = {
 };
 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?',
--- a/web/pages/components/config/cpu-usage.tsx
+++ b/web/pages/components/config/cpu-usage.tsx
@@ -41,14 +41,14 @@ export default function CPUUsageSelector({ defaultValue, onChange }) {
  };

  return (
-    <div className="module-container config-video-segements-conatiner">
+    <div className="config-video-segements-conatiner">
      <Title level={3}>CPU Usage</Title>
      <p>There are trade-offs when considering CPU usage blah blah more wording here.</p>
      <br />
      <br />
-      <div className="segment-slider">
+      <div className="segment-slider-container">
        <Slider
-          tipFormatter={value => TOOLTIPS[value] }
+          tipFormatter={value => TOOLTIPS[value]}
          onChange={handleChange}
          min={1}
          max={Object.keys(SLIDER_MARKS).length}
--- a/web/pages/components/config/edit-server-details.tsx
+++ b/web/pages/components/config/edit-server-details.tsx
@@ -51,8 +51,8 @@ export default function EditInstanceDetails() {
  };

  const showConfigurationRestartMessage = () => {
-    setMessage('Updating server settings requires a restart of your Owncast server.')
-  }
+    setMessage('Updating server settings requires a restart of your Owncast server.');
+  };

  function generateStreamKey() {
    let key = '';
--- a/web/pages/components/config/edit-social-links.tsx
+++ b/web/pages/components/config/edit-social-links.tsx
@@ -157,7 +157,7 @@ export default function EditSocialLinks() {
    postUpdateToAPI(postData);
  };

-  const handleDeleteItem = index => {
+  const handleDeleteItem = (index: number) => {
    const postData = [...currentSocialHandles];
    postData.splice(index, 1);
    postUpdateToAPI(postData);
--- a/web/pages/components/config/edit-storage.tsx
+++ b/web/pages/components/config/edit-storage.tsx
@@ -1,4 +1,4 @@
-import { Switch, Button, Collapse, Alert } from 'antd';
+import { Switch, Button, Collapse } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useState, useEffect } from 'react';
 import { UpdateArgs } from '../../../types/config-section';
@@ -32,7 +32,7 @@ function checkSaveable(formValues: any, currentValues: any) {
  if (enabled) {
    if (!!endpoint && isValidUrl(endpoint) && !!accessKey && !!secret && !!bucket && !!region) {
      if (
-        enabled !== currentValues.enabled || 
+        enabled !== currentValues.enabled ||
        endpoint !== currentValues.endpoint ||
        accessKey !== currentValues.accessKey ||
        secret !== currentValues.secret ||
@@ -52,13 +52,12 @@ function checkSaveable(formValues: any, currentValues: any) {
 export default function EditStorage() {
  const [formDataValues, setFormDataValues] = useState(null);
  const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
-  const [saved, setSaved] = useState<Boolean>(false);

  const [shouldDisplayForm, setShouldDisplayForm] = useState(false);
  const serverStatusData = useContext(ServerStatusContext);
  const { serverConfig, setFieldInConfigState } = serverStatusData || {};

-  const {message, setMessage} = useContext(AlertMessageContext);
+  const { setMessage: setAlertMessage } = useContext(AlertMessageContext);

  const { s3 } = serverConfig;
  const {
@@ -117,8 +116,9 @@ export default function EditStorage() {
        setFieldInConfigState({ fieldName: 's3', value: postValue, path: '' });
        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
-        setSaved(true);
-        setMessage('Changing your storage configuration will take place the next time you start a new stream.');
+        setAlertMessage(
+          'Changing your storage configuration will take place the next time you start a new stream.',
+        );
      },
      onError: (message: string) => {
        setSubmitStatus(createInputStatus(STATUS_ERROR, message));
@@ -131,12 +131,6 @@ export default function EditStorage() {
  const handleSwitchChange = (storageEnabled: boolean) => {
    setShouldDisplayForm(storageEnabled);
    handleFieldChange({ fieldName: 'enabled', value: storageEnabled });
-
-    // if current data in current store says s3 is enabled,
-    // we should save this state
-    // if (!storageEnabled && s3.enabled) {
-    //   handleSave();
-    // }
  };

  const containerClass = classNames({
--- a/web/pages/components/config/social-icons-dropdown.tsx
+++ b/web/pages/components/config/social-icons-dropdown.tsx
@@ -11,7 +11,7 @@ interface DropdownProps {
 }

 export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
-  const handleSelected = value => {
+  const handleSelected = (value: string) => {
    if (onSelected) {
      onSelected(value);
    }
--- a/web/pages/components/config/video-latency.tsx
+++ b/web/pages/components/config/video-latency.tsx
@@ -1,12 +1,15 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Typography, Slider } from 'antd';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import { API_VIDEO_SEGMENTS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 import {
-  API_VIDEO_SEGMENTS,
-  SUCCESS_STATES,
-  RESET_TIMEOUT,
-  postConfigUpdateToAPI,
-} from './constants';
+  createInputStatus,
+  StatusState,
+  STATUS_ERROR,
+  STATUS_PROCESSING,
+  STATUS_SUCCESS,
+} from '../../../utils/input-statuses';
+import FormStatusIndicator from './form-status-indicator';

 const { Title } = Typography;

@@ -37,8 +40,10 @@ function SegmentToolTip({ value }: SegmentToolTipProps) {
 }

 export default function VideoLatency() {
-  const [submitStatus, setSubmitStatus] = useState(null);
-  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+  const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
+
+  // const [submitStatus, setSubmitStatus] = useState(null);
+  // const [submitStatusMessage, setSubmitStatusMessage] = useState('');
  const [selectedOption, setSelectedOption] = useState(null);

  const serverStatusData = useContext(ServerStatusContext);
@@ -57,13 +62,15 @@ export default function VideoLatency() {

  const resetStates = () => {
    setSubmitStatus(null);
-    setSubmitStatusMessage('');
+    // setSubmitStatusMessage('');
    resetTimer = null;
    clearTimeout(resetTimer);
  };

  // posts all the variants at once as an array obj
  const postUpdateToAPI = async (postValue: any) => {
+    setSubmitStatus(createInputStatus(STATUS_PROCESSING));
+
    await postConfigUpdateToAPI({
      apiPath: API_VIDEO_SEGMENTS,
      data: { value: postValue },
@@ -73,34 +80,28 @@ export default function VideoLatency() {
          value: postValue,
          path: 'videoSettings',
        });
+        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Variants updated.'));

-        setSubmitStatus('success');
-        setSubmitStatusMessage('Variants updated.');
+        // setSubmitStatus('success');
+        // setSubmitStatusMessage('Variants updated.');
        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
      },
      onError: (message: string) => {
-        setSubmitStatus('error');
-        setSubmitStatusMessage(message);
+        setSubmitStatus(createInputStatus(STATUS_ERROR, message));
+
+        // setSubmitStatus('error');
+        // setSubmitStatusMessage(message);
        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
      },
    });
  };

-  const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
-    SUCCESS_STATES[submitStatus] || {};
-
-  const statusMessage = (
-    <div className={`status-message ${submitStatus || ''}`}>
-      {newStatusIcon} {newStatusMessage} {submitStatusMessage}
-    </div>
-  );
-
  const handleChange = value => {
    postUpdateToAPI(value);
  };

  return (
-    <div className="module-container config-video-segements-conatiner">
+    <div className="config-video-segements-conatiner">
      <Title level={3}>Latency Buffer</Title>
      <p>
        There are trade-offs when cosidering video latency and reliability. Blah blah .. better
@@ -108,7 +109,7 @@ export default function VideoLatency() {
      </p>
      <br />
      <br />
-      <div className="segment-slider">
+      <div className="segment-slider-container">
        <Slider
          tipFormatter={value => <SegmentToolTip value={SLIDER_COMMENTS[value]} />}
          onChange={handleChange}
@@ -119,7 +120,7 @@ export default function VideoLatency() {
          value={selectedOption}
        />
      </div>
-      {statusMessage}
+      <FormStatusIndicator status={submitStatus} />
    </div>
  );
 }
--- a/web/pages/components/config/video-variant-form.tsx
+++ b/web/pages/components/config/video-variant-form.tsx
@@ -1,12 +1,11 @@
 // This content populates the video variant modal, which is spawned from the variants table.
 import React from 'react';
-import { Slider, Select, Switch, Divider, Collapse } from 'antd';
-import { FieldUpdaterFunc, CpuUsageLevel, VideoVariant } from '../../../types/config-section';
+import { Slider, Switch, Collapse } from 'antd';
+import { FieldUpdaterFunc, VideoVariant } from '../../../types/config-section';
 import { DEFAULT_VARIANT_STATE } from './constants';
 import InfoTip from '../info-tip';
 import CPUUsageSelector from './cpu-usage';

-const { Option } = Select;
 const { Panel } = Collapse;

 const VIDEO_VARIANT_DEFAULTS = {
@@ -57,12 +56,6 @@ export default function VideoVariantForm({
  const handleVideoBitrateChange = (value: number) => {
    onUpdateField({ fieldName: 'videoBitrate', value });
  };
-  const handleAudioBitrateChange = (value: number) => {
-    onUpdateField({ fieldName: 'audioBitrate', value });
-  };
-  const handleAudioPassChange = (value: boolean) => {
-    onUpdateField({ fieldName: 'audioPassthrough', value });
-  };
  const handleVideoPassChange = (value: boolean) => {
    onUpdateField({ fieldName: 'videoPassthrough', value });
  };
@@ -80,18 +73,12 @@ export default function VideoVariantForm({
  const videoBRMax = videoBitrateDefaults.max;
  const videoBRUnit = videoBitrateDefaults.unit;

-  const audioBitrateDefaults = VIDEO_VARIANT_DEFAULTS.audioBitrate;
-  const audioBRMin = audioBitrateDefaults.min;
-  const audioBRMax = audioBitrateDefaults.max;
-  const audioBRUnit = audioBitrateDefaults.unit;
-
  const selectedVideoBRnote = `Selected: ${dataState.videoBitrate}${videoBRUnit} - it sucks`;
-  const selectedAudioBRnote = `Selected: ${dataState.audioBitrate}${audioBRUnit} - too slow`;
  const selectedFramerateNote = `Selected: ${dataState.framerate}${framerateUnit} - whoa there`;
  const selectedPresetNote = '';

  return (
-    <div className="variant-form">
+    <div className="config-variant-form">
      <div className="section-intro">
        Say a thing here about how this all works. Read more{' '}
        <a href="https://owncast.online/docs/configuration/">here</a>.
@@ -130,6 +117,7 @@ export default function VideoVariantForm({
          </div>
        </div>
      </div>
+
      {/* VIDEO BITRATE FIELD */}
      <div className={`field ${dataState.videoPassthrough ? 'disabled' : ''}`}>
        <p className="label">
@@ -192,55 +180,6 @@ export default function VideoVariantForm({
              ) : null}
            </div>
          </div>
-
-          <Divider />
-
-          {/* AUDIO PASSTHROUGH FIELD */}
-          {/* <div className="field">
-            <p className="label">
-              <InfoTip tip={VIDEO_VARIANT_DEFAULTS.audioPassthrough.tip} />
-              Use Audio Passthrough?
-            </p>
-            <div className="form-component">
-              <Switch
-                defaultChecked={dataState.audioPassthrough}
-                checked={dataState.audioPassthrough}
-                onChange={handleAudioPassChange}
-                checkedChildren="Yes"
-                unCheckedChildren="No"
-              />
-              {dataState.audioPassthrough ? <span className="note">Same as source</span> : null}
-            </div>
-          </div> */}
-
-          {/* AUDIO BITRATE FIELD */}
-          {/* <div className={`field ${dataState.audioPassthrough ? 'disabled' : ''}`}>
-            <p className="label">
-              <InfoTip tip={VIDEO_VARIANT_DEFAULTS.audioBitrate.tip} />
-              Audio Bitrate:
-            </p>
-            <div className="form-component">
-              <Slider
-                // tooltipVisible={dataState.audioPassthrough !== true}
-                tipFormatter={value => `${value} ${audioBRUnit}`}
-                disabled={dataState.audioPassthrough === true}
-                defaultValue={dataState.audioBitrate}
-                value={dataState.audioBitrate}
-                onChange={handleAudioBitrateChange}
-                step={audioBitrateDefaults.incrementBy}
-                min={audioBRMin}
-                max={audioBRMax}
-                marks={{
-                  [audioBRMin]: `${audioBRMin} ${audioBRUnit}`,
-                  [audioBRMax]: `${audioBRMax} ${audioBRUnit}`,
-                }}
-              />
-
-              {selectedAudioBRnote ? (
-                <span className="selected-value-note">{selectedAudioBRnote}</span>
-              ) : null}
-            </div>
-          </div> */}
        </Panel>
      </Collapse>
    </div>
--- a/web/pages/components/config/video-variants-table.tsx
+++ b/web/pages/components/config/video-variants-table.tsx
@@ -1,6 +1,5 @@
 // Updating a variant will post ALL the variants in an array as an update to the API.

-// todo : add DELETE option
 import React, { useContext, useState } from 'react';
 import { Typography, Table, Modal, Button } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
@@ -20,11 +19,19 @@ import {

 const { Title } = Typography;

+const CPU_USAGE_LEVEL_MAP = {
+  1: 'lowest',
+  2: 'low',
+  3: 'medium',
+  4: 'high',
+  5: 'highest',
+};
+
 export default function CurrentVariantsTable() {
  const [displayModal, setDisplayModal] = useState(false);
  const [modalProcessing, setModalProcessing] = useState(false);
  const [editId, setEditId] = useState(0);
-  const {setMessage} = useContext(AlertMessageContext);
+  const { setMessage } = useContext(AlertMessageContext);

  // current data inside modal
  const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
@@ -76,7 +83,9 @@ export default function CurrentVariantsTable() {
        setSubmitStatusMessage('Variants updated.');
        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);

-        setMessage('Updating your video configuration will take effect the next time you begin a new stream.');
+        setMessage(
+          'Updating your video configuration will take effect the next time you begin a new stream.',
+        );
      },
      onError: (message: string) => {
        setSubmitStatus('error');
@@ -117,14 +126,6 @@ export default function CurrentVariantsTable() {
  const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
    SUCCESS_STATES[submitStatus] || {};

-  const cpuUsageLevelLabelMap = {
-    1: 'lowest',
-    2: 'low',
-    3: 'medium',
-    4: 'high',
-    5: 'highest',
-  };
-
  const videoQualityColumns: ColumnsType<VideoVariant> = [
    {
      title: 'Video bitrate',
@@ -137,7 +138,7 @@ export default function CurrentVariantsTable() {
      title: 'CPU Usage',
      dataIndex: 'cpuUsageLevel',
      key: 'cpuUsageLevel',
-      render: (level: string) => (!level ? 'n/a' : cpuUsageLevelLabelMap[level]),
+      render: (level: string) => (!level ? 'n/a' : CPU_USAGE_LEVEL_MAP[level]),
    },
    {
      title: '',
--- a/web/pages/components/info-tip.tsx
+++ b/web/pages/components/info-tip.tsx
@@ -1,5 +1,5 @@
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { Tooltip } from "antd";
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';

 interface InfoTipProps {
  tip: string | null;
--- a/web/pages/components/key-value-table.tsx
+++ b/web/pages/components/key-value-table.tsx
@@ -1,18 +1,18 @@
-import { Table, Typography } from "antd";
+import { Table, Typography } from 'antd';

 const { Title } = Typography;

 export default function KeyValueTable({ title, data }: KeyValueTableProps) {
  const columns = [
    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
    },
    {
-      title: "Value",
-      dataIndex: "value",
-      key: "value",
+      title: 'Value',
+      dataIndex: 'value',
+      key: 'value',
    },
  ];

@@ -25,6 +25,6 @@ export default function KeyValueTable({ title, data }: KeyValueTableProps) {
 }

 interface KeyValueTableProps {
-  title: string, 
-  data: any,
-};
+  title: string;
+  data: any;
+}
--- a/web/pages/components/log-table.tsx
+++ b/web/pages/components/log-table.tsx
@@ -1,32 +1,30 @@
-import React from "react";
-import { Table, Tag, Typography } from "antd";
-import Linkify from "react-linkify";
-import { SortOrder } from "antd/lib/table/interface";
-import format from 'date-fns/format'
+import React from 'react';
+import { Table, Tag, Typography } from 'antd';
+import Linkify from 'react-linkify';
+import { SortOrder } from 'antd/lib/table/interface';
+import format from 'date-fns/format';

 const { Title } = Typography;

 function renderColumnLevel(text, entry) {
  let color = 'black';

-  if (entry.level === "warning") {
-    color = "orange";
+  if (entry.level === 'warning') {
+    color = 'orange';
  } else if (entry.level === 'error') {
-    color = "red";
+    color = 'red';
  }

  return <Tag color={color}>{text}</Tag>;
 }

 function renderMessage(text) {
-  return (
-    <Linkify>{text}</Linkify>
-  )
+  return <Linkify>{text}</Linkify>;
 }

 interface Props {
-  logs: object[],
-  pageSize: number
+  logs: object[];
+  pageSize: number;
 }

 export default function LogTable({ logs, pageSize }: Props) {
@@ -35,42 +33,42 @@ export default function LogTable({ logs, pageSize }: Props) {
  }
  const columns = [
    {
-      title: "Level",
-      dataIndex: "level",
-      key: "level",
+      title: 'Level',
+      dataIndex: 'level',
+      key: 'level',
      filters: [
        {
-          text: "Info",
-          value: "info",
+          text: 'Info',
+          value: 'info',
        },
        {
-          text: "Warning",
-          value: "warning",
+          text: 'Warning',
+          value: 'warning',
        },
        {
-          text: "Error",
-          value: "Error",
+          text: 'Error',
+          value: 'Error',
        },
      ],
      onFilter: (level, row) => row.level.indexOf(level) === 0,
      render: renderColumnLevel,
    },
    {
-      title: "Timestamp",
-      dataIndex: "time",
-      key: "time",
-      render: (timestamp) => {
+      title: 'Timestamp',
+      dataIndex: 'time',
+      key: 'time',
+      render: timestamp => {
        const dateObject = new Date(timestamp);
        return format(dateObject, 'p P');
      },
      sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
-      sortDirections: ["descend", "ascend"] as SortOrder[],
-      defaultSortOrder: "descend" as SortOrder,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+      defaultSortOrder: 'descend' as SortOrder,
    },
    {
-      title: "Message",
-      dataIndex: "message",
-      key: "message",
+      title: 'Message',
+      dataIndex: 'message',
+      key: 'message',
      render: renderMessage,
    },
  ];
@@ -82,10 +80,9 @@ export default function LogTable({ logs, pageSize }: Props) {
        size="middle"
        dataSource={logs}
        columns={columns}
-        rowKey={(row) => row.time}
+        rowKey={row => row.time}
        pagination={{ pageSize: pageSize || 20 }}
      />
    </div>
  );
 }
-
--- a/web/pages/components/logo.tsx
+++ b/web/pages/components/logo.tsx
@@ -1,85 +1,159 @@
 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}>  
-      <g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)"> 
+    <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)"> 
-                        <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"/>
-                  </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)">
-                        <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"/>
-                  </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)">
-                        <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"/>
-                    </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)"> 
-                          <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"/>
-                    </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"/>
-                          <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"/>
-                    </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)"> 
-                          <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"/>
-                    </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)">
-                          <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"/>
-                    </g>
-                  </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)"
+                    >
+                      <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"
+                  />
                </g>
-                <g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
-                  <path fill="#000000" fillOpacity="1" d=""/>
+                <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)"
+                    >
+                      <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"
+                  />
+                </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)"
+                    >
+                      <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"
+                  />
+                </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)"
+                    >
+                      <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"
+                  />
+                </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" />
+                      <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"
+                  />
+                </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)"
+                    >
+                      <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"
+                  />
+                </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)"
+                    >
+                      <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"
+                  />
                </g>
              </g>
            </g>
+            <g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
+              <path fill="#000000" fillOpacity="1" d="" />
+            </g>
          </g>
-        </svg>
+        </g>
+      </g>
+    </svg>
  );
-}
+}
--- a/web/pages/components/main-layout.tsx
+++ b/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 { differenceInSeconds } from "date-fns";
+import Head from 'next/head';
+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 { parseSecondsToDurationString } from '../../utils/format'
+import { upgradeVersionAvailable } from '../../utils/apis';
+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,72 +36,47 @@ 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);
-  
+
  const router = useRouter();
  const { route } = router || {};

  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);
-  }, [streamTitle]);
+    setCurrentStreamTitle(instanceDetails.streamTitle);
+  }, [instanceDetails]);

  const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
    setCurrentStreamTitle(value);
-  }
-
+  };

  const appClass = classNames({
-    "owncast-layout": true,
-    [adminStyles.online]: online,
+    'app-container': true,
+    online,
  });

  const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
@@ -110,15 +84,36 @@ export default function MainLayout(props) {

  const clearAlertMessage = () => {
    alertMessage.setMessage(null);
-  }
+  };
+
+  const headerAlertMessage = alertMessage.message ? (
+    <Alert message={alertMessage.message} afterClose={clearAlertMessage} banner closable />
+  ) : null;
+
+  // status indicator items
+  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
+  );

-  const headerAlertMessage = alertMessage.message ? ( <Alert
-    message={alertMessage.message}
-    afterClose={clearAlertMessage}
-    banner
-    closable
-  />): null;
-  
  return (
    <Layout className={appClass}>
      <Head>
@@ -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
-        width={240}
-        className={adminStyles.sideNav}
-      >
+      <Sider width={240} className="side-nav">
        <Menu
          theme="dark"
-          defaultSelectedKeys={[route.substring(1) || "home"]}
-          defaultOpenKeys={["current-stream-menu", "utilities-menu", "configuration"]}
+          defaultSelectedKeys={[route.substring(1) || 'home']}
+          defaultOpenKeys={['current-stream-menu', 'utilities-menu', 'configuration']}
          mode="inline"
        >
-          <h1 className={adminStyles.owncastTitleContainer}>
-            <span className={adminStyles.logoContainer}>
+          <h1 className="owncast-title">
+            <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
-            key="viewer-info"
-            icon={<LineChartOutlined />}
-            title="Current stream"
-          >
+          <Menu.Item key="viewer-info" icon={<LineChartOutlined />} title="Current stream">
            <Link href="/viewer-info">Viewers</Link>
          </Menu.Item>

-          <Menu.Item
-            key="chat"
-            icon={<MessageOutlined />}
-            title="Chat utilities"
-          >
+          <Menu.Item key="chat" icon={<MessageOutlined />} title="Chat utilities">
            <Link href="/chat">Chat</Link>
          </Menu.Item>

-          <SubMenu
-            key="configuration"
-            title="Configuration"
-            icon={<SettingOutlined />}
-          >
+          <SubMenu 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
-            key="utilities-menu"
-            icon={<ToolOutlined />}
-            title="Utilities"
-          >
+          <SubMenu 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
-            key="integrations-menu"
-            icon={<ExperimentOutlined />}
-            title="Integrations"
-          >
+          <SubMenu 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
-            key="help"
-            icon={<QuestionCircleOutlined />}
-            title="Help"
-          >
+          <Menu.Item key="help" icon={<QuestionCircleOutlined />} title="Help">
            <Link href="/help">Help</Link>
          </Menu.Item>
        </Menu>
      </Sider>

-      <Layout className={adminStyles.layoutMain}>
-        <Header className={adminStyles.header}>
-          <div className={adminStyles.globalStreamTitleContainer}>
-          <TextFieldWithSubmit
-            apiPath="/streamtitle"
-            maxLength={100}
-            className={adminStyles.globalStreamTitleInput}
-            fieldName="streamTitle"
-            placeholder="What you're streaming right now"
-            value={currentStreamTitle}
-            initialValue={instanceDetails.streamTitle}
-            onChange={handleStreamTitleChanged}
-          />
-</div>
+      <Layout className="layout-main">
+        <Header className="layout-header">
+          <div className="global-stream-title-container">
+            <TextFieldWithSubmit
+              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>

-        <Footer style={{ textAlign: "center" }}>
+        <Content className="main-content-container">{children}</Content>
+
+        <Footer className="footer-container">
          <a href="https://owncast.online/">About Owncast v{versionNumber}</a>
        </Footer>
      </Layout>
@@ -259,4 +226,4 @@ export default function MainLayout(props) {

 MainLayout.propTypes = {
  children: PropTypes.element.isRequired,
-};
+};
--- a/web/pages/components/message-visiblity-toggle.tsx
+++ b/web/pages/components/message-visiblity-toggle.tsx
@@ -1,20 +1,28 @@
-// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon 
-import React, { useState, useEffect } from "react";
-import { Button, Tooltip } from "antd";
-import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
-import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis";
+// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
+import React, { useState, useEffect } from 'react';
+import { Button, Tooltip } from 'antd';
+import {
+  EyeOutlined,
+  EyeInvisibleOutlined,
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
 import { MessageType } from '../../types/chat';
-import { OUTCOME_TIMEOUT } from "../chat";
-import { isEmptyObject } from "../../utils/format";
+import { OUTCOME_TIMEOUT } from '../chat';
+import { isEmptyObject } from '../../utils/format';

 interface MessageToggleProps {
  isVisible: boolean;
  message: MessageType;
-  setMessage: (message: MessageType) => void,
-};
+  setMessage: (message: MessageType) => void;
+}

-
-export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) {
+export default function MessageVisiblityToggle({
+  isVisible,
+  message,
+  setMessage,
+}: MessageToggleProps) {
  if (!message || isEmptyObject(message)) {
    return null;
  }
@@ -25,16 +33,17 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
  const { id: messageId } = message || {};

  const resetOutcome = () => {
-    outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT);
+    outcomeTimeout = setTimeout(() => {
+      setOutcome(0);
+    }, OUTCOME_TIMEOUT);
  };
-  
+
  useEffect(() => {
    return () => {
      clearTimeout(outcomeTimeout);
    };
  });

-
  const updateChatMessage = async () => {
    clearTimeout(outcomeTimeout);
    setOutcome(0);
@@ -47,7 +56,7 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
      },
    });

-    if (result.success && result.message === "changed") {
+    if (result.success && result.message === 'changed') {
      setMessage({ ...message, visible: !isVisible });
      setOutcome(1);
    } else {
@@ -55,14 +64,16 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
      setOutcome(-1);
    }
    resetOutcome();
-  }
-
+  };

  let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
  if (outcome) {
-    outcomeIcon = outcome > 0 ? 
-    <CheckCircleFilled style={{ color: 'var(--ant-success)' }} /> :
-    <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />;
+    outcomeIcon =
+      outcome > 0 ? (
+        <CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
+      ) : (
+        <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
+      );
  }

  const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
@@ -74,10 +85,10 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
          shape="circle"
          size="small"
          type="text"
-          icon={ isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined /> }
+          icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
          onClick={updateChatMessage}
        />
      </Tooltip>
    </div>
  );
-}
+}
--- a/web/pages/components/statistic.tsx
+++ b/web/pages/components/statistic.tsx
@@ -1,18 +1,18 @@
-import { Typography, Statistic, Card, Progress} from "antd";
+import { Typography, Statistic, Card, Progress } from 'antd';

 const { Text } = Typography;

 interface StatisticItemProps {
-  title?: string, 
-  value?: any,
-  prefix?: JSX.Element,
-  color?: string,
-  progress?: boolean,
-  centered?: boolean,
-  formatter?: any,
-};
+  title?: string;
+  value?: any;
+  prefix?: JSX.Element;
+  color?: string;
+  progress?: boolean;
+  centered?: boolean;
+  formatter?: any;
+}
 const defaultProps = {
-  title: '', 
+  title: '',
  value: 0,
  prefix: null,
  color: '',
@@ -21,16 +21,19 @@ const defaultProps = {
  formatter: null,
 };

-
 function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
  const endColor = value > 90 ? 'red' : color;
  const content = (
    <div>
-    {prefix}
-    <div><Text type="secondary">{title}</Text></div>
-    <div><Text type="secondary">{value}%</Text></div>
+      {prefix}
+      <div>
+        <Text type="secondary">{title}</Text>
+      </div>
+      <div>
+        <Text type="secondary">{value}%</Text>
+      </div>
    </div>
-  )
+  );
  return (
    <Progress
      type="dashboard"
@@ -42,19 +45,12 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
      }}
      format={percent => content}
    />
-  )
+  );
 }
 ProgressView.defaultProps = defaultProps;

 function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) {
-  return (
-    <Statistic
-      title={title}
-      value={value}
-      prefix={prefix}
-      formatter={formatter}
-   />
-  );
+  return <Statistic title={title} value={value} prefix={prefix} formatter={formatter} />;
 }
 StatisticView.defaultProps = defaultProps;

@@ -62,14 +58,14 @@ export default function StatisticItem(props: StatisticItemProps) {
  const { progress, centered } = props;
  const View = progress ? ProgressView : StatisticView;

-  const style = centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
+  const style = centered ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {};

  return (
-      <Card type="inner">
-        <div style={style}>
-          <View {...props} />
-        </div>
-      </Card>
+    <Card type="inner">
+      <div style={style}>
+        <View {...props} />
+      </div>
+    </Card>
  );
 }
 StatisticItem.defaultProps = defaultProps;