update buttons and switches

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"

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;

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;

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;
   }
 

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;
     }
   }