Fix toggle css

Author: amberstarlight

packages/ui/src/App.tsx

@@ -44,18 +44,6 @@ const EnvBanner = styled.div`
   justify-content: center;
 `;
 
-const Footer = styled.footer`
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  min-height: 25vh;
-  background-color: #444;
-
-  > * {
-    max-width: 64em;
-  }
-`;
-
 const backend = import.meta.env.VITE_API_URL ?? "";
 
 function App() {
@@ -158,7 +146,6 @@ function App() {
           <Settings backend={backend} />
         </Route>
       </Wrapper>
-      <Footer></Footer>
     </ThemeProvider>
   );
 }

packages/ui/src/components/DeviceSettings/generator.tsx

@@ -10,7 +10,7 @@ import {
   rgbToHex,
   updateDeviceState,
 } from "../../utils/deviceUtilities";
-import { numericTransformer } from "../../utils/transformers";
+import { numericTransformer, readableNames } from "../../utils/transformers";
 import Toggle from "../Toggle/Toggle";
 import ColorPicker from "../ColorPicker/ColorPicker";
 
@@ -31,6 +31,7 @@ export const deviceSettingsGenerator = (
         settingComponentsArray.push(
           <Toggle
             key={feature.name}
+            label={readableNames[feature.name]}
             checked={mqttStateToBoolean(deviceSettingsState[feature.name])}
             onChange={(event) => {
               const newMqttState = booleanToMqttState(event.target.checked);

packages/ui/src/components/EditableText/EditableText.tsx

@@ -16,7 +16,14 @@ const StyledEditable = styled.input`
   margin-bottom: 1em;
   padding: 10px 0px;
   width: auto;
-  max-width: 50%;
+
+  @media only screen and (max-width: 500px) {
+    max-width: 100%;
+  }
+
+  @media only screen and (min-width: 768px) {
+    max-width: 75%;
+  }
 
   text-align: left;
 

packages/ui/src/components/Slider/Slider.tsx

@@ -5,7 +5,14 @@ import styled from "styled-components";
 
 const SliderContainer = styled.label`
   display: grid;
-  grid-template-columns: [setting-name] 15% [slider] 75% [value] 10%;
+
+  @media only screen and (max-width: 500px) {
+    grid-template-columns: [setting-name] 25% [slider] 50% [value] 25%;
+  }
+
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: [setting-name] 15% [slider] 75% [value] 10%;
+  }
 
   span,
   output {

packages/ui/src/components/Toggle/Toggle.tsx

@@ -3,40 +3,41 @@
 
 import styled from "styled-components";
 
-const Switch = styled.label`
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
+const ToggleContainer = styled.label`
+  display: grid;
+  grid-template-columns: [setting-name] 15% [value] 0% auto;
+  align-items: center;
 
   input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+    visibility: hidden;
+    justify-self: baseline;
   }
 `;
 
 const Slider = styled.span`
-  position: absolute;
+  --toggle-width: 60px;
+  --toggle-height: 34px;
+  --slider-width: 26px;
+  --slider-height: 26px;
+
+  position: relative;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
   cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   background-color: ${({ theme }) => theme.shadow};
   transition: 0.4s;
-  border-radius: 1em;
+  border-radius: 0.5em;
 
   &:before {
-    position: absolute;
+    display: block;
+    position: relative;
     content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
+    margin: calc((var(--toggle-height) - var(--slider-height)) / 2);
+    height: var(--slider-height);
+    width: var(--slider-width);
     background-color: ${({ theme }) => theme.background};
     transition: 0.4s;
-    border-radius: 50%;
+    border-radius: 25%;
   }
 
   input:checked + && {
@@ -54,15 +55,15 @@ function Toggle(props: {
   onChange: Function;
 }) {
   return (
-    <Switch>
-      {props.label}
+    <ToggleContainer>
+      <span>{props.label}</span>
       <input
         type={"checkbox"}
         checked={props.checked}
         onChange={props.onChange}
       />
       <Slider></Slider>
-    </Switch>
+    </ToggleContainer>
   );
 }
 

packages/ui/src/utils/transformers.tsx

@@ -77,3 +77,7 @@ export const numericTransformer = (
 
   return componentsArray;
 };
+
+export const readableNames = {
+  state: "Power",
+};