From 5a6389a94ea2679e3fd4459b44c467ed881c966a Mon Sep 17 00:00:00 2001
From: Mark <hendriksen-mark@hotmail.com>
Date: Sat, 27 Apr 2024 00:16:29 +0200
Subject: [PATCH] update buttons and switches

---
 src/Pages/Bridge.jsx                          | 15 +++++----
 src/components/FlipSwitch/FlipSwitch.jsx      | 32 ++++++++++---------
 src/components/FlipSwitch/flipswitch.scss     |  6 ++--
 .../GenericButton/genericButton.scss          |  5 +--
 src/components/Wizard/wizard.scss             |  4 +--
 5 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/Pages/Bridge.jsx b/src/Pages/Bridge.jsx
index 725f84c..262318a 100644
--- a/src/Pages/Bridge.jsx
+++ b/src/Pages/Bridge.jsx
@@ -480,12 +480,15 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
       <GlassContainer options="spacer">
         <PageContent>
           <div className="headline">Bridge control</div>
-          <FlipSwitch
-            value={AdvanceConfig}
-            onChange={(e) => setAdvanceConfig(e)}
-            checked={AdvanceConfig}
-            label={`${AdvanceConfig ? "Hide" : "Show"} advanced config`}
-          />
+          <div className="form-control">
+            <GenericButton
+              value={`${AdvanceConfig ? "Hide" : "Show"} advanced config`}
+              color="blue"
+              size=""
+              type="submit"
+              onClick={() => setAdvanceConfig(!AdvanceConfig)}
+            />
+          </div>
           <div className="form-control">
             <GenericButton
               value="Force Config Dump"
diff --git a/src/components/FlipSwitch/FlipSwitch.jsx b/src/components/FlipSwitch/FlipSwitch.jsx
index 1ab71ab..127708b 100644
--- a/src/components/FlipSwitch/FlipSwitch.jsx
+++ b/src/components/FlipSwitch/FlipSwitch.jsx
@@ -1,19 +1,21 @@
 import "./flipswitch.scss";
 
-const FlipSwitch = ({ value, onChange, checked, defaultChecked, label }) => (
-    <div className="flipSwitch">
-      <p>{label}</p>
-      <label className="flipSwitchLabel">
-        <input
-          type="checkbox"
-          value={value}
-          onChange={(e) => onChange(e.target.checked)}
-          checked={checked}
-          defaultChecked={defaultChecked}
-        />
-        <span className="slider"></span>
-      </label>
-    </div>
-  );
+const FlipSwitch = ({ value, onChange, checked, defaultChecked, label }) => (<>
+  <div className="flipSwitch">
+    <p>{label}</p>
+  </div>
+  <div className="flipSwitch">
+    <label className="flipSwitchLabel">
+      <input
+        type="checkbox"
+        value={value}
+        onChange={(e) => onChange(e.target.checked)}
+        checked={checked}
+        defaultChecked={defaultChecked}
+      />
+      <span className="slider"></span>
+    </label>
+  </div>
+</>);
 
 export default FlipSwitch;
\ No newline at end of file
diff --git a/src/components/FlipSwitch/flipswitch.scss b/src/components/FlipSwitch/flipswitch.scss
index 968377f..762534f 100644
--- a/src/components/FlipSwitch/flipswitch.scss
+++ b/src/components/FlipSwitch/flipswitch.scss
@@ -1,10 +1,10 @@
 .flipSwitch {
   display: flex;
-  padding: 10px;
   align-items: center;
 
   p{
-    margin-right: 10px;
+    padding: 10px;
+    margin-top: 10px;
   }
 
   .flipSwitchLabel{
@@ -19,6 +19,8 @@
   }
 
   .slider {
+    margin-bottom: 10px;
+    margin-left: 10px;
     position: absolute;
     cursor: pointer;
     top: 0;
diff --git a/src/components/GenericButton/genericButton.scss b/src/components/GenericButton/genericButton.scss
index ba1a634..ee6ee10 100644
--- a/src/components/GenericButton/genericButton.scss
+++ b/src/components/GenericButton/genericButton.scss
@@ -1,6 +1,6 @@
 input.btn-block {
   background: rgba(52, 152, 219, 1);
-  padding: 20px 60px;
+  padding: 20px 0px;
   border-radius: 35px;
   color: #eee;
   font-size: 18px;
@@ -18,7 +18,8 @@ input.btn-block {
   }
 
   &.small{
-    padding: 20px 20px;
+    font-size: 14px;
+    padding: 10px;
     width: auto;
   }
 
diff --git a/src/components/Wizard/wizard.scss b/src/components/Wizard/wizard.scss
index 0e37b83..843a50a 100644
--- a/src/components/Wizard/wizard.scss
+++ b/src/components/Wizard/wizard.scss
@@ -16,7 +16,7 @@
   .header {
     display: flex;
     font-size: 20px;
-    color: #fff;
+    color: #ccc;
 
     .headline {
       flex: 1 1 auto;
@@ -42,7 +42,7 @@
 
   .wizardContent {
     p {
-      color: #ccc;
+      color: #fff;
       margin-top: 5px;
     }
   }