rename status file for clarity; temp style fix for streamkey actions

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

@@ -64,23 +64,27 @@ export default function EditInstanceDetails() {
 
   return (
     <div className="edit-public-details-container">
-      <TextFieldWithSubmit
-        fieldName="streamKey"
-        {...TEXTFIELD_PROPS_STREAM_KEY}
-        value={formDataValues.streamKey}
-        initialValue={streamKey}
-        type={TEXTFIELD_TYPE_PASSWORD}
-        onChange={handleFieldChange}
-      />
-      <div>
-        <span style={{ fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em' }}>
+      <div className="field-container field-streamkey-container">
+        <div className="left-side">
+          <TextFieldWithSubmit
+            fieldName="streamKey"
+            {...TEXTFIELD_PROPS_STREAM_KEY}
+            value={formDataValues.streamKey}
+            initialValue={streamKey}
+            type={TEXTFIELD_TYPE_PASSWORD}
+            onChange={handleFieldChange}
+          />
+          <div className="streamkey-actions">
+            <Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
+              <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
+            </Tooltip>
+            <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
+          </div>
+        </div>
+        <div className="streamkey-notice">
           Save this key somewhere safe, you will need it to stream or login to the admin
           dashboard!
-        </span>
-        <Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
-          <Button type="primary" icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
-        </Tooltip>
-        <Button type="primary" icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
+        </div>
       </div>
       <TextFieldWithSubmit
         fieldName="ffmpegPath"

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

@@ -16,7 +16,7 @@ import { SocialHandle, UpdateArgs } from '../../../types/config-section';
 import { isValidUrl } from '../../../utils/urls';
 import TextField from './form-textfield';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 const { Title } = Typography;
 
@@ -229,7 +229,7 @@ export default function EditSocialLinks() {
       <Title level={2}>Social Links</Title>
       <p>Add all your social media handles and links to your other profiles here.</p>
 
-      <InputStatusInfo status={submitStatus} />
+      <FormStatusIndicator status={submitStatus} />
 
       <Table
         className="dataTable"
@@ -271,7 +271,7 @@ export default function EditSocialLinks() {
           value={modalDataState.url}
           onChange={handleUrlChange}
         />
-        <InputStatusInfo status={submitStatus} />
+        <FormStatusIndicator status={submitStatus} />
       </Modal>
       <br />
       <Button

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

@@ -17,7 +17,7 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import TextField from './form-textfield';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 const { Panel } = Collapse;
 
@@ -211,7 +211,7 @@ export default function EditStorage() {
         <Button type="primary" onClick={handleSave} disabled={!isSaveable}>
           Save
         </Button>
-        <InputStatusInfo status={submitStatus} />
+        <FormStatusIndicator status={submitStatus} />
       </div>
     </div>
   );

web/pages/components/config/form-status-indicator.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 
 import { StatusState } from '../../../utils/input-statuses';
 
-interface InputStatusInfoProps {
+interface FormStatusIndicatorProps {
   status: StatusState;
 }
-export default function InputStatusInfo({ status }: InputStatusInfoProps) {
+export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) {
   const { type, icon, message } = status || {};
   const classes = classNames({
     'status-container': true,

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

@@ -13,7 +13,7 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import { UpdateArgs } from '../../../types/config-section';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -124,7 +124,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
         <p className="label-spacer" />
         <div className="lower-content">
           <div className="field-tip">{tip}</div>
-          <InputStatusInfo status={status || submitStatus} />
+          <FormStatusIndicator status={status || submitStatus} />
           <div className="update-button-container">
             <Button
               type="primary"

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

@@ -4,7 +4,7 @@ import { Input, InputNumber } from 'antd';
 import { FieldUpdaterFunc } from '../../../types/config-section';
 // import InfoTip from '../info-tip';
 import { StatusState } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -143,7 +143,7 @@ export default function TextField(props: TextFieldProps) {
             value={value}
           />
         </div>
-        <InputStatusInfo status={status} />
+        <FormStatusIndicator status={status} />
         <p className="field-tip">
           {tip}
           {/* <InfoTip tip={tip} /> */}

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

@@ -7,7 +7,7 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
@@ -76,7 +76,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
           {label} <InfoTip tip={tip} />
         </span>
       </div>
-      <InputStatusInfo status={submitStatus} />
+      <FormStatusIndicator status={submitStatus} />
     </div>
   );
 }