Skip to content

Commit

Permalink
refactor: use local styles to prevent inconsistencies (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PupoSDC
PupoSDC authored Nov 25, 2023
1 parent dca72d5 commit c1b7932
Show file tree
Hide file tree
Showing 15 changed files with 149 additions and 162 deletions.
14 changes: 8 additions & 6 deletions apps/next-app/pages/_app.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 },
Expand All @@ -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} />
Expand Down
58 changes: 40 additions & 18 deletions apps/next-app/pages/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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> = ({
Expand All @@ -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(
Expand All @@ -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 ",
Expand All @@ -76,7 +99,6 @@ export const IndexPage: NextPage<IndexPageProps> = ({
"improve your knowledge... for free!",
].join("")}
/>

<Box
sx={{
display: "flex",
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -236,7 +258,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
})}
>
<NoSsr>
{activeTheme === "blue" && (
{activeTheme === "atpl" && (
<RightContainer container xs={6}>
<Typography
level="h3"
Expand Down Expand Up @@ -305,7 +327,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
</Grid>
</RightContainer>
)}
{activeTheme === "teal" && (
{activeTheme === "prep" && (
<RightContainer container xs={6}>
<Typography
level="h3"
Expand Down Expand Up @@ -344,7 +366,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
/>
</RightContainer>
)}
{activeTheme === "rose" && (
{activeTheme === "737" && (
<RightContainer container xs={6}>
<Typography
level="h3"
Expand Down
18 changes: 5 additions & 13 deletions apps/next-app/pages/modules/prep/flashcards/[collectionId]/[seed].page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -93,7 +85,7 @@ const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
</Card>,
])}
</FlashcardTinder>
</LayoutPublic>
</LayoutModulePrep>
);
};

Expand Down
14 changes: 5 additions & 9 deletions apps/next-app/pages/modules/prep/flashcards/[collectionId]/index.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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"
Expand All @@ -57,7 +53,7 @@ const FlashcardsThemePage: NextPage<FlashcardsThemePageProps> = ({
</Grid>
))}
</Grid>
</LayoutPublic>
</LayoutModulePrep>
);
};

Expand Down
14 changes: 4 additions & 10 deletions apps/next-app/pages/modules/prep/flashcards/index.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useEffect } from "react";
import { default as Image } from "next/image";
import {
Button,
Expand All @@ -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,
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -126,7 +120,7 @@ const QuestionsIndexPage: NextPage<flashcardsIndexPageProps> = ({
</Grid>
))}
</Grid>
</LayoutPublic>
</LayoutModulePrep>
);
};

Expand Down
11 changes: 3 additions & 8 deletions libs/react/components/src/sidebar/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -145,10 +144,6 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
borderLeftColor: "var(--joy-palette-primary-plainColor)",
bgcolor: "transparent",
},

"&.toggle-button": {
borderBottom: 0,
},
},

["& .chevron"]: {
Expand All @@ -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"
Expand Down
19 changes: 19 additions & 0 deletions libs/react/components/src/theme/get-global-color-scheme.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
},
});
3 changes: 1 addition & 2 deletions libs/react/components/src/theme/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Loading

1 comment on commit c1b7932

@vercel
Copy link

@vercel vercel bot commented on c1b7932 Nov 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chair-flight – ./

chair-flight-git-main-chair-flight-team.vercel.app
chair-flight.vercel.app
chair-flight.com
chair-flight-chair-flight-team.vercel.app
www.chair-flight.com

Please sign in to comment.