From da54bd0272bb50c529a9203aec55bc8c5732d1f5 Mon Sep 17 00:00:00 2001 From: Kevin Mok Date: Fri, 28 Mar 2025 14:43:07 -0400 Subject: [PATCH] Purple theme --- src/app/layout.tsx | 13 ++++++------- src/components/Calendar.tsx | 26 ++++++++++++++------------ src/components/CalendarHeader.tsx | 12 ++++++------ src/components/DayColumn.tsx | 4 ++-- src/components/DraggableEvent.tsx | 6 +++--- src/components/EventModal.tsx | 8 ++++---- src/styles/fonts.ts | 7 +++++++ tailwind.config.js | 15 +++++++++++++++ 8 files changed, 57 insertions(+), 34 deletions(-) create mode 100644 src/styles/fonts.ts create mode 100644 tailwind.config.js diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..4b3b348 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import { inter } from '@/styles/fonts'; const geistSans = Geist({ variable: "--font-geist-sans", @@ -19,14 +20,12 @@ export const metadata: Metadata = { export default function RootLayout({ children, -}: Readonly<{ - children: React.ReactNode; -}>) { +}: { + children: React.ReactNode +}) { return ( - - + + {children} diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index cf9c341..95bcb34 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -231,7 +231,7 @@ const Calendar = () => {
-
+
{format(date, 'EEE, MMM d')}
@@ -414,24 +414,26 @@ const WeekHeader = ({ currentDate }: { currentDate: Date }) => { }, [currentDate]); return ( -
+
{weekDays.map((day, index) => ( -
- {format(day, 'EEE')} -
-
- {format(day, 'd')} +
+ {format(day, 'EEE')} +
+
+ {format(day, 'd')} +
))} diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index cab9c65..a1cb8f7 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -8,27 +8,27 @@ interface CalendarHeaderProps { function CalendarHeader({ currentDate, onPrevWeek, onNextWeek }: CalendarHeaderProps) { return ( -
+
-

+

{format(currentDate, 'MMMM yyyy')}

diff --git a/src/components/DayColumn.tsx b/src/components/DayColumn.tsx index e72b296..b868f29 100644 --- a/src/components/DayColumn.tsx +++ b/src/components/DayColumn.tsx @@ -44,10 +44,10 @@ const DayColumn: React.FC = ({ return ( -
+
{format(date, 'EEE, MMM d')}
diff --git a/src/components/DraggableEvent.tsx b/src/components/DraggableEvent.tsx index d38b053..7e60a09 100644 --- a/src/components/DraggableEvent.tsx +++ b/src/components/DraggableEvent.tsx @@ -69,7 +69,7 @@ export default function DraggableEvent({ ref={ref} layoutId={event.id} onClick={() => !isDragging && onEventClick({ event, date })} - className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none" + className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none" whileHover={{ scale: 1.01 }} style={{ opacity: isDragging ? 0.7 : 1, @@ -87,11 +87,11 @@ export default function DraggableEvent({ draggable="false" /> )} -
+
{event.time}
-

{event.title}

+

{event.title}

); } \ No newline at end of file diff --git a/src/components/EventModal.tsx b/src/components/EventModal.tsx index b3365b9..614d1aa 100644 --- a/src/components/EventModal.tsx +++ b/src/components/EventModal.tsx @@ -62,11 +62,11 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => { className="w-full h-48 object-cover rounded-lg mb-4" /> )} - {event.title} - Date: {formattedDate} - Time: {event.time} + {event.title} + Date: {formattedDate} + Time: {event.time} {event.description && ( - + Description: {event.description} )} diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts new file mode 100644 index 0000000..6ac71a7 --- /dev/null +++ b/src/styles/fonts.ts @@ -0,0 +1,7 @@ +import { Inter } from 'next/font/google'; + +export const inter = Inter({ + subsets: ['latin'], + variable: '--font-inter', + display: 'swap', +}); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..1f6fb29 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,15 @@ +const { fontFamily } = require('tailwindcss/defaultTheme') + +module.exports = { + content: [ + // ... existing content ... + ], + theme: { + extend: { + fontFamily: { + sans: ['var(--font-inter)', ...fontFamily.sans], + }, + }, + }, + plugins: [], +} \ No newline at end of file