From fe0d21bad06f34b8efb28c7a2050cef2c51136b6 Mon Sep 17 00:00:00 2001 From: Logan Ford <110533855+Logannford@users.noreply.github.com> Date: Sat, 15 Mar 2025 22:26:56 +0000 Subject: [PATCH 1/5] feat(global): init light mode commit --- src/app/globals.css | 44 ++++++++++++++++--- src/app/layout.tsx | 13 ++++-- .../app/navigation/sidebar-dropdown.tsx | 11 +++++ .../global/navigation/mobile-menu.tsx | 5 +++ .../global/navigation/navigation.tsx | 5 ++- src/components/theme-provider.tsx | 9 ++++ src/components/theme-toggle.tsx | 34 ++++++++++++++ 7 files changed, 110 insertions(+), 11 deletions(-) create mode 100644 src/components/theme-provider.tsx create mode 100644 src/components/theme-toggle.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 0b6c240fe..c0271798d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -255,7 +255,7 @@ html { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; - --card: 0 0% 5% 1; + --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; @@ -266,7 +266,7 @@ html { --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 237 59.3% 60%; - --accent-foreground: 240 5.9% 10%; + --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; @@ -278,13 +278,13 @@ html { --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; - --sidebar-background: 0 0% 7%; - --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-background: 0 0% 100%; + --sidebar-foreground: 240 10% 3.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 240 5.9% 90%; --sidebar-ring: 217.2 91.2% 59.8%; --mantine-color-text: var(--foreground) !important; --mantine-color-red-6: var(--foreground) !important; @@ -294,6 +294,36 @@ html { --mantine-primary-color-light-hover: rgba(94, 102, 214, 0.12) !important; --mantine-color-gray-0: var(--background) !important; } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 5% 1; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 237 59.3% 60%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --sidebar-background: 0 0% 7%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } } @layer base { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 21eed0993..292a82424 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,17 +3,24 @@ import { OnestFont } from './styles/fonts/font'; import { UbuntuFont } from './styles/fonts/font'; import { SatoshiFont } from './styles/fonts/font'; import { InterFont } from './styles/fonts/font'; +import { ThemeProvider } from '@/components/theme-provider'; import './globals.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - {children} + + {children} + diff --git a/src/components/app/navigation/sidebar-dropdown.tsx b/src/components/app/navigation/sidebar-dropdown.tsx index 474805cce..31128821f 100644 --- a/src/components/app/navigation/sidebar-dropdown.tsx +++ b/src/components/app/navigation/sidebar-dropdown.tsx @@ -18,6 +18,7 @@ import { } from '@/components/ui/dropdown-menu'; import LogoutButton from '@/components/auth/logout'; import ProfilePicture from '@/components/ui/profile-picture'; +import { ThemeToggle } from '@/components/theme-toggle'; import type { UserRecord } from '@/types/User'; import { getUserDisplayName } from '@/utils/user'; @@ -84,6 +85,16 @@ export default function SidebarAreaComponent(opts: { GitHub + + + {user && ( diff --git a/src/components/marketing/global/navigation/mobile-menu.tsx b/src/components/marketing/global/navigation/mobile-menu.tsx index 1ff6d9da3..ebcdc7093 100644 --- a/src/components/marketing/global/navigation/mobile-menu.tsx +++ b/src/components/marketing/global/navigation/mobile-menu.tsx @@ -9,6 +9,7 @@ import { HamburgerMenuIcon, Cross1Icon, ChevronDownIcon } from '@radix-ui/react- import { ArrowRight } from 'lucide-react'; import { cn } from '@/lib/utils'; import { useUser } from '@/hooks/use-user'; +import { ThemeToggle } from '@/components/theme-toggle'; interface MenuItem { label: string; @@ -160,6 +161,10 @@ export function MobileMenu() {
+
+ Theme + +
{isLoggedIn ? ( - + {children} diff --git a/src/components/app/shared/feedback/feedback-modal.tsx b/src/components/app/shared/feedback/feedback-modal.tsx index 8ee9dc07b..ec2156b6c 100644 --- a/src/components/app/shared/feedback/feedback-modal.tsx +++ b/src/components/app/shared/feedback/feedback-modal.tsx @@ -48,7 +48,7 @@ export function FeedbackModal({ placeholder="Enter your feedback here..." value={feedback} onChange={(e) => setFeedback(e.target.value)} - className="mb-4 text-white border border-black-50" + className="mb-4 text-black dark:text-white border border-secondary dark:border-black-50" disabled={isPending} />
@@ -72,7 +72,7 @@ export function FeedbackModal({ repeat: Number.POSITIVE_INFINITY, ease: 'linear', }} - className="w-5 h-5 border-2 border-white border-t-transparent rounded-full" + className="size-5 border-2 border-black dark:border-white border-t-transparent rounded-full" /> ) : ( = ({
{/* */} -

Daily Missions

+

Daily Missions

@@ -83,7 +83,7 @@ function MissionItem({
-

{mission.title}

+

{mission.title}

{userMissionRecord?.status === 'COMPLETED' && ( )} diff --git a/src/components/app/shared/upgrade/upgrade-card.tsx b/src/components/app/shared/upgrade/upgrade-card.tsx index be1e2611c..d09f8f8ed 100644 --- a/src/components/app/shared/upgrade/upgrade-card.tsx +++ b/src/components/app/shared/upgrade/upgrade-card.tsx @@ -11,8 +11,8 @@ export default function UpgradeCard({ description?: string; }) { return ( -
-
+
+
{title || 'Looking for a more personalized experience?'}
diff --git a/src/components/app/study-paths/study-path-card.tsx b/src/components/app/study-paths/study-path-card.tsx index f82d43b02..c3975f7fe 100644 --- a/src/components/app/study-paths/study-path-card.tsx +++ b/src/components/app/study-paths/study-path-card.tsx @@ -20,19 +20,21 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) {
-

{studyPath.title}

-

{studyPath.description}

+

{studyPath.title}

+

+ {studyPath.description} +

-
+
{/** if 100% then show 100% else show the progress */} {Math.round( user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid)?.progress ?? @@ -40,7 +42,7 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) { ) === 100 ? (
-

completed

+

completed

) : ( `${Math.round( @@ -50,7 +52,7 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) { )}
e.studyPathUid === studyPath.uid)?.progress ?? 0 diff --git a/src/components/app/study-paths/study-path-goal-modal.tsx b/src/components/app/study-paths/study-path-goal-modal.tsx index 148ec13a0..3be9d2b7e 100644 --- a/src/components/app/study-paths/study-path-goal-modal.tsx +++ b/src/components/app/study-paths/study-path-goal-modal.tsx @@ -221,7 +221,7 @@ export default function StudyPathGoalModal({ user, studyPath, goal }: StudyPathG - + - Set a Goal + Set a Goal -

+

Set a goal date to complete this study path. Receive a daily reminder to complete the next question.

-

+

Your recommended completion date is{' '} {recommendedCompletionDate?.toLocaleDateString('en-US', { month: 'long', diff --git a/src/components/app/study-paths/study-path-sidebar.tsx b/src/components/app/study-paths/study-path-sidebar.tsx index 612b55d6e..12af9a60f 100644 --- a/src/components/app/study-paths/study-path-sidebar.tsx +++ b/src/components/app/study-paths/study-path-sidebar.tsx @@ -104,7 +104,7 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study

) : ( <> -

+

{Math.round( user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid) ?.progress ?? 0 @@ -112,7 +112,7 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study % completed

e.studyPathUid === studyPath.uid) ?.progress ?? 0 @@ -137,8 +137,8 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study />
-
-
+
+

Set a Goal

diff --git a/src/components/shared/hero.tsx b/src/components/shared/hero.tsx index 3be72553a..55762a67a 100644 --- a/src/components/shared/hero.tsx +++ b/src/components/shared/hero.tsx @@ -22,7 +22,7 @@ export default function Hero(opts: { heading )} {typeof subheading === 'string' ? ( -
+
{subheading}
) : ( diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 9005fcf69..e8d7f4fe2 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -25,7 +25,7 @@ const buttonVariants = cva( variants: { variant: { default: - 'bg-secondary dark:bg-primary text-black dark:text-primary-foreground shadow hover:bg-primary/90 dark:hover:bg-primary/90', + 'bg-secondary dark:bg-primary text-black dark:text-primary-foreground shadow hover:bg-secondary/90 dark:hover:bg-primary/90', destructive: 'bg-red-600 dark:bg-red-600 text-destructive-foreground shadow-sm hover:bg-destructive/90 dark:hover:bg-destructive/90', outline: