Update theming

packages/ui/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*.woff*

packages/ui/src/App.tsx

@@ -7,7 +7,7 @@ import { Link, Route } from "wouter";
 import styled, { ThemeProvider } from "styled-components";
 import { GlobalStyles } from "./components/GlobalStyles/globalStyles";
 import { useDarkMode } from "./components/UseDarkMode/useDarkMode";
-import { StyledText, lightTheme, darkTheme } from "./utils/theme";
+import { StyledText, themeColours, darkThemeColours } from "./utils/theme";
 
 import Devices from "./pages/Devices/Devices";
 import Settings from "./pages/Settings/Settings";
@@ -36,7 +36,7 @@ function App() {
   const [groups, setGroups] = useState();
   const [theme] = useDarkMode();
 
-  const themeMode = theme === "light" ? lightTheme : darkTheme;
+  const themeMode = theme === "light" ? themeColours : darkThemeColours;
 
   useEffect(() => {
     fetch(`${backend}/api/devices`)

packages/ui/src/components/Button/Button.tsx

@@ -4,21 +4,24 @@
 import styled from "styled-components";
 
 const StyledButton = styled.button`
+  font-family: "Lilex Medium", monospace;
+  border: none;
+  padding: 0.75em 2em;
+  background: none;
+
   display: inline-block;
-  padding: 0.75rem 2rem;
   margin: 0.5rem;
-  min-width: 5rem;
-  color: ${({ theme }) => theme.text};
-  border-radius: 2rem;
-  border: 1px solid ${(props) => props.theme.text};
-  font-family: "rubikregular", sans-serif;
+  color: ${({ theme }) => theme.accent};
+  border-radius: 0.25rem;
+  border: 1px solid ${(props) => props.theme.accent};
   background: transparent;
   text-align: center;
   transition: background 0.4s;
 
   &:hover {
     cursor: pointer;
-    background-color: ${({ theme }) => theme.hover};
+    background-color: ${({ theme }) => theme.accent};
+    color: ${(props) => props.theme.background};
   }
 `;
 

packages/ui/src/components/DeviceCard/DeviceCard.tsx

@@ -20,13 +20,16 @@ const Card = styled.div`
   margin: 2em 0em;
   padding: 1em;
   cursor: pointer;
-  border-radius: 2rem;
 
   opacity: ${(props) => (props.$dimmed ? 1 : 0.5)};
 
   &:hover {
     background-color: ${({ theme }) => theme.hover};
   }
+
+  > *:visited {
+    border: none;
+  }
 `;
 
 function DeviceCard(props: {

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

@@ -66,6 +66,7 @@ function DeviceSettings(props) {
     <>
       <div>
         <EditableText
+          label={"Friendly Name"}
           text={deviceFriendlyNameState}
           onChange={(event) => {
             const newFriendlyName = event.target.value;

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

@@ -7,14 +7,16 @@ import styled from "styled-components";
 const StyledEditable = styled.input`
   background: transparent;
   border: none;
+  color: ${(props) => props.theme.text};
 
-  font-family: "rubikregular", sans-serif;
+  font-family: "Lilex Medium", monospace;
   font-size: 2em;
 
   height: 48px;
   margin-bottom: 1em;
   padding: 10px 0px;
   width: auto;
+  max-width: 50%;
 
   text-align: left;
 
@@ -33,7 +35,20 @@ const StyledEditable = styled.input`
   transition: all 0.15s ease;
 `;
 
+const StyledEditableLabel = styled.label`
+  display: flex;
+  flex-direction: column;
+  color: ${(props) => props.theme.text};
+
+  &:hover, &:has(input:read-write) {
+    color: ${(props) => props.theme.accent};
+  }
+
+  transition: all 0.15s ease;
+`;
+
 interface EditableTextProps {
+  label: string;
   text: string;
   onChange: Function;
   onEditFinish: Function;
@@ -53,13 +68,16 @@ function EditableText(props: EditableTextProps) {
   };
 
   return (
-    <StyledEditable
-      value={value}
-      onChange={props.onChange}
-      readOnly={!editable}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-    ></StyledEditable>
+    <StyledEditableLabel>
+      {props.label}
+      <StyledEditable
+        value={value}
+        onChange={props.onChange}
+        readOnly={!editable}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+      ></StyledEditable>
+    </StyledEditableLabel>
   );
 }
 

packages/ui/src/components/GlobalStyles/globalStyles.ts

@@ -5,18 +5,27 @@ import "../../font.css";
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyles = createGlobalStyle`
- html,
- body {
-  background: ${({ theme }) => theme.background};
-  color: ${({ theme }) => theme.text};
-  font: 16px 'rubikregular', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  height: 100vh;
-  width: 100%;
+  html,
+  body {
+    background: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.text};
 
-  transition: background 0.5s linear,
-              color 0.5s linear;
- }
+    font-family: "Lilex Regular", monospace;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    padding: 0;
+    margin: 0 auto;
+    height: 100vh;
+    width: 100%;
+    min-height: 100vb;
+    max-width: 64em;
+
+    transition: background 0.5s linear, color 0.5s linear;
+  }
+
+  h3 {
+    margin-bottom: 1.5em;
+  }
 `;

packages/ui/src/components/GroupCard/GroupCard.tsx

@@ -9,7 +9,6 @@ const Card = styled.div`
   margin: 2em 0em;
   padding: 1em;
   cursor: pointer;
-  border-radius: 2rem;
 
   &:hover {
     background-color: ${({ theme }) => theme.hover};

packages/ui/src/components/GroupSettings/GroupSettings.tsx

@@ -115,17 +115,12 @@ function GroupSettings(props) {
     <>
       <div>
         <EditableText
+          label="Friendly Name"
           text={groupFriendlyNameState}
           onChange={(event) => {
             const newFriendlyName = event.target.value;
             setGroupFriendlyNameState(newFriendlyName);
           }}
-          // onEditFinish={() => {
-          //   setGroupFriendlyName(
-          //     props.group.friendly_name,
-          //     groupFriendlyNameState,
-          //   );
-          // }}
         />
         <p>{`${props.group.members.length} devices`}</p>
       </div>

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

@@ -4,10 +4,20 @@
 import styled from "styled-components";
 
 const SliderContainer = styled.label`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1em;
+  display: grid;
+  grid-template-columns: [setting-name] 15% [slider] 75% [value] 10%;
+
+  span, output {
+    align-self: center;
+  }
+
+  input {
+    width: auto;
+  }
+
+  output {
+    justify-self: end;
+  }
 `;
 
 const StyledSlider = styled.input.attrs((props) => ({
@@ -26,11 +36,27 @@ const StyledSlider = styled.input.attrs((props) => ({
   transition: opacity 0.2s;
   margin: 3em 0em;
 
+  &::-moz-range-track {
+    background: transparent;
+    border: 0px;
+  }
+
   &::-webkit-slider-thumb {
     appearance: none;
     width: 2em;
     height: 2em;
     border-radius: 50%;
+    border: none;
+    background: ${({ theme }) => theme.accent};
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    appearance: none;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    border: none;
     background: ${({ theme }) => theme.accent};
     cursor: pointer;
   }
@@ -39,7 +65,7 @@ const StyledSlider = styled.input.attrs((props) => ({
 function Slider(props) {
   return (
     <SliderContainer>
-      {props.label}
+      <span>{props.label}</span>
       <StyledSlider
         min={props.min}
         max={props.max}

packages/ui/src/font.css

@@ -1,8 +1,17 @@
 @font-face {
-  font-family: "rubikregular";
+  font-family: "Lilex Medium";
   src:
-    url("font/rubik-regular-webfont.woff") format("woff2"),
-    url("font/rubik-regular-webfont.woff") format("woff");
+    url("font/lilex-medium-webfont.woff2") format("woff2"),
+    url("font/lilex-medium-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Lilex Regular";
+  src:
+    url("font/lilex-regular-webfont.woff2") format("woff2"),
+    url("font/lilex-regular-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

packages/ui/src/utils/theme.ts

@@ -3,30 +3,21 @@
 
 import styled from "styled-components";
 
-const colours = {
-  platinum: "#E7E5E5",
-  violet: "#6F73D2",
-  deepGrey: "#18181B",
-  midGrey: "#3C3C3C",
-  red: "#FD151B",
-  spaceBlue: "#2B3A67",
-};
-
-export const lightTheme = {
-  text: colours.deepGrey,
-  background: colours.platinum,
-  accent: colours.violet,
+export const themeColours = {
+  text: "rgb(21, 21, 21)",
+  background: "rgb(245, 249, 233)",
+  accent: "rgb(204, 40, 81)",
   shadow: "rgba(0, 0, 0, 0.25)",
   hover: "rgba(0, 0, 0, 0.05)",
-};
+}
 
-export const darkTheme = {
-  text: colours.platinum,
-  background: colours.deepGrey,
-  accent: colours.red,
+export const darkThemeColours = {
+  text: "rgb(208, 208, 208)",
+  background: "rgb(21, 21, 21)",
+  accent: "rgb(139, 114, 238)",
   shadow: "rgba(0, 0, 0, 0.5)",
   hover: "rgba(255, 255, 255, 0.05)",
-};
+}
 
 export const StyledText = styled.p`
   color: ${({ theme }) => theme.text};