Skip to content

Commit

Permalink
fix(client): drop multi color theme in favor of light and dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Ivo committed Apr 22, 2023
1 parent 12398cc commit f5bdc6a
Show file tree
Hide file tree
Showing 17 changed files with 172 additions and 502 deletions.
7 changes: 1 addition & 6 deletions apps/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,10 @@
"@next-auth/prisma-adapter": "^1.0.6",
"@prisma/client": "^4.13.0",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-radio-group": "^1.1.2",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-switch": "^1.0.2",
"@tailwindcss/forms": "^0.5.3",
"@tanstack/react-query": "^4.29.1",
"@tanstack/react-query-devtools": "^4.29.1",
"@types/react-transition-group": "^4.4.5",
"argon2": "^0.30.3",
"axios": "^1.3.4",
"clsx": "^1.2.1",
Expand All @@ -51,15 +48,14 @@
"rehype-pretty-code": "^0.9.4",
"sharp": "^0.31.3",
"shiki": "^0.14.1",
"tailwind-merge": "^1.10.0",
"tailwindcss-hero-patterns": "^0.1.2",
"unist-util-visit": "^4.1.2",
"zod": "^3.21.4"
},
"devDependencies": {
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.9",
"@types/react-transition-group": "^4.4.5",
"@typescript-eslint/eslint-plugin": "5.56.0",
"@typescript-eslint/parser": "5.56.0",
"autoprefixer": "^10.4.13",
Expand All @@ -79,7 +75,6 @@
"remark-breaks": "^3.0.2",
"remark-gfm": "^3.0.1",
"tailwindcss": "^3.3.1",
"tw-colors": "^1.1.6",
"typescript": "4.9.3"
}
}
2 changes: 1 addition & 1 deletion apps/client/src/components/Button/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const StatusButton: FC<ButtonProps> = ({
return (
<button
className={clsx(
`p-2 font-medium text-white font-inter items-center justify-center flex gap-x-1 transition-all disabled:opacity-60 disabled:cursor-not-allowed duration-500 rounded-md outline-none focus:ring-2 focus:ring-offset-2 ${className}`,
`p-2 font-medium text-white font-inter items-center justify-center flex gap-x-1 transition-all disabled:opacity-60 disabled:cursor-not-allowed duration-500 rounded-lg outline-none focus:ring-2 focus:ring-offset-2 ${className}`,
{
"bg-cyan-600/80 enabled:hover:bg-cyan-700 focus:ring-cyan-400 focus:ring-offset-cyan-400/20":
status === "running",
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Button/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const TextButton: FC<ButtonProps> = ({
}) => {
return (
<button
className={`p-2 font-bold font-inter items-center justify-center text-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:text-primary-600 transition-all duration-500 rounded-md outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
className={`p-2 font-medium font-inter items-center justify-center text-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:text-primary-600 transition-all duration-500 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
{...rest}
>
{LeftIcon ? <LeftIcon className={`h-4 w-4 ${iconClassName}`} /> : null}
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Button: FC<ButtonProps> = ({
}) => {
return (
<button
className={`p-2 font-bold text-white font-inter items-center justify-center bg-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:bg-primary-600 transition-all duration-500 rounded-md outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
className={`p-2 font-medium text-white font-inter items-center justify-center bg-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:bg-primary-600 transition-all duration-500 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
{...rest}
>
{LeftIcon ? <LeftIcon className={`h-4 w-4 ${iconClassName}`} /> : null}
Expand Down
21 changes: 11 additions & 10 deletions apps/client/src/components/Container/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,17 @@ export function Layout({ children }: ILayout) {

return (
<SidebarProvider>
<div
className={`flex h-screen bg-gray-50 dark:bg-gray-900 ${
isSidebarOpen && "overflow-hidden"
}`}
data-theme={theme}
>
<Sidebar />
<div className="flex flex-col flex-1 w-full">
<Header />
<Main>{children}</Main>
<div className={theme}>
<div
className={`flex h-screen bg-white dark:bg-gray-900 ${
isSidebarOpen && "overflow-hidden"
}`}
>
<Sidebar />
<div className="flex flex-col flex-1 w-full">
<Header />
<Main>{children}</Main>
</div>
</div>
</div>
</SidebarProvider>
Expand Down
19 changes: 9 additions & 10 deletions apps/client/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { useContext, useState } from "react";
import { Bell, LogIn, Menu, Search, UserPlus } from "lucide-react";
import { Bell, LogIn, Menu, Moon, Search, Sun, UserPlus } from "lucide-react";
import Link from "next/link";
import { useSession } from "next-auth/react";

import { SidebarContext } from "@app/context/SidebarContext";
import { useTheme } from "@app/context/ThemeContext";

import { Button } from "../Button";
import { TextButton } from "../Button/Text";
import { Input } from "../Input";
import { SelectTheme } from "../SelectTheme";
import { UserMenu } from "../UserMenu";

export function Header() {
const { status } = useSession();
const { toggleSidebar } = useContext(SidebarContext);

const { theme, toggleTheme } = useTheme();
const [isNotificationsMenuOpen, setIsNotificationsMenuOpen] = useState(false);

function handleNotificationsClick() {
Expand All @@ -36,7 +36,7 @@ export function Header() {
/>
</button>
{/* <!-- Search input --> */}
<div className="hidden lg:flex justify-center flex-1">
<div className="hidden lg:flex justify-center w-1/2 mx-auto">
<div className="relative flex-1 focus-within:text-primary-500 dark:focus-within:text-primary-100">
<div className="absolute inset-y-0 flex items-center pl-2">
<Search
Expand All @@ -51,14 +51,13 @@ export function Header() {
/>
</div>
</div>
<ul
className={`flex items-center flex-shrink-0 ${
status === "authenticated" ? "gap-x-6" : "gap-x-2"
}`}
>
<ul className="flex items-center flex-shrink-0 gap-x-6">
{/* <!-- Theme toggler --> */}
<li className="flex">
<SelectTheme />
<TextButton
LeftIcon={theme === "light" ? Moon : Sun}
onClick={toggleTheme}
/>
</li>
{status === "authenticated" ? (
<>
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Input/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
) : null}
<input
className={clsx(
`border border-primary-400/60 transition-all duration-500 px-2 py-1 h-10 outline-none file:transition-all file:duration-500 rounded-md bg-gray-100 dark:bg-gray-950 placeholder:text-zinc-400 file:bg-primary-500 file:text-gray-50 file:mr-2 file:py-1 file:px-2 file:h-full file:-ml-1 file:rounded-md file:border-0 file:text-sm file:font-semibold hover:file:bg-primary-600 focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`,
`border border-primary-400/60 transition-all duration-150 px-2 py-1 h-10 outline-none rounded-lg bg-gray-50 dark:bg-gray-900 placeholder:text-zinc-400 file:bg-primary-500 file:text-gray-50 file:mr-2 file:py-1 file:px-2 file:h-full file:-ml-1 file:rounded-md file:border-0 file:text-sm file:font-semibold hover:file:bg-primary-600 focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`,
{
"border-red-600/95 focus:ring-red-500": error
}
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/components/Select/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const Select = <T extends string>({
>
<RSelect.Trigger
className={clsx(
"flex justify-between transition-all duration-500 items-center rounded-md border border-primary-400/60 data-[placeholder]:text-zinc-400 bg-gray-100 dark:bg-gray-950 px-2 py-1 h-10 outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-zinc-200 dark:focus:ring-offset-gray-900",
"flex justify-between transition-all duration-150 items-center rounded-lg border border-primary-400/60 data-[placeholder]:text-zinc-400 bg-gray-50 dark:bg-gray-900 px-2 py-1 h-10 outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-zinc-200 dark:focus:ring-offset-gray-900",
{
"border-red-600/95 focus:ring-red-500": error
}
Expand All @@ -61,7 +61,7 @@ export const Select = <T extends string>({
</RSelect.Icon>
</RSelect.Trigger>
<RSelect.Content
className="p-2 z-40 w-[--radix-select-trigger-width] max-h-[16rem] bg-gray-100 dark:bg-gray-900 border border-primary-400/60 transition-all duration-500 rounded-md"
className="p-2 z-40 w-[--radix-select-trigger-width] max-h-[16rem] bg-gray-50 dark:bg-gray-900 border border-primary-400/60 transition-all duration-500 rounded-md"
position="popper"
sideOffset={5}
>
Expand Down
69 changes: 0 additions & 69 deletions apps/client/src/components/SelectTheme/index.tsx

This file was deleted.

29 changes: 17 additions & 12 deletions apps/client/src/context/ThemeContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import {
createContext,
ReactNode,
useContext,
useEffect,
useLayoutEffect,
useState
} from "react";
import { parseCookies, setCookie } from "nookies";

export type Theme = "amber" | "stone" | "green" | "indigo" | "violet" | "rose";
export type Theme = "light" | "dark";

interface ContextProps {
theme: Theme;
setTheme: (theme: Theme) => void;
toggleTheme: () => void;
}

interface ProviderProps {
Expand All @@ -21,9 +21,9 @@ interface ProviderProps {
const ThemeContext = createContext({} as ContextProps);

export function ThemeProvider({ children }: ProviderProps) {
const [theme, setTheme] = useState<Theme>("green");
const [theme, setTheme] = useState<Theme>("light");

useEffect(() => {
useLayoutEffect(() => {
const cookies = parseCookies();

const colorSchemeCookie = cookies["visualdynamics-color-scheme"];
Expand All @@ -32,16 +32,21 @@ export function ThemeProvider({ children }: ProviderProps) {
}
}, []);

function changeTheme(newTheme: Theme) {
setCookie(undefined, "visualdynamics-color-scheme", newTheme, {
path: "/",
maxAge: 60 * 60 * 24 * 31 * 12
});
setTheme(newTheme);
function toggleTheme() {
setCookie(
undefined,
"visualdynamics-color-scheme",
theme === "light" ? "dark" : "light",
{
path: "/",
maxAge: 60 * 60 * 24 * 31 * 12
}
);
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
}

return (
<ThemeContext.Provider value={{ setTheme: changeTheme, theme }}>
<ThemeContext.Provider value={{ toggleTheme, theme }}>
{children}
</ThemeContext.Provider>
);
Expand Down
63 changes: 63 additions & 0 deletions apps/client/src/hocs/withSSRGuest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
import { getServerSession } from "next-auth";

import { authOptions } from "@app/pages/api/auth/[...nextauth]";

type IncomingGSSP<P> = (ctx: GetServerSidePropsContext) => Promise<P>;

type WithAuthServerSidePropsResult = GetServerSidePropsResult<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any;
}>;

type WithSSRAuthOptions = {
// any options you eventually would like to pass (required role...)
};

export function withSSRGuest(
incomingGSSP?: IncomingGSSP<WithAuthServerSidePropsResult> | null,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: WithSSRAuthOptions
) {
return async (
ctx: GetServerSidePropsContext
): Promise<WithAuthServerSidePropsResult> => {
const session = await getServerSession(ctx.req, ctx.res, authOptions);

if (session !== null) {
return {
redirect: {
destination: "/my-dynamics",
permanent: false
}
};
}

if (incomingGSSP) {
const incomingGSSPResult = await incomingGSSP(ctx);

if ("props" in incomingGSSPResult) {
return {
props: {
...incomingGSSPResult.props,
session
}
};
}

if ("redirect" in incomingGSSPResult) {
return { redirect: { ...incomingGSSPResult.redirect } };
}

if ("notFound" in incomingGSSPResult) {
return { notFound: incomingGSSPResult.notFound };
}
}

return {
props: {
session
}
};
};
}
6 changes: 0 additions & 6 deletions apps/client/src/lib/utils.ts

This file was deleted.

3 changes: 2 additions & 1 deletion apps/client/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
<ThemeProvider>
<NextNProgress
height={5}
showOnShallow
color="#22c55e"
options={{ showSpinner: false }}
/>
<Layout>
<Component {...pageProps} />
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/dynamic/apo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default function APODynamic({ user }: { user: User }) {
return (
<>
<SEO title={t("navigation:dynamic.models.apo")} />
<h2 className="text-center text-2xl -mb-2.5 text-primary-600 dark:text-primary-400">
<h2 className="text-center text-2xl text-primary-700 dark:text-primary-400">
{t("navigation:dynamic.models.apo")}
</h2>
<form
Expand Down

0 comments on commit f5bdc6a

Please sign in to comment.