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={configStyles.textFieldsSection}>
+    <div className={`publicDetailsContainer`}>
+      <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={configStyles.textFieldsSection}>
+    <div className={`publicDetailsContainer`}>
+      <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,23 +106,39 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
     }
   };
 
+  const textfieldContainerClass = classNames({
+    'textfield-with-submit-container': true,
+    submittable: hasChanged,
+  });
   return (
-    <div className="textfield-with-submit-container">
-      <TextField
-        {...textFieldProps}
-        status={status || fieldStatus}
-        onSubmit={null}
-        onBlur={handleBlur}
-        onChange={handleChange}
-      />
-
-      {hasChanged ? (
-        <div className="update-button-container">
-          <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
-            Update
-          </Button>
+    <div className={textfieldContainerClass}>
+      <div className="textfield-component">
+        <TextField
+          {...textFieldProps}
+          status={status || fieldStatus}
+          onSubmit={null}
+          onBlur={handleBlur}
+          onChange={handleChange}
+        />
+      </div>
+      <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}
+              disabled={!hasChanged}
+            >
+              Update
+            </Button>
+          </div>
         </div>
-      ) : null}
+      </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">
-          {status ? <span className="status-icon">{statusIcon}</span> : null}
-          {status ? <span className="status-message">{statusMessage}</span> : null}
-        </div>
-        <p className="tip">
-          <InfoTip tip={tip} />
+        <InputStatusInfo status={status} />
+        <p className="field-tip">
+          {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>
+  );
+}