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/config/edit-server-details.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Tooltip, Collapse, Popconfirm } from 'antd';
+import { Button, Tooltip, Collapse } from 'antd';
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
-const { Panel } = Collapse;
 
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield';
 import TextFieldWithSubmit from './form-textfield-with-submit';
@@ -15,9 +14,11 @@ import {
   TEXTFIELD_PROPS_STREAM_KEY,
   TEXTFIELD_PROPS_WEB_PORT,
 } from '../../utils/config-constants';
-import { fetchData, API_YP_RESET } from '../../utils/apis';
 
 import { UpdateArgs } from '../../types/config-section';
+import ResetYP from './reset-yp';
+
+const { Panel } = Collapse;
 
 export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
@@ -68,41 +69,6 @@ export default function EditInstanceDetails() {
     }
   };
 
-  const resetDirectoryRegistration = async () => {
-    try {
-      await fetchData(API_YP_RESET);
-      setMessage('');
-    } catch (error) {
-      alert(error);
-    }
-  };
-
-  function ResetYP() {
-    // TODO: Uncomment this after it's styled.
-    // if (yp.enabled) {
-    return (
-      <div className="field-container">
-        Reset Directory:
-        <Popconfirm
-          placement="topLeft"
-          title={'Are you sure you want to reset your connection to the Owncast directory?'}
-          onConfirm={resetDirectoryRegistration}
-          okText="Yes"
-          cancelText="No"
-        >
-          <Button>Reset Directory Connection</Button>
-        </Popconfirm>
-        <p>
-          If you are experiencing issues with your listing on the Owncast Directory and were asked
-          to "reset" your connection to the service, you can do that here. The next time you go live
-          it will try and re-register your server with the directory from scratch.
-        </p>
-      </div>
-    );
-    // }
-    // return null;
-  }
-
   function generateStreamKey() {
     let key = '';
     for (let i = 0; i < 3; i += 1) {
@@ -172,13 +138,14 @@ export default function EditInstanceDetails() {
         onChange={handleFieldChange}
         onSubmit={showConfigurationRestartMessage}
       />
-      <Collapse>
-        <Panel header="Advanced Settings" key="1">
-          <div className="form-fields">
+
+      {yp.enabled && (
+        <Collapse className="advanced-settings">
+          <Panel header="Advanced Settings" key="1">
             <ResetYP />
-          </div>
-        </Panel>
-      </Collapse>
+          </Panel>
+        </Collapse>
+      )}
     </div>
   );
 }