PupoSDC · PupoSDC · Nov 25, 2023 · Nov 25, 2023 · Nov 25, 2023
diff --git a/apps/next-app/pages/_app.page.tsx b/apps/next-app/pages/_app.page.tsx
@@ -7,7 +7,6 @@ import { AnalyticsProvider } from "@chair-flight/react/analytics";
 import { StopResizeAnimation } from "@chair-flight/react/components";
 import { theme } from "@chair-flight/react/containers";
 import { trpc } from "@chair-flight/trpc/client";
-import type { DefaultColorScheme } from "@mui/joy/styles/types";
 import type { AppProps } from "next/app";
 import type { FunctionComponent } from "react";
 import "@fontsource/public-sans";
@@ -16,6 +15,13 @@ if (typeof document === "undefined") {
   React.useLayoutEffect = React.useEffect;
 }
 
+if (typeof document !== "undefined") {
+  // temporary fix to rollback the custom scheme colors.
+  // remove me if you are reading this in 2024
+  localStorage.setItem("joy-color-scheme-light", "light");
+  localStorage.setItem("joy-color-scheme-dark", "dark");
+}
+
 const DynamicToaster = dynamic(
   () => import("@chair-flight/react/components").then((m) => m.Toaster),
   { loading: () => null, ssr: false },
@@ -34,11 +40,7 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
         <Head>
           <title>Welcome to chair-flight!</title>
         </Head>
-        <CssVarsProvider
-          defaultMode="light"
-          defaultColorScheme={"lightBlue" as DefaultColorScheme}
-          theme={theme}
-        >
+        <CssVarsProvider defaultMode="light" theme={theme}>
           <CssBaseline />
           <StopResizeAnimation />
           <Component {...pageProps} />

diff --git a/apps/next-app/pages/index.page.tsx b/apps/next-app/pages/index.page.tsx
@@ -5,20 +5,28 @@ import { default as AirplaneTicketIcon } from "@mui/icons-material/AirplaneTicke
 import { default as ChevronRightIcon } from "@mui/icons-material/ChevronRight";
 import { default as FlightTakeoffIcon } from "@mui/icons-material/FlightTakeoff";
 import { default as StyleIcon } from "@mui/icons-material/Style";
-import { Box, styled, Grid, Typography, Button, Link, Divider } from "@mui/joy";
+import {
+  Box,
+  styled,
+  Grid,
+  Typography,
+  Button,
+  Link,
+  Divider,
+  GlobalStyles,
+} from "@mui/joy";
 import {
   CoolSlidingThing,
   CountUp,
   ModuleSelectionButton,
   Typical,
-  useThemeSwitcher,
+  getGlobalColorScheme,
 } from "@chair-flight/react/components";
 import { AppHead, LayoutPublic } from "@chair-flight/react/containers";
 import {
   getTrpcHelper,
   preloadContentForStaticRender,
 } from "@chair-flight/trpc/server";
-import type { ThemeColor } from "@chair-flight/react/components";
 import type { GetStaticProps, NextPage } from "next";
 
 const fadeIn = keyframes`
@@ -37,12 +45,14 @@ const RightContainer = styled(Grid)`
   }
 `;
 
-export type IndexPageProps = {
+type IndexPageProps = {
   numberOfAtplQuestions: number;
   numberOf737Questions: number;
   numberOfFlashcards: number;
 };
 
+type Theme = "737" | "atpl" | "prep";
+
 const MEDIA_LONG_SCREEN = "@media (min-height: 560px) and (min-width: 440px)";
 
 export const IndexPage: NextPage<IndexPageProps> = ({
@@ -51,11 +61,9 @@ export const IndexPage: NextPage<IndexPageProps> = ({
   numberOf737Questions,
 }) => {
   const rightSideContainer = useRef<HTMLDivElement>(null);
-  const [activeTheme, setActiveTheme] = useState<ThemeColor | undefined>();
-  const [, setCurrentTheme] = useThemeSwitcher();
+  const [activeTheme, setActiveTheme] = useState<Theme | undefined>();
 
-  const goToTheme = (theme: ThemeColor) => {
-    setCurrentTheme(theme);
+  const goToTheme = (theme: Theme) => {
     setActiveTheme(theme);
     const top = rightSideContainer.current?.offsetTop ?? 0;
     setTimeout(
@@ -68,6 +76,21 @@ export const IndexPage: NextPage<IndexPageProps> = ({
 
   return (
     <LayoutPublic fixedHeight noPadding background={<CoolSlidingThing />}>
+      <GlobalStyles
+        styles={(t) => {
+          const palette = t.colorSchemes.light.palette;
+          switch (activeTheme) {
+            case "737":
+              return getGlobalColorScheme(palette.primaryRose);
+            case "prep":
+              return getGlobalColorScheme(palette.primaryTeal);
+            case "atpl":
+              return getGlobalColorScheme(palette.primaryBlue);
+            default:
+              return getGlobalColorScheme(palette.primaryBlue);
+          }
+        }}
+      />
       <AppHead
         linkDescription={[
           "Chair Flight is a community driven Aviation Question Bank built by ",
@@ -76,7 +99,6 @@ export const IndexPage: NextPage<IndexPageProps> = ({
           "improve your knowledge... for free!",
         ].join("")}
       />
-
       <Box
         sx={{
           display: "flex",
@@ -166,9 +188,9 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 "Explore questions, learning objectives, and theory reviews ",
                 "from the EASA QB ATPL exams.",
               ].join("")}
-              active={activeTheme === "blue"}
+              active={activeTheme === "atpl"}
               icon={<AirplaneTicketIcon />}
-              onClick={() => goToTheme("blue")}
+              onClick={() => goToTheme("atpl")}
               showMoreHref="/modules/atpl"
             />
             <ModuleSelectionButton
@@ -180,23 +202,23 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 "Use our flash cards to practice answering open ended ",
                 "questions and secure your first job.",
               ].join("")}
-              active={activeTheme === "teal"}
+              active={activeTheme === "prep"}
               icon={<StyleIcon />}
-              onClick={() => goToTheme("teal")}
+              onClick={() => goToTheme("prep")}
               showMoreHref="/modules/prep"
             />
             <ModuleSelectionButton
               fullWidth
               sx={{ mb: { xs: 1, md: 2 } }}
               color={"rose"}
               title={"737 Type rating"}
-              active={activeTheme === "rose"}
+              active={activeTheme === "737"}
               description={[
                 `Prepare or review your theory knowledge for a type rating `,
                 `on the Boeing 737 with ${numberOf737Questions} questions.`,
               ].join("")}
               icon={<FlightTakeoffIcon />}
-              onClick={() => goToTheme("rose")}
+              onClick={() => goToTheme("737")}
               showMoreHref="/modules/737"
             />
           </Box>
@@ -236,7 +258,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
           })}
         >
           <NoSsr>
-            {activeTheme === "blue" && (
+            {activeTheme === "atpl" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"
@@ -305,7 +327,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 </Grid>
               </RightContainer>
             )}
-            {activeTheme === "teal" && (
+            {activeTheme === "prep" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"
@@ -344,7 +366,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 />
               </RightContainer>
             )}
-            {activeTheme === "rose" && (
+            {activeTheme === "737" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"

diff --git a/apps/next-app/pages/modules/prep/flashcards/[collectionId]/[seed].page.tsx b/apps/next-app/pages/modules/prep/flashcards/[collectionId]/[seed].page.tsx
@@ -1,12 +1,8 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Button, Card, Link, Typography } from "@mui/joy";
 import { getRandomId, getRandomShuffler } from "@chair-flight/core/app";
-import {
-  Flashcard,
-  FlashcardTinder,
-  useThemeSwitcher,
-} from "@chair-flight/react/components";
-import { AppHead, LayoutPublic } from "@chair-flight/react/containers";
+import { Flashcard, FlashcardTinder } from "@chair-flight/react/components";
+import { AppHead, LayoutModulePrep } from "@chair-flight/react/containers";
 import { ssrHandler } from "@chair-flight/trpc/server";
 import type { FlashcardContent } from "@chair-flight/base/types";
 import type { NextPage } from "next";
@@ -42,12 +38,8 @@ const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
   collectionId,
   seed,
 }) => {
-  const [, setCurrentTheme] = useThemeSwitcher();
-
-  useEffect(() => setCurrentTheme("teal"), [setCurrentTheme]);
-
   return (
-    <LayoutPublic noPadding fixedHeight>
+    <LayoutModulePrep noPadding fixedHeight>
       <AppHead
         title="Chair Flight - Flash Cards"
         linkTitle="Chair Flight - Flash Cards"
@@ -93,7 +85,7 @@ const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
             </Card>,
           ])}
       </FlashcardTinder>
-    </LayoutPublic>
+    </LayoutModulePrep>
   );
 };
 

diff --git a/apps/next-app/pages/modules/prep/flashcards/[collectionId]/index.page.tsx b/apps/next-app/pages/modules/prep/flashcards/[collectionId]/index.page.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Grid } from "@mui/joy";
-import { Flashcard, useThemeSwitcher } from "@chair-flight/react/components";
-import { AppHead, LayoutPublic } from "@chair-flight/react/containers";
+import { Flashcard } from "@chair-flight/react/components";
+import { AppHead, LayoutModulePrep } from "@chair-flight/react/containers";
 import {
   getTrpcHelper,
   preloadContentForStaticRender,
@@ -31,12 +31,8 @@ const FlashcardWithOwnControl: FunctionComponent<FlashcardContent> = (
 const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
   flashcards,
 }) => {
-  const [, setCurrentTheme] = useThemeSwitcher();
-
-  useEffect(() => setCurrentTheme("teal"), [setCurrentTheme]);
-
   return (
-    <LayoutPublic noPadding>
+    <LayoutModulePrep noPadding>
       <AppHead
         title="Chair Flight - Flash Cards"
         linkTitle="Chair Flight - Flash Cards"
@@ -57,7 +53,7 @@ const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
           </Grid>
         ))}
       </Grid>
-    </LayoutPublic>
+    </LayoutModulePrep>
   );
 };
 

diff --git a/apps/next-app/pages/modules/prep/flashcards/index.page.tsx b/apps/next-app/pages/modules/prep/flashcards/index.page.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { default as Image } from "next/image";
 import {
   Button,
@@ -10,8 +9,7 @@ import {
   CardCover,
   Box,
 } from "@mui/joy";
-import { useThemeSwitcher } from "@chair-flight/react/components";
-import { AppHead, LayoutPublic } from "@chair-flight/react/containers";
+import { AppHead, LayoutModulePrep } from "@chair-flight/react/containers";
 import {
   getTrpcHelper,
   preloadContentForStaticRender,
@@ -29,12 +27,8 @@ type flashcardsIndexPageProps = {
 const QuestionsIndexPage: NextPage<flashcardsIndexPageProps> = ({
   flashcardCollections,
 }) => {
-  const [, setCurrentTheme] = useThemeSwitcher();
-
-  useEffect(() => setCurrentTheme("teal"), [setCurrentTheme]);
-
   return (
-    <LayoutPublic noPadding>
+    <LayoutModulePrep noPadding>
       <AppHead
         title="Chair Flight - Flash Cards"
         linkTitle="Chair Flight - Flash Cards"
@@ -62,7 +56,7 @@ const QuestionsIndexPage: NextPage<flashcardsIndexPageProps> = ({
             Once you are satisfied with the answer, Flip the card to see if you
             are close enough.
           </Typography>
-          <Typography sx={{ mt: 3 }} level="h3" color="primary">
+          <Typography level="h3" sx={{ mt: 3, color: "primary.500" }}>
             Have fun!
           </Typography>
         </Grid>
@@ -126,7 +120,7 @@ const QuestionsIndexPage: NextPage<flashcardsIndexPageProps> = ({
           </Grid>
         ))}
       </Grid>
-    </LayoutPublic>
+    </LayoutModulePrep>
   );
 };
 

diff --git a/libs/react/components/src/sidebar/sidebar.tsx b/libs/react/components/src/sidebar/sidebar.tsx
@@ -128,9 +128,8 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                 borderTop: 0,
               },
 
-              // TODO fix this, should be a sibling selector
-              "&": {
-                borderBottom: 0,
+              "& + .filler": {
+                borderBottom: "1px",
               },
 
               "&:hover": {
@@ -145,10 +144,6 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                 borderLeftColor: "var(--joy-palette-primary-plainColor)",
                 bgcolor: "transparent",
               },
-
-              "&.toggle-button": {
-                borderBottom: 0,
-              },
             },
 
             ["& .chevron"]: {
@@ -165,7 +160,7 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
         >
           <List onClick={() => isMobileOpen && setMobileOpen(false)}>
             {children.filter((c) => !c.props.bottom)}
-            <Box sx={{ flex: 1 }} />
+            <Box sx={{ flex: 1 }} className="filler" />
             {children.filter((c) => c.props.bottom)}
             <ListItemButton
               variant="outlined"

diff --git a/libs/react/components/src/theme/get-global-color-scheme.ts b/libs/react/components/src/theme/get-global-color-scheme.ts
@@ -0,0 +1,19 @@
+import type { DefaultPaletteRange } from "@mui/joy/styles/types";
+
+export const getGlobalColorScheme = (palette: DefaultPaletteRange) => ({
+  '[data-joy-color-scheme="dark"], [data-joy-color-scheme="light"]': {
+    "--joy-palette-primary-50": palette[50],
+    "--joy-palette-primary-100": palette[100],
+    "--joy-palette-primary-200": palette[200],
+    "--joy-palette-primary-300": palette[300],
+    "--joy-palette-primary-400": palette[400],
+    "--joy-palette-primary-500": palette[500],
+    "--joy-palette-primary-600": palette[600],
+    "--joy-palette-primary-700": palette[700],
+    "--joy-palette-primary-800": palette[800],
+    "--joy-palette-primary-900": palette[900],
+    "--joy-palette-primary-mainChannel": palette.mainChannel,
+    "--joy-palette-primary-darkChannel": palette.darkChannel,
+    "--joy-palette-primary-lightChannel": palette.lightChannel,
+  },
+});
diff --git a/libs/react/components/src/theme/index.ts b/libs/react/components/src/theme/index.ts
@@ -1,4 +1,3 @@
 export { theme } from "./theme";
-export { useThemeSwitcher } from "./useThemeSwitcher";
+export { getGlobalColorScheme } from "./get-global-color-scheme";
 export { StopResizeAnimation } from "./stop-resize-animation";
-export type { ThemeColor } from "./useThemeSwitcher";