From 682ddf96c3e56035e51dc88dc8ccea7396fc3872 Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Sun, 14 Feb 2021 01:45:08 -0800
Subject: [PATCH] more cleanup

---
 web/components/config/edit-social-links.tsx           |  1 -
 web/components/config/edit-storage.tsx                | 10 ++++++----
 .../config/form-toggleswitch-with-submit.tsx          |  6 ++++--
 web/components/config/video-variants-table.tsx        |  1 -
 web/pages/config-server-details.tsx                   |  4 +---
 web/pages/config-storage.tsx                          |  4 +---
 web/styles/ant-overrides.scss                         | 11 +++++++++++
 web/styles/pages.scss                                 |  1 -
 8 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/web/components/config/edit-social-links.tsx b/web/components/config/edit-social-links.tsx
index 6e5a75e18..d93b24ddc 100644
--- a/web/components/config/edit-social-links.tsx
+++ b/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);
diff --git a/web/components/config/edit-storage.tsx b/web/components/config/edit-storage.tsx
index 3abb5e967..5c6e8f7d5 100644
--- a/web/components/config/edit-storage.tsx
+++ b/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">
diff --git a/web/components/config/form-toggleswitch-with-submit.tsx b/web/components/config/form-toggleswitch-with-submit.tsx
index 0ee264d13..1a05ad65b 100644
--- a/web/components/config/form-toggleswitch-with-submit.tsx
+++ b/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,
diff --git a/web/components/config/video-variants-table.tsx b/web/components/config/video-variants-table.tsx
index d8e1a2a11..366908847 100644
--- a/web/components/config/video-variants-table.tsx
+++ b/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);
diff --git a/web/pages/config-server-details.tsx b/web/pages/config-server-details.tsx
index 7592a8c3a..6333c7292 100644
--- a/web/pages/config-server-details.tsx
+++ b/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>
-        Server Settings
-      </Title>
+      <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.
diff --git a/web/pages/config-storage.tsx b/web/pages/config-storage.tsx
index 8d5a7c2f3..958115040 100644
--- a/web/pages/config-storage.tsx
+++ b/web/pages/config-storage.tsx
@@ -7,9 +7,7 @@ const { Title } = Typography;
 export default function ConfigStorageInfo() {
   return (
     <>
-      <Title>
-        Storage
-      </Title>
+      <Title>Storage</Title>
       <p className="description">
         Owncast supports optionally using external storage providers to distribute your video. Learn
         more about this by visiting our{' '}
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 5ccaeae08..3ca671b00 100644
--- a/web/styles/ant-overrides.scss
+++ b/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);
diff --git a/web/styles/pages.scss b/web/styles/pages.scss
index 6481f0458..c97abd0a3 100644
--- a/web/styles/pages.scss
+++ b/web/styles/pages.scss
@@ -2,7 +2,6 @@
 
 
 .help-page {
-
   .ant-result-image {
     height: 100px;
     svg {