initial temp fixes on form fields

web/pages/_app.tsx

@@ -6,6 +6,7 @@ import '../styles/ant-overrides.scss';
 import '../styles/home.scss';
 import '../styles/chat.scss';
 import '../styles/config.scss';
+import '../styles/config-formfields.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';

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

@@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
   const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
 
   const [hasChanged, setHasChanged] = useState(false);
-  // const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
 
   const serverStatusData = useContext(ServerStatusContext);
   const { setFieldInConfigState } = serverStatusData || {};
@@ -64,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
       // show submit button
       resetStates();
       setHasChanged(true);
-      // setFieldValueForSubmit(value);
     }
   }, [value]);
 
@@ -118,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
       />
 
       {hasChanged ? (
-        <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
+        <div className="update-button-container">
-          Update
+          <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
-        </Button>
+            Update
+          </Button>
+        </div>
       ) : null}
     </div>
   );

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

@@ -111,28 +111,41 @@ export default function TextField(props: TextFieldProps) {
 
   return (
     <div className={`textfield-container type-${type}`}>
-      {required ? <span className="required-label">*</span> : null}
+      {label ? (
-      <label htmlFor={fieldId} className="textfield-label">
+        <div className="label-side">
-        {label}
+          <label htmlFor={fieldId} className="textfield-label">
-      </label>
+            {required ? <span className="required-label">* </span> : null}
-      <div className="textfield">
+            {label}:
-        <Field
+          </label>
-          id={fieldId}
+        </div>
-          className={`field ${className} ${fieldId}`}
+      ) : null}
-          {...fieldProps}
+
-          allowClear
+      <div className="input-side">
-          placeholder={placeholder}
+        <div className="input-group">
-          maxLength={maxLength}
+          <Field
-          onChange={handleChange}
+            id={fieldId}
-          onBlur={handleBlur}
+            className={`field ${className} ${fieldId}`}
-          onPressEnter={handlePressEnter}
+            {...fieldProps}
-          disabled={disabled}
+            allowClear
-          value={value}
+            placeholder={placeholder}
-        />
+            maxLength={maxLength}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onPressEnter={handlePressEnter}
+            disabled={disabled}
+            value={value}
+          />
+          
+        </div>
+        <div className="status-container">
+          {status ? <span className="status-icon">{statusIcon}</span> : null}
+          {status ? <span className="status-message">{statusMessage}</span> : null}
+        </div>
+        <p className="tip">
+          <InfoTip tip={tip} />
+        </p>
       </div>
-      <InfoTip tip={tip} />
+      
-      {status ? statusMessage : null}
-      {status ? statusIcon : null}
     </div>
   );
 }

web/styles/ant-overrides.scss

@@ -28,14 +28,14 @@
 
 // INPUT
 .ant-input-affix-wrapper {
-  border-radius: 5px;
+  // border-radius: 5px;
-  background-color: rgba(255,255,255,.1);
+  // background-color: rgba(255,255,255,.1);
 
   textarea {
-    border-radius: 5px;
+    // border-radius: 5px;
   }
   input {
-    background-color: transparent;
+    // background-color: transparent;
   }
 }
 

web/styles/config-formfields.scss

@@ -0,0 +1,85 @@
+.textfield-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+
+
+  .label-side {
+    padding-right: 1em;
+    text-align: right;
+    width: 12rem;
+    margin: .2em 0;
+  }
+  .textfield-label {
+    font-weight: 400;
+    font-size: .85rem;
+    color: var(--owncast-purple);
+  }
+  .required-label {
+    color: var(--ant-error);
+  }
+
+
+  .input-side {
+    max-width: 500px;
+    width: 100%;
+  }
+
+
+  .input-group,
+  .status-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .status-container {
+    margin: 0 .25em;
+    min-height: 1.5em;
+    font-size: .75em;
+
+    .status-icon {
+      display: inline-block;
+      margin-right: .5em;
+    }
+  }
+  
+  .tip {
+    margin: .5em .5em;
+    font-size: .75rem;
+    color: rgba(255,255,255,.75);
+  }
+
+  @media (max-width: 800px) {
+    // flex-direction: column;
+    flex-wrap: wrap;
+    .label-side {
+      text-align: left;
+    }
+  }
+}
+
+.status-message {
+  // margin: 1rem 0;
+  // min-height: 1.4em;
+  // font-size: .75rem;
+  &.success {
+    color: var(--ant-success);
+  }
+  &.error {
+    color: var(--ant-error);
+  }
+}
+
+
+.textfield-with-submit-container {
+  display: flex;
+  flex-direction: row;
+  .update-button-container {
+    display: inline-block;
+    margin: .25em;
+  }
+}

web/styles/config.scss

@@ -27,72 +27,62 @@
 }
 
 
-.status-message {
+
-  margin: 1rem 0;
-  min-height: 1.4em;
-  font-size: .75rem;
-  &.success {
-    color: var(--ant-success);
-  }
-  &.error {
-    color: var(--ant-error);
-  }
-}
 
 // form-textfield
 // form-textfield
-.textfield-container {
+// .textfield-container {
-  display: flex;
+//   display: flex;
-  flex-direction: column;
+//   flex-direction: column;
-  align-items: flex-start;
+//   align-items: flex-start;
-  justify-content: flex-end;
+//   justify-content: flex-end;
-  position: relative;
+//   position: relative;
-  width: 314px;
+//   width: 314px;
 
-  // &.type-numeric {
+//   // &.type-numeric {
-  //   .ant-form-item-control {
+//   //   .ant-form-item-control {
-  //     flex-direction: row;
+//   //     flex-direction: row;
-  //     .ant-form-item-control-input {
+//   //     .ant-form-item-control-input {
-  //       margin-right: .75rem;
+//   //       margin-right: .75rem;
-  //     }
+//   //     }
-  //   }
+//   //   }
-  // }
+//   // }
-}
+// }
-.textfield {
+// .textfield {
-  display: flex;
+//   display: flex;
-  flex-direction: row;
+//   flex-direction: row;
-  align-items: flex-start;
+//   align-items: flex-start;
 
-  .field {
+//   .field {
-    width: 18rem;
+//     width: 18rem;
 
-    &.ant-input-number {
+//     &.ant-input-number {
-      width: 8em;
+//       width: 8em;
-    }
+//     }
 
-  }
+//   }
-  .info-tip {
+//   .info-tip {
-    margin-right: .75rem;
+//     margin-right: .75rem;
-  }
+//   }
-  .ant-form-item {
+//   .ant-form-item {
-    margin-bottom: 16px;
+//     margin-bottom: 16px;
-    &.ant-form-item-with-help {
+//     &.ant-form-item-with-help {
-      margin-bottom: 16px;
+//       margin-bottom: 16px;
-    }
+//     }
-  }
+//   }
-  .ant-form-item-label label {
+//   .ant-form-item-label label {
-    font-weight: bold;
+//     font-weight: bold;
-    color: var(--owncast-purple);
+//     color: var(--owncast-purple);
-  }
+//   }
-  .ant-form-item-explain {
+//   .ant-form-item-explain {
-    width: 70%;
+//     width: 70%;
-  }
+//   }
-}
+// }
-.submit-button {
+// .submit-button {
-  position: absolute;
+//   position: absolute;
-  right: 0;
+//   right: 0;
-  bottom: .5em;
+//   bottom: .5em;
-}
+// }
 // .ant-form-horizontal {
 //   .textfield-container.type-numeric {
 //     width: auto;

web/utils/input-statuses.tsx

@@ -1,4 +1,9 @@
-import { CheckCircleFilled, ExclamationCircleFilled, LoadingOutlined, WarningOutlined } from '@ant-design/icons';
+import {
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+  LoadingOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
 
 export const STATUS_RESET_TIMEOUT = 3000;
 
@@ -9,13 +14,14 @@ export const STATUS_SUCCESS = 'success';
 export const STATUS_WARNING = 'warning';
 
 export type InputStatusTypes =
-  typeof STATUS_ERROR | 
+  | typeof STATUS_ERROR
-  typeof STATUS_INVALID | 
+  | typeof STATUS_INVALID
-  typeof STATUS_PROCESSING | 
+  | typeof STATUS_PROCESSING
-  typeof STATUS_SUCCESS | 
+  | typeof STATUS_SUCCESS
-  typeof STATUS_WARNING;
+  | typeof STATUS_WARNING;
 
 export type StatusState = {
+  type: InputStatusTypes;
   icon: any; // Element type of sorts?
   message: string;
 };
@@ -48,10 +54,11 @@ export function createInputStatus(type: InputStatusTypes, message?: string): Sta
   if (!type || !INPUT_STATES[type]) {
     return null;
   }
-  if (message === null) {
+  if (!message) {
     return INPUT_STATES[type];
   }
   return {
+    type,
     icon: INPUT_STATES[type].icon,
     message,
   };