From b4471e99142da77633d801ed8ed369d46b77ee89 Mon Sep 17 00:00:00 2001
From: Mithi <mithi.sevilla@gmail.com>
Date: Mon, 27 Jul 2020 00:50:11 +0800
Subject: [PATCH] chore: Add label on switch and better opacity

---
 src/components/generic/SmallWidgets.js   | 3 ++-
 src/components/pages/LandingPage.js      | 2 +-
 src/components/pages/WalkingGaitsPage.js | 2 +-
 src/index.css                            | 3 ++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/generic/SmallWidgets.js b/src/components/generic/SmallWidgets.js
index c90f9ee..40186bc 100644
--- a/src/components/generic/SmallWidgets.js
+++ b/src/components/generic/SmallWidgets.js
@@ -12,9 +12,10 @@ const AlertBox = ({ info }) => (
 
 const ToggleSwitch = ({ id, value, handleChange, showValue }) => (
     <div className="switch-container">
-        <label className="switch" htmlFor={id}>
+        <label className="switch">
             <input id={id} type="checkbox" value={value} onChange={handleChange} />
             <span className="toggle-switch-widget round"></span>
+            <span style={{ opacity: 0 }}>{value}</span>
         </label>
         <label className="label">{showValue ? value : null}</label>
     </div>
diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
index 63268e8..4f8e347 100644
--- a/src/components/pages/LandingPage.js
+++ b/src/components/pages/LandingPage.js
@@ -13,7 +13,7 @@ class LandingPage extends React.Component {
                 <RandomRobotGif />
                 <h1>Mithi's Bare Minimum Hexapod Robot Simulator</h1>
                 <p>
-                    This page might <span className="red">feel slow</span> at first,
+                    This page might feel slow at first,
                     because it is also eagerly loading and mounting the 3d plot behind the
                     scenes! You can actually already navigate to any of the links below
                     right now (which I recommend), even if this page hasn't fully loaded
diff --git a/src/components/pages/WalkingGaitsPage.js b/src/components/pages/WalkingGaitsPage.js
index c957854..c380ca2 100644
--- a/src/components/pages/WalkingGaitsPage.js
+++ b/src/components/pages/WalkingGaitsPage.js
@@ -7,7 +7,7 @@ import { VirtualHexapod } from "../../hexapod"
 import { tRotZmatrix } from "../../hexapod/geometry"
 import { DEFAULT_GAIT_PARAMS } from "../../templates"
 
-const ANIMATION_DELAY = 100
+const ANIMATION_DELAY = 50
 
 const getPose = (sequences, i) => {
     return Object.keys(sequences).reduce((newSequences, legPosition) => {
diff --git a/src/index.css b/src/index.css
index b924493..b05cca9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,7 +6,7 @@
     --c2-pink: #fc427b;
     --c3-orange: #ff793f;
     --c4-blue: rgb(41, 128, 185);
-    --c6-red: #fc5c65;
+    --c6-red: #ff2121;
 }
 
 body,
@@ -191,6 +191,7 @@ tr:hover {
 
 .red {
     color: var(--c6-red);
+    font-weight: bolder;
 }
 
 .border {