finalize layout of textfields; add field status component

web/pages/components/config/edit-instance-details.tsx

@@ -16,7 +16,6 @@ import {
   API_YP_SWITCH,
 } from './constants';
 
-import configStyles from '../../../styles/config-pages.module.scss';
 import { UpdateArgs } from '../../../types/config-section';
 
 export default function EditInstanceDetails() {
@@ -57,8 +56,8 @@ export default function EditInstanceDetails() {
   };
 
   return (
-    <div className={configStyles.publicDetailsContainer}>
+    <div className={`publicDetailsContainer`}>
-      <div className={configStyles.textFieldsSection}>
+      <div className={`textFieldsSection`}>
         <TextFieldWithSubmit
           fieldName="instanceUrl"
           {...TEXTFIELD_PROPS_INSTANCE_URL}

web/pages/components/config/edit-server-details.tsx

@@ -13,7 +13,6 @@ import {
   TEXTFIELD_PROPS_WEB_PORT,
 } from './constants';
 
-import configStyles from '../../../styles/config-pages.module.scss';
 import { UpdateArgs } from '../../../types/config-section';
 
 export default function EditInstanceDetails() {
@@ -64,8 +63,8 @@ export default function EditInstanceDetails() {
   }
 
   return (
-    <div className={configStyles.publicDetailsContainer}>
+    <div className={`publicDetailsContainer`}>
-      <div className={configStyles.textFieldsSection}>
+      <div className={`textFieldsSection`}>
         <TextFieldWithSubmit
           fieldName="streamKey"
           {...TEXTFIELD_PROPS_STREAM_KEY}

web/pages/components/config/edit-social-links.tsx

@@ -16,8 +16,6 @@ import {
 import { SocialHandle } from '../../../types/config-section';
 import { isValidUrl } from '../../../utils/urls';
 
-import configStyles from '../../../styles/config-pages.module.scss';
-
 const { Title } = Typography;
 
 export default function EditSocialLinks() {
@@ -236,7 +234,7 @@ export default function EditSocialLinks() {
   };
 
   return (
-    <div className={configStyles.socialLinksEditor}>
+    <div className={`socialLinksEditor`}>
       <Title level={2}>Social Links</Title>
       <p>Add all your social media handles and links to your other profiles here.</p>
 

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { Button } from 'antd';
-
+import classNames from 'classnames';
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
 import { ServerStatusContext } from '../../../utils/server-status-context';
@@ -13,6 +13,7 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import { UpdateArgs } from '../../../types/config-section';
+import InputStatusInfo from './input-status-info';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -43,7 +44,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
     ...textFieldProps // rest of props
   } = props;
 
-  const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
+  const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
 
   // Clear out any validation states and messaging
   const resetStates = () => {
@@ -105,8 +106,13 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
     }
   };
 
+  const textfieldContainerClass = classNames({
+    'textfield-with-submit-container': true,
+    submittable: hasChanged,
+  });
   return (
-    <div className="textfield-with-submit-container">
+    <div className={textfieldContainerClass}>
+      <div className="textfield-component">
         <TextField
           {...textFieldProps}
           status={status || fieldStatus}
@@ -114,14 +120,25 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
           onBlur={handleBlur}
           onChange={handleChange}
         />
-
+      </div>
-      {hasChanged ? (
+      <div className="textfield-container lower-container">
+        <p className="label-spacer" />
+        <div className="lower-content">
+          <div className="field-tip">{tip}</div>
+          <InputStatusInfo status={status || fieldStatus} />
           <div className="update-button-container">
-          <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
+            <Button
+              type="primary"
+              size="small"
+              className="submit-button"
+              onClick={handleSubmit}
+              disabled={!hasChanged}
+            >
               Update
             </Button>
           </div>
-      ) : null}
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Input, InputNumber } from 'antd';
 import { FieldUpdaterFunc } from '../../../types/config-section';
-import InfoTip from '../info-tip';
+// import InfoTip from '../info-tip';
 import { StatusState } from '../../../utils/input-statuses';
+import InputStatusInfo from './input-status-info';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -107,15 +109,20 @@ export default function TextField(props: TextFieldProps) {
 
   const fieldId = `field-${fieldName}`;
 
-  const { icon: statusIcon, message: statusMessage } = status || {};
+  const { type: statusType } = status || {};
 
+  const containerClass = classNames({
+    'textfield-container': true,
+    [`type-${type}`]: true,
+    required,
+    [`status-${statusType}`]: status,
+  });
   return (
-    <div className={`textfield-container type-${type}`}>
+    <div className={containerClass}>
       {label ? (
         <div className="label-side">
           <label htmlFor={fieldId} className="textfield-label">
-            {required ? <span className="required-label">* </span> : null}
+            {label}
-            {label}:
           </label>
         </div>
       ) : null}
@@ -135,17 +142,13 @@ export default function TextField(props: TextFieldProps) {
             disabled={disabled}
             value={value}
           />
-          
         </div>
-        <div className="status-container">
+        <InputStatusInfo status={status} />
-          {status ? <span className="status-icon">{statusIcon}</span> : null}
+        <p className="field-tip">
-          {status ? <span className="status-message">{statusMessage}</span> : null}
+          {tip}
-        </div>
+          {/* <InfoTip tip={tip} /> */}
-        <p className="tip">
-          <InfoTip tip={tip} />
         </p>
       </div>
-      
     </div>
   );
 }

web/pages/components/config/input-status-info.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { StatusState } from '../../../utils/input-statuses';
+
+interface InputStatusInfoProps {
+  status: StatusState;
+}
+export default function InputStatusInfo({ status }: InputStatusInfoProps) {
+  const { type, icon, message } = status || {};
+  const classes = classNames({
+    'status-container': true,
+    [`status-${type}`]: type,
+    empty: !message,
+  });
+  return (
+    <div className={classes}>
+      {icon ? <span className="status-icon">{icon}</span> : null}
+      {message ? <span className="status-message">{message}</span> : null}
+    </div>
+  );
+}

web/pages/config-public-details.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Typography } from 'antd';
 import Link from 'next/link';
 
-import configStyles from '../styles/config-pages.module.scss';
 import EditInstanceDetails from './components/config/edit-instance-details';
 
 const { Title } = Typography;
@@ -12,8 +11,8 @@ export default function PublicFacingDetails() {
     <>
       <Title level={2}>Edit your public facing instance details</Title>
 
-      <div className={configStyles.publicDetailsContainer}>
+      <div className={`publicDetailsContainer`}>
-        <div className={configStyles.textFieldsSection}>
+        <div className={`textFieldsSection`}>
           <EditInstanceDetails />
 
           <Link href="/admin/config-page-content">

web/styles/config-formfields.scss

@@ -1,35 +1,75 @@
+// Base styles for form-textfield, form-textfield-with-submit, and helper components.
+
+.status-container {
+  &.status-success {
+    color: var(--ant-success);
+  }
+  &.status-error {
+    color: var(--ant-error);
+  }
+  &.status-warning {
+    color: var(--ant-warning);
+  }
+
+  &.empty {
+    display: none;
+  }
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: .75rem;
+  .status-icon {
+    display: inline-block;
+    margin-right: .5em;
+  }
+}
+
+.field-tip {
+  font-size: .7em;
+  color: rgba(255,255,255,.7)
+}
+
+
 .textfield-container {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
-
+  max-width: 600px;
-
   .label-side {
-    padding-right: 1em;
+    padding-right: .75em;
     text-align: right;
-    width: 12rem;
+    width: 12em;
     margin: .2em 0;
   }
   .textfield-label {
     font-weight: 400;
-    font-size: .85rem;
+    font-size: .85em;
     color: var(--owncast-purple);
+
+    &::after {
+      content: ':';
     }
-  .required-label {
+  }
+  &.required {
+    .textfield-label {
+      &::before {
+        content: '*';
+        display: inline-block;
+        margin-right: .25em;
         color: var(--ant-error);
       }
-
+    }
+  }
 
   .input-side {
     max-width: 500px;
     width: 100%;
   }
 
-
+  .input-group {
-  .input-group,
-  .status-container {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -37,49 +77,88 @@
   }
 
   .status-container {
-    margin: 0 .25em;
+    margin: .25em;
-    min-height: 1.5em;
+    width: 100%;
-    font-size: .75em;
+    display: block;
-
+    &.empty {
-    .status-icon {
       display: inline-block;
-      margin-right: .5em;
+      visibility: visible;
     }
   }
   
-  .tip {
+  .field-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 {
+      width: 100%;
       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: column;
+  align-items: flex-start;
+  margin-bottom: 1em;
+
+  .textfield-component {
+    width: 100%;
+    .textfield-container {
+      .field-tip,
+      .status-container {
+        display: none;
+      }
+    }
+  }
+
+  // for lack of a better name
+  .lower-container {
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .label-spacer {
+      width: 12em;
+    }
+    .lower-content {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-end;
+      width: 100%;
+
+      .field-tip {
+        margin-right: 1em;
+        width: 100%;
+      }
+      .status-container {
+        margin: .5em;
+      }
+    }
     .update-button-container {
-    display: inline-block;
+      visibility: hidden;
-    margin: .25em;
+      margin: .25em 0;
+    }
+  }
+
+  &.submittable {
+    .lower-container {
+      .update-button-container {
+        visibility: visible;
+      }
+    }
+  }
+
+
+  @media (max-width: 800px) {
+    .label-spacer {
+      display: none;
+    }
   }
 }

web/styles/config-pages.module.scss

@@ -1,33 +0,0 @@
-.publicDetailsContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  flex-wrap: wrap;
-
-  .textFieldsSection {
-    margin-right: 2rem;
-  }
-}
-
-
-
-.socialLinksEditor {
-  width: 20rem;
-  margin: 2em 0;
-}
-
-
-
-.tag-editor-container,
-.config-directory-details-form {
-  border-radius: 1em;
-  background-color: rgba(128,99,255,.1);
-  padding: 1.5em;
-  margin-bottom: 1em;
-}
-
-//////////////////////////////
-// common?
-.dataTable {
-
-}

web/utils/input-statuses.tsx

@@ -13,12 +13,7 @@ export const STATUS_PROCESSING = 'proessing';
 export const STATUS_SUCCESS = 'success';
 export const STATUS_WARNING = 'warning';
 
-export type InputStatusTypes =
+export type InputStatusTypes = 'error' | 'invalid' | 'proessing' | 'success' | 'warning';
-  | typeof STATUS_ERROR
-  | typeof STATUS_INVALID
-  | typeof STATUS_PROCESSING
-  | typeof STATUS_SUCCESS
-  | typeof STATUS_WARNING;
 
 export type StatusState = {
   type: InputStatusTypes;
@@ -28,22 +23,27 @@ export type StatusState = {
 
 export const INPUT_STATES = {
   [STATUS_SUCCESS]: {
+    type: STATUS_SUCCESS,
     icon: <CheckCircleFilled style={{ color: 'green' }} />,
     message: 'Success!',
   },
   [STATUS_ERROR]: {
+    type: STATUS_ERROR,
     icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
     message: 'An error occurred.',
   },
   [STATUS_INVALID]: {
+    type: STATUS_INVALID,
     icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
     message: 'An error occurred.',
   },
   [STATUS_PROCESSING]: {
+    type: STATUS_PROCESSING,
     icon: <LoadingOutlined />,
     message: '',
   },
   [STATUS_WARNING]: {
+    type: STATUS_WARNING,
     icon: <WarningOutlined style={{ color: '#fc0' }} />,
     message: '',
   },