chore: Add label on switch and better opacity

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>

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

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) => {

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 {