fix: show correct settings and apply them to periods

Author: debater-coder

apps/client/src/routes/Main/Home/Period.tsx

@@ -10,6 +10,7 @@ import {
 } from "@chakra-ui/react";
 import { DateTime } from "luxon";
 import { TimetablPeriod } from "../../../services/sbhsApi/schemas";
+import { useSettingsStore } from "../../../stores/settings";
 
 export default function Period({
   name,
@@ -38,6 +39,13 @@ export default function Period({
 
   const fadedOut = useColorModeValue("blackAlpha.700", "whiteAlpha.700");
 
+  const periodColours = useSettingsStore((state) => state.periodColours);
+  const periodColorCode = {
+    primary: !isBreak ? "primary.500" : undefined,
+    default: colour,
+    none: "transparent",
+  }[periodColours];
+
   return (
     <Skeleton
       display="flex"
@@ -64,7 +72,9 @@ export default function Period({
         w="full"
         overflowX={"hidden"}
       >
-        <Box w={2} minW={2} rounded={"lg"} bg={`${colour}`} />
+        {periodColours !== "none" && (
+          <Box w={2} minW={2} rounded={"lg"} bg={periodColorCode} />
+        )}
         <Flex w="full" py={1.5} px={2} align="center" gap={2}>
           <Text
             fontSize={isBreak ? "xs" : "sm"}

apps/client/src/routes/Main/Home/QuickLinks.tsx

@@ -36,7 +36,7 @@ export default function QuickLinks() {
           Canvas
         </QuickLink>
         <QuickLink to="https://student.sbhs.net.au/" icon={<GraduationCap />}>
-          Student Portal
+          Portal
         </QuickLink>
         <QuickLink
           to="https://mail.google.com/a/student.sbhs.nsw.edu.au"

apps/client/src/routes/Main/Settings/General.tsx

@@ -95,14 +95,8 @@ export default function General() {
   const {
     primary,
     periodColours,
-    expanded,
-    hoverExpand,
-    showTimesInsteadOfRooms,
     setPrimary,
-    setExpanded,
     setPeriodColours,
-    setHoverExpand,
-    setShowTimesInsteadOfRooms,
     reset,
     bgImage,
     setBgImage,
@@ -115,7 +109,7 @@ export default function General() {
   return (
     <>
       <Heading size={"md"} fontFamily={"Poppins, sans-serif"}>
-        Colours
+        Appearance
       </Heading>
       <FormControl display="flex" alignItems="center">
         <FormLabel mb="0">Dark mode</FormLabel>
@@ -135,38 +129,7 @@ export default function General() {
           </VStack>
         </RadioGroup>
       </FormControl>
-      <Heading size={"md"} fontFamily={"Poppins, sans-serif"}>
-        Period Behaviour
-      </Heading>
-      <FormControl display="flex" alignItems="center">
-        <FormLabel mb="0">Expand periods by default</FormLabel>
-        <Switch
-          onChange={() => {
-            if (expanded) setHoverExpand(false);
-            setExpanded(!expanded);
-          }}
-          isChecked={expanded}
-        />
-      </FormControl>
-      <FormControl display="flex" alignItems="center">
-        <FormLabel mb="0">Hover to expand</FormLabel>
-        <Switch
-          isChecked={hoverExpand}
-          onChange={() => {
-            setHoverExpand(!hoverExpand);
-          }}
-          disabled={expanded}
-        />
-      </FormControl>
-      <FormControl display="flex" alignItems="center">
-        <FormLabel mb="0">Show times instead of rooms</FormLabel>
-        <Switch
-          isChecked={showTimesInsteadOfRooms}
-          onChange={() => {
-            setShowTimesInsteadOfRooms(!showTimesInsteadOfRooms);
-          }}
-        />
-      </FormControl>
+
       <FormControl display="flex" alignItems="center">
         <FormLabel mb="0">Background Image</FormLabel>
         <Input

apps/client/src/stores/settings/settings.ts

@@ -4,31 +4,22 @@ import { ColourScheme } from "../../theme";
 
 export type Actions = {
   setPrimary: (primary: ColourScheme) => void;
-  setExpanded: (expanded: boolean) => void;
   setPeriodColours: (periodColours: "default" | "primary" | "none") => void;
-  setHoverExpand: (hoverExpande: boolean) => void;
-  setShowTimesInsteadOfRooms: (showTimesInsteadOfRooms: boolean) => void;
   reset: () => void;
   setBgImage: (bgImage: string) => void;
   setDarkenBlur: (darkenBlur: boolean) => void;
 };
 
 export type SettingsState = {
   primary: ColourScheme;
-  expanded: boolean;
   periodColours: "default" | "primary" | "none";
-  hoverExpand: boolean;
-  showTimesInsteadOfRooms: boolean;
   bgImage: string;
   darkenBlur: boolean;
 };
 
 export const initialState: SettingsState = {
   primary: "blue",
-  expanded: false,
   periodColours: "default",
-  hoverExpand: false,
-  showTimesInsteadOfRooms: false,
   bgImage: "",
   darkenBlur: true,
 };
@@ -39,11 +30,7 @@ export const useSettingsStore = create<SettingsState & Actions>()(
       (set): SettingsState & Actions => ({
         ...initialState,
         setPrimary: (primary) => set({ primary }),
-        setExpanded: (expanded) => set({ expanded }),
         setPeriodColours: (periodColours) => set({ periodColours }),
-        setHoverExpand: (hoverExpand) => set({ hoverExpand }),
-        setShowTimesInsteadOfRooms: (showTimesInsteadOfRooms) =>
-          set({ showTimesInsteadOfRooms }),
         setBgImage: (bgImage) => set({ bgImage }),
         setDarkenBlur: (darkenBlur) => set({ darkenBlur }),
         reset: () => set(initialState),