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/form-toggleswitch-with-submit.tsx

@@ -1,3 +1,6 @@
+// This is a wrapper for the Ant Switch component.
+// onChange of the switch, it will automatically post a change to the config api.
+
 import React, { useState, useContext } from 'react';
 import { Switch } from 'antd';
 import {
@@ -12,7 +15,6 @@ import FormStatusIndicator from './form-status-indicator';
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
-import InfoTip from '../info-tip';
 
 interface ToggleSwitchProps {
   apiPath: string;
@@ -23,8 +25,9 @@ interface ToggleSwitchProps {
   disabled?: boolean;
   label?: string;
   tip?: string;
+  useSubmit?: boolean;
+  onChange?: (arg: boolean) => void;
 }
-
 export default function ToggleSwitch(props: ToggleSwitchProps) {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -33,7 +36,17 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   const serverStatusData = useContext(ServerStatusContext);
   const { setFieldInConfigState } = serverStatusData || {};
 
-  const { apiPath, checked, configPath = '', disabled = false, fieldName, label, tip } = props;
+  const {
+    apiPath,
+    checked,
+    configPath = '',
+    disabled = false,
+    fieldName,
+    label,
+    tip,
+    useSubmit,
+    onChange,
+  } = props;
 
   const resetStates = () => {
     setSubmitStatus(null);
@@ -42,41 +55,52 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   };
 
   const handleChange = async (isChecked: boolean) => {
-    setSubmitStatus(createInputStatus(STATUS_PROCESSING));
+    if (useSubmit) {
+      setSubmitStatus(createInputStatus(STATUS_PROCESSING));
 
-    await postConfigUpdateToAPI({
-      apiPath,
-      data: { value: isChecked },
-      onSuccess: () => {
-        setFieldInConfigState({ fieldName, value: isChecked, path: configPath });
-        setSubmitStatus(createInputStatus(STATUS_SUCCESS));
-      },
-      onError: (message: string) => {
-        setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
-      },
-    });
-    resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      await postConfigUpdateToAPI({
+        apiPath,
+        data: { value: isChecked },
+        onSuccess: () => {
+          setFieldInConfigState({ fieldName, value: isChecked, path: configPath });
+          setSubmitStatus(createInputStatus(STATUS_SUCCESS));
+        },
+        onError: (message: string) => {
+          setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
+        },
+      });
+      resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+    }
+    if (onChange) {
+      onChange(isChecked);
+    }
   };
 
   const loading = submitStatus !== null && submitStatus.type === STATUS_PROCESSING;
   return (
-    <div className="toggleswitch-container">
-      <div className="toggleswitch">
-        <Switch
-          className={`switch field-${fieldName}`}
-          loading={loading}
-          onChange={handleChange}
-          defaultChecked={checked}
-          checked={checked}
-          checkedChildren="ON"
-          unCheckedChildren="OFF"
-          disabled={disabled}
-        />
-        <span className="label">
-          {label} <InfoTip tip={tip} />
-        </span>
+    <div className="formfield-container toggleswitch-container">
+      {label && (
+        <div className="label-side">
+          <span className="formfield-label">{label}</span>
+        </div>
+      )}
+
+      <div className="input-side">
+        <div className="input-group">
+          <Switch
+            className={`switch field-${fieldName}`}
+            loading={loading}
+            onChange={handleChange}
+            defaultChecked={checked}
+            checked={checked}
+            checkedChildren="ON"
+            unCheckedChildren="OFF"
+            disabled={disabled}
+          />
+          <FormStatusIndicator status={submitStatus} />
+        </div>
+        <p className="field-tip">{tip}</p>
       </div>
-      <FormStatusIndicator status={submitStatus} />
     </div>
   );
 }
@@ -87,4 +111,6 @@ ToggleSwitch.defaultProps = {
   disabled: false,
   label: '',
   tip: '',
+  useSubmit: false,
+  onChange: null,
 };