clean up and style tweaks

web/pages/_app.tsx

@@ -2,7 +2,6 @@ import 'antd/dist/antd.css';
 import '../styles/colors.scss';
 import '../styles/globals.scss';
 
-// GW: I can't override ant design styles through components using NextJS's built-in CSS modules. So I'll just import styles here for now and figure out enabling SASS modules later.
 import '../styles/home.scss';
 import '../styles/chat.scss';
 import '../styles/config.scss';

web/pages/components/config/constants.tsx

@@ -24,7 +24,6 @@ export const SUCCESS_STATES = {
 };
 
 
-
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {
     apiPath,
@@ -38,9 +37,9 @@ export async function postConfigUpdateToAPI(args: ApiPostArgs) {
     auth: true,
   });
   if (result.success && onSuccess) {
-    onSuccess();
+    onSuccess(result.message);
   } else if (onError) {
-    onError();
+    onError(result.message);
   }
 }
 
@@ -96,7 +95,7 @@ export const TEXTFIELD_DEFAULTS = {
       maxLength: 255,
       placeholder: '/img/mylogo.png',
       label: 'Logo',
-      tip: 'Path to your logo from website root',
+      tip: 'Path to your logo from website root. We recommend that you use a square image that is at least 256x256. (upload functionality coming soon)',
     },
   
     extraPageContent: {
@@ -113,8 +112,6 @@ export const TEXTFIELD_DEFAULTS = {
       tip: "Turn this ON if you plan to steam explicit or adult content. You may want to respectfully set this flag so that unexpecting eyes won't accidentally see it from the Directory.",
     },  
 
-
-    // 
     tags: {
       apiPath: '/tags',
       defaultValue: '',

web/pages/components/config/edit-directory.tsx

@@ -42,7 +42,7 @@ export default function EditYPDetails() {
       
       <p>Would you like to appear in the <a href="https://directory.owncast.online" target="_blank" rel="noreferrer"><strong>Owncast Directory</strong></a>?</p>
 
-      <p><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
+      <p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
 
       <div className="config-yp-container">
         <Form

web/pages/components/config/edit-tags.tsx

@@ -12,7 +12,7 @@ export default function EditInstanceTags() {
   const [submitStatus, setSubmitStatus] = useState(null);
   const [submitStatusMessage, setSubmitStatusMessage] = useState('');
   const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig, setConfigField } = serverStatusData || {};
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
 
   const { instanceDetails } = serverConfig;
   const { tags = [] } = instanceDetails;
@@ -47,7 +47,7 @@ export default function EditInstanceTags() {
       apiPath,
       data: { value: postValue },
       onSuccess: () => {
-        setConfigField({ fieldName: 'tags', value: postValue, path: configPath });
+        setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
         setSubmitStatus('success');
         setSubmitStatusMessage('Tags updated.');
         setNewTagInput('');

web/pages/components/config/form-textfield.tsx

@@ -17,15 +17,14 @@ update vals to state, andthru api.
 
 */
 import React, { useState, useContext } from 'react';
-import { Button, Form, Input, InputNumber, Tooltip } from 'antd';
+import { Button, Form, Input, InputNumber } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
-
 import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
 import { TextFieldProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import InfoTip from '../info-tip';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -42,7 +41,7 @@ export default function TextField(props: TextFieldProps) {
   let resetTimer = null;
 
   const serverStatusData = useContext(ServerStatusContext);
-  const { setConfigField } = serverStatusData || {};
+  const { setFieldInConfigState } = serverStatusData || {};
   
   const {
     configPath = '',
@@ -107,7 +106,7 @@ export default function TextField(props: TextFieldProps) {
         apiPath,
         data: { value: fieldValueForSubmit },
         onSuccess: () => {
-          setConfigField({ fieldName, value: fieldValueForSubmit, path: configPath });
+          setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath });
           setSubmitStatus('success');
         },
         onError: (message: string) => {
@@ -144,11 +143,7 @@ export default function TextField(props: TextFieldProps) {
    return (
     <div className="textfield-container">
       <div className="textfield">
-       <span className="info">
-          <Tooltip title={tip}>
-            <InfoCircleOutlined />
-          </Tooltip>
-        </span>
+       <InfoTip tip={tip} />
         <Form.Item
           label={label}
           name={fieldName}

web/pages/components/config/form-toggleswitch.tsx

@@ -1,13 +1,12 @@
 import React, { useState, useContext } from 'react';
-import { Form, Switch, Tooltip } from 'antd';
+import { Form, Switch } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
-
 import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
 
 import { ToggleSwitchProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import InfoTip from '../info-tip';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -22,7 +21,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   let resetTimer = null;
 
   const serverStatusData = useContext(ServerStatusContext);
-  const { setConfigField } = serverStatusData || {};
+  const { setFieldInConfigState } = serverStatusData || {};
   
   const {
     fieldName,
@@ -53,7 +52,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
       apiPath,
       data: { value: checked },
       onSuccess: () => {
-        setConfigField({ fieldName, value: checked, path: configPath });
+        setFieldInConfigState({ fieldName, value: checked, path: configPath });
         setSubmitStatus('success');
       },
       onError: (message: string) => {
@@ -69,14 +68,6 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
     message: newStatusMessage = '',
   } = SUCCESS_STATES[submitStatus] || {};
 
-  const tipComponent = tip ? (
-    <span className="info">
-      <Tooltip title={tip}>
-        <InfoCircleOutlined />
-      </Tooltip>
-    </span>
-  ) : null;
- 
   return (
     <div className="toggleswitch-container">
       <div className="toggleswitch">
@@ -95,8 +86,8 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
           />
         </Form.Item>
 
-        <span className="label">{label}</span>
-        {tipComponent}
+        <span className="label">{label} <InfoTip tip={tip} /></span>
+        
       </div>
       <div className={`status-message ${submitStatus || ''}`}>
         {newStatusIcon} {newStatusMessage} {submitStatusMessage}

web/pages/components/info-tip.tsx

@@ -0,0 +1,20 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+
+interface InfoTipProps {
+  tip: string | null;
+}
+
+export default function InfoTip({ tip }: InfoTipProps) {
+  if (tip === '' || tip === null) {
+    return null;
+  }
+
+  return (
+    <span className="info-tip">
+      <Tooltip title={tip}>
+        <InfoCircleOutlined />
+      </Tooltip>
+    </span>
+  );
+}

web/pages/config-public-details.tsx

@@ -88,7 +88,7 @@ export default function PublicFacingDetails() {
           <br/>
           add tags comp */}
           <EditInstanceTags />
-          <br/><br/>
+
           <EditDirectoryDetails />          
         </div>
       </div>      

web/styles/config.scss

@@ -7,17 +7,22 @@
   .text-fields {
     margin-right: 2rem;
   }
-
   .misc-fields {
-    // border: 1px solid var(--owncast-purple);
-    padding: 2em;
+    width: 25em;
+  }
+  .tag-editor-container,
+  .config-directory-details-form {
+    border-radius: 1em;
+    background-color: rgba(128,0,255,.15);
+    padding: 1.5em;
+    margin-bottom: 1em;
   }
 }
 
 
 .status-message {
   margin: 1rem 0;
-  min-height: 1.25em;
+  min-height: 1.4em;
   font-size: .75rem;
   &.success {
     color: var(--ant-success);
@@ -46,7 +51,7 @@
     width: 18rem;
 
   }
-  .info {
+  .info-tip {
     margin-right: .75rem;
   }
   .ant-form-item {
@@ -86,7 +91,12 @@
     font-weight: bold;
     color: var(--owncast-purple);
   }
-  .info { margin-left: .5rem }
+  .info-tip {
+    margin-left: .5rem;
+    svg {
+      fill: white;
+    }
+  }
   .ant-form-item {
     margin: 0 .75rem 0 0;
   }

web/styles/globals.scss

@@ -25,17 +25,41 @@ pre {
   margin: .5rem 0;
   background-color: #eee;
 }
+code {
+  color: var(--owncast-purple);
+}
 
 .owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: $owncast-purple;
 }
 
 
+
+@media (prefers-color-scheme: dark) {
+  @import "~antd/dist/antd.dark";
+  pre {
+    background-color: rgb(44, 44, 44);
+    color:lightgrey;
+  }
+}
+
+
 // GENERAL ANT FORM OVERRIDES
 // GENERAL ANT FORM OVERRIDES
 .ant-card {
   border-radius: .5em;
 }
+.ant-input-affix-wrapper {
+  border-radius: 5px;
+  background-color: rgba(0,0,0,.1);
+  @media (prefers-color-scheme: dark) {
+    border-radius: 5px;
+    background-color: rgba(255,255,255,.1);
+  }
+  textarea {
+    border-radius: 5px;
+  }
+}
 .ant-btn-primary:hover, .ant-btn-primary:focus {
   background-color: white;
   color: #40a9ff;
@@ -51,12 +75,3 @@ pre {
   transition-delay: 0s;
   transition-duration: 0.15s;
 }
-
-
-@media (prefers-color-scheme: dark) {
-  @import "~antd/dist/antd.dark";
-  pre {
-    background-color: rgb(44, 44, 44);
-    color:lightgrey;
-  }
-}

web/utils/server-status-context.tsx

@@ -53,7 +53,7 @@ export const ServerStatusContext = React.createContext({
   ...initialServerStatusState,
   serverConfig: initialServerConfigState,
 
-  setConfigField: any,
+  setFieldInConfigState: any,
 });
 
 const ServerStatusProvider = ({ children }) => {
@@ -78,7 +78,7 @@ const ServerStatusProvider = ({ children }) => {
     }
   };
 
-  const setConfigField = ({ fieldName, value, path }: UpdateArgs) => {
+  const setFieldInConfigState = ({ fieldName, value, path }: UpdateArgs) => {
     const updatedConfig = path ? 
     {
       ...config,
@@ -114,7 +114,7 @@ const ServerStatusProvider = ({ children }) => {
       ...status,
       serverConfig: config,
 
-      setConfigField,
+      setFieldInConfigState,
   };
   return (
     <ServerStatusContext.Provider value={providerValue}>