Admin css overhaul pt2 (#19)

* tweaks to offline state in admin viewers page

If stream is offline, hide current viewers statistic and viewers table.
Also, change wording for describing max viewers.

* take out ant dark stylesheet, organize ant color overrides

* remove ant dark css; cleanup ant overrides; format public-detail page

* combine toggleswitch component style with textfield so layout can be shared

* fix toggleswitch status message placement

* - update styles for modals, collapses
- move reset dir into its own component
- assorted style cleanups ans consistencies

* hide entire advanced section for resetyp if no yp

* temp adjustments to video modal

* temp comment out toggle switch use for later'

* address PR comments

* lint

* update type

* allow warnings during lint

Co-authored-by: nebunez <uoj2y7wak869@opayq.net>

web/components/main-layout.tsx

@@ -49,7 +49,7 @@ export default function MainLayout(props) {
   const { Header, Footer, Content, Sider } = Layout;
   const { SubMenu } = Menu;
 
-  const [upgradeVersion, setUpgradeVersion] = useState(null);
+  const [upgradeVersion, setUpgradeVersion] = useState('');
   const checkForUpgrade = async () => {
     try {
       const result = await upgradeVersionAvailable(versionNumber);
@@ -80,7 +80,8 @@ export default function MainLayout(props) {
   });
 
   const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
-  const upgradeVersionString = upgradeVersion || '';
+  const upgradeVersionString = `${upgradeVersion}` || '';
+  const upgradeMessage = `Upgrade to v${upgradeVersionString}`;
 
   const clearAlertMessage = () => {
     alertMessage.setMessage(null);
@@ -123,10 +124,10 @@ export default function MainLayout(props) {
 
       <Sider width={240} className="side-nav">
         <Menu
-          theme="dark"
           defaultSelectedKeys={[route.substring(1) || 'home']}
           defaultOpenKeys={['current-stream-menu', 'utilities-menu', 'configuration']}
           mode="inline"
+          className="menu-container"
         >
           <h1 className="owncast-title">
             <span className="logo-container">
@@ -150,13 +151,6 @@ export default function MainLayout(props) {
             <Menu.Item key="config-public-details">
               <Link href="/config-public-details">General</Link>
             </Menu.Item>
-            <Menu.Item key="config-social-items">
-              <Link href="/config-social-items">Social Links</Link>
-            </Menu.Item>
-
-            <Menu.Item key="config-page-content">
-              <Link href="/config-page-content">Page Content</Link>
-            </Menu.Item>
 
             <Menu.Item key="config-server-details">
               <Link href="/config-server-details">Server Setup</Link>
@@ -177,9 +171,7 @@ export default function MainLayout(props) {
               <Link href="/logs">Logs</Link>
             </Menu.Item>
             <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
-              <Link href="/upgrade">
-                <a>Upgrade to v{upgradeVersionString}</a>
-              </Link>
+              <Link href="/upgrade">{upgradeMessage}</Link>
             </Menu.Item>
           </SubMenu>
           <SubMenu key="integrations-menu" icon={<ExperimentOutlined />} title="Integrations">