more cleanup

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

@@ -196,7 +196,6 @@ export default function EditSocialLinks() {
         return (
           <div className="actions">
             <Button
-              type="primary"
               size="small"
               onClick={() => {
                 setEditId(index);

web/components/config/edit-storage.tsx

@@ -21,6 +21,7 @@ import {
 import TextField from './form-textfield';
 import FormStatusIndicator from './form-status-indicator';
 import { isValidUrl } from '../../utils/urls';
+import ToggleSwitch from './form-toggleswitch-with-submit';
 // import ToggleSwitch from './form-toggleswitch-with-submit';
 
 const { Panel } = Collapse;
@@ -145,20 +146,21 @@ export default function EditStorage() {
   return (
     <div className={containerClass}>
       <div className="enable-switch">
-        {/* <ToggleSwitch
+        <ToggleSwitch
+          apiPath=""
           fieldName="enabled"
           label="Storage Enabled"
           checked={formDataValues.enabled}
           onChange={handleSwitchChange}
-        /> */}
+        />
-        <Switch
+        {/* <Switch
           checked={formDataValues.enabled}
           defaultChecked={formDataValues.enabled}
           onChange={handleSwitchChange}
           checkedChildren="ON"
           unCheckedChildren="OFF"
         />{' '}
-        Enabled
+        Enabled */}
       </div>
 
       <div className="form-fields">

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

@@ -1,5 +1,6 @@
 // This is a wrapper for the Ant Switch component.
-// onChange of the switch, it will automatically post a change to the config api.
+// This one is styled to match the form-textfield component.
+// If `useSubmit` is true then it will automatically post to the config API onChange.
 
 import React, { useState, useContext } from 'react';
 import { Switch } from 'antd';
@@ -17,9 +18,9 @@ import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constan
 import { ServerStatusContext } from '../../utils/server-status-context';
 
 interface ToggleSwitchProps {
-  apiPath: string;
   fieldName: string;
 
+  apiPath?: string;
   checked?: boolean;
   configPath?: string;
   disabled?: boolean;
@@ -106,6 +107,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
 }
 
 ToggleSwitch.defaultProps = {
+  apiPath: '',
   checked: false,
   configPath: '',
   disabled: false,

web/components/config/video-variants-table.tsx

@@ -153,7 +153,6 @@ export default function CurrentVariantsTable() {
         return (
           <span className="actions">
             <Button
-              type="primary"
               size="small"
               onClick={() => {
                 setEditId(index);

web/pages/config-server-details.tsx

@@ -7,9 +7,7 @@ const { Title } = Typography;
 export default function ConfigServerDetails() {
   return (
     <div className="config-server-details-form">
-      <Title>
+      <Title>Server Settings</Title>
-        Server Settings
-      </Title>
       <p className="description">
         You should change your stream key from the default and keep it safe. For most people
         it&apos;s likely the other settings will not need to be changed.

web/pages/config-storage.tsx

@@ -7,9 +7,7 @@ const { Title } = Typography;
 export default function ConfigStorageInfo() {
   return (
     <>
-      <Title>
+      <Title>Storage</Title>
-        Storage
-      </Title>
       <p className="description">
         Owncast supports optionally using external storage providers to distribute your video. Learn
         more about this by visiting our{' '}

web/styles/ant-overrides.scss

@@ -253,6 +253,17 @@ textarea.ant-input {
 
 
 // ANT BUTTON
+.ant-btn {
+  background-color: var(--purple-dark);
+  border-color: var(--white-25);
+  color: var(--white-75);
+  &:hover,
+  &:focus {
+    background-color: var(--owncast-purple);
+    border-color: var(--owncast-purple);
+    color: var(--white);
+  }
+}
 .ant-btn-primary {
   background-color: var(--owncast-purple);
   border-color: var(--owncast-purple);

web/styles/pages.scss

@@ -2,7 +2,6 @@
 
 
 .help-page {
-
   .ant-result-image {
     height: 100px;
     svg {