From a060a506ffa92e9c52f0097312f6504ccfdc69e4 Mon Sep 17 00:00:00 2001 From: Ayobami Akingbade Date: Sat, 13 Jul 2024 18:28:30 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(themes):=20implement=20theme?= =?UTF-8?q?=20switching?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 2 -- package.json | 2 -- src/frontend/_layouts/portal/index.ts | 1 + src/frontend/_layouts/portal/main.ts | 14 ++++++++++++++ src/frontend/_layouts/useAppTheme.ts | 4 ++++ src/frontend/components/app/roots.tsx | 5 ++--- src/frontend/components/ui/calendar.tsx | 2 +- src/frontend/views/account/Preferences/index.tsx | 5 ++++- 8 files changed, 26 insertions(+), 9 deletions(-) create mode 100644 src/frontend/_layouts/portal/index.ts create mode 100644 src/frontend/_layouts/portal/main.ts diff --git a/package-lock.json b/package-lock.json index c012840e..beea8084 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,6 @@ "jsonwebtoken": "^8.5.1", "knex": "^2.3.0", "latest-version": "^7.0.0", - "lodash": "^4.17.21", "microseconds": "^0.2.0", "mustache": "^4.2.0", "nanoid": "^4.0.0", @@ -107,7 +106,6 @@ "@types/cryptr": "^4.0.1", "@types/formidable": "^3.4.5", "@types/jsonwebtoken": "^8.5.8", - "@types/lodash": "^4.14.182", "@types/microseconds": "^0.2.0", "@types/node": "^18.0.0", "@types/nodemailer": "^6.4.6", diff --git a/package.json b/package.json index 7cc96c1a..777182e9 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ "jsonwebtoken": "^8.5.1", "knex": "^2.3.0", "latest-version": "^7.0.0", - "lodash": "^4.17.21", "microseconds": "^0.2.0", "mustache": "^4.2.0", "nanoid": "^4.0.0", @@ -129,7 +128,6 @@ "@types/cryptr": "^4.0.1", "@types/formidable": "^3.4.5", "@types/jsonwebtoken": "^8.5.8", - "@types/lodash": "^4.14.182", "@types/microseconds": "^0.2.0", "@types/node": "^18.0.0", "@types/nodemailer": "^6.4.6", diff --git a/src/frontend/_layouts/portal/index.ts b/src/frontend/_layouts/portal/index.ts new file mode 100644 index 00000000..7d6be459 --- /dev/null +++ b/src/frontend/_layouts/portal/index.ts @@ -0,0 +1 @@ +export { APP_THEMES, usePortalThemes, usePortalThemesSelection } from "./main"; diff --git a/src/frontend/_layouts/portal/main.ts b/src/frontend/_layouts/portal/main.ts new file mode 100644 index 00000000..a3049fe6 --- /dev/null +++ b/src/frontend/_layouts/portal/main.ts @@ -0,0 +1,14 @@ +import { useTheme } from "next-themes"; + +import { noop } from "@/shared/lib/noop"; + +export const usePortalThemes = () => { + noop(); +}; + +export const APP_THEMES = ["light", "dark"]; + +export const usePortalThemesSelection = () => { + const { themes } = useTheme(); + return themes; +}; diff --git a/src/frontend/_layouts/useAppTheme.ts b/src/frontend/_layouts/useAppTheme.ts index b6d7c2a4..74668a10 100644 --- a/src/frontend/_layouts/useAppTheme.ts +++ b/src/frontend/_layouts/useAppTheme.ts @@ -2,6 +2,8 @@ /* eslint-disable no-bitwise */ import { useAppConfiguration } from "@/frontend/hooks/configuration/configuration.store"; +import { usePortalThemes } from "./portal"; + type ThreeNumbers = readonly [number, number, number]; function hexToRgb(hex$1: string): ThreeNumbers { @@ -67,6 +69,8 @@ function hexToOklch(hex: string) { export const useAppTheme = () => { const themeColor = useAppConfiguration("theme_color"); + usePortalThemes(); + document.documentElement.style.setProperty( "--app-primary", hexToOklch(themeColor.data.primary) diff --git a/src/frontend/components/app/roots.tsx b/src/frontend/components/app/roots.tsx index 96f96ce8..99afcfab 100644 --- a/src/frontend/components/app/roots.tsx +++ b/src/frontend/components/app/roots.tsx @@ -4,6 +4,7 @@ import type { ReactNode } from "react"; import { LinguiProvider } from "translations/utils"; import { PortalProvider } from "@/frontend/_layouts/app/portal"; +import { APP_THEMES } from "@/frontend/_layouts/portal"; import { GoogleTagManager } from "@/frontend/_layouts/scripts/GoogleTagManager"; import { QueryProvider } from "@/frontend/lib/data/QueryClient"; @@ -18,9 +19,7 @@ export function ApplicationRoot({ translation?: Messages; }) { return ( - a.localeCompare(b))} - > + diff --git a/src/frontend/components/ui/calendar.tsx b/src/frontend/components/ui/calendar.tsx index 3285487e..c8d895b9 100644 --- a/src/frontend/components/ui/calendar.tsx +++ b/src/frontend/components/ui/calendar.tsx @@ -29,7 +29,7 @@ function Calendar({ className, classNames, ...props }: CalendarProps) { head_cell: "text-muted rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: cn( - "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-primary [&:has([aria-selected].day-outside)]:bg-primary/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", + "[&:has([aria-selected].day-outside)]:bg-primary/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-primary [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md" diff --git a/src/frontend/views/account/Preferences/index.tsx b/src/frontend/views/account/Preferences/index.tsx index fe075eab..47e8e024 100644 --- a/src/frontend/views/account/Preferences/index.tsx +++ b/src/frontend/views/account/Preferences/index.tsx @@ -5,6 +5,7 @@ import languages from "translations/languages"; import { SchemaForm } from "@/components/app/form/schema"; import { SectionBox } from "@/components/app/section-box"; +import { usePortalThemesSelection } from "@/frontend/_layouts/portal"; import { useDomainMessages } from "@/frontend/lib/crud-config"; import { LANG_DOMAINS } from "@/frontend/lib/crud-config/lang-domains"; import { useSetPageDetails } from "@/frontend/lib/routing/usePageDetails"; @@ -39,7 +40,9 @@ export const LANGUAGE_PREFERENCES_FORM_SCHEMA: IAppliedSchemaFormConfig<{ }; export function UserPreferences() { - const { theme, setTheme, themes } = useTheme(); + const { theme, setTheme } = useTheme(); + const themes = usePortalThemesSelection(); + const domainMessages = useDomainMessages(LANG_DOMAINS.ACCOUNT.PREFERENCES); const router = useRouter();