Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Purple theme

Browse Source
This commit is contained in:
Kevin Mok
2025-03-28 14:43:07 -04:00
parent 4cb4cb4959
commit da54bd0272
8 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/layout.tsx
View File

@@ -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 (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<html lang="en" className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} antialiased`}>
<body className="bg-gradient-to-br from-[#f3e8ff] to-[#e9d5ff] min-h-screen">
{children}
</body>
</html>

26
src/components/Calendar.tsx
View File

@@ -231,7 +231,7 @@ const Calendar = () => {
<div
ref={containerRef}
className="flex-1 overflow-hidden"
className="flex-1 overflow-hidden bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe]"
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
@@ -379,7 +379,7 @@ const DayColumn = ({
className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative`}
data-day={dayOffset}
>
<div className="font-bold mb-2 text-black text-xl">
<div className="font-bold mb-2 text-purple-500 text-med">
{format(date, 'EEE, MMM d')}
</div>
@@ -414,24 +414,26 @@ const WeekHeader = ({ currentDate }: { currentDate: Date }) => {
}, [currentDate]);
return (
<div className="flex justify-between px-2 py-3 border-b">
<div className="flex justify-between px-2 py-3 bg-gradient-to-r from-blue-500 to-purple-500">
{weekDays.map((day, index) => (
<motion.div
key={day.toISOString()}
className="flex flex-col items-center flex-1"
initial={false}
animate={{ backgroundColor: isSameDay(day, currentDate) ? '#3B82F6' : 'transparent' }}
animate={{ backgroundColor: 'transparent' }}
transition={{ duration: 0.3 }}
>
<div className={`text-sm font-medium ${
isSameDay(day, currentDate) ? 'text-white' : 'text-gray-600'
<div className={`w-full px-2 py-2 rounded-md flex flex-col items-center gap-1 ${
isSameDay(day, currentDate)
? 'bg-gradient-to-br from-indigo-600 to-violet-600 text-white'
: 'text-purple-100'
}`}>
{format(day, 'EEE')}
</div>
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
isSameDay(day, currentDate) ? 'bg-blue-500 text-white' : 'text-gray-900'
}`}>
{format(day, 'd')}
<div className="text-sm font-medium">
{format(day, 'EEE')}
</div>
<div className="w-8 h-8 rounded-full flex items-center justify-center">
{format(day, 'd')}
</div>
</div>
</motion.div>
))}

12
src/components/CalendarHeader.tsx
View File

@@ -8,27 +8,27 @@ interface CalendarHeaderProps {
function CalendarHeader({ currentDate, onPrevWeek, onNextWeek }: CalendarHeaderProps) {
return (
<div className="flex items-center justify-center gap-4">
<div className="flex items-center justify-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500">
<button
onClick={onPrevWeek}
className="p-2 rounded-full hover:bg-gray-100"
className="p-2 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 hover:from-indigo-500 hover:to-violet-500"
>
{/* Left arrow icon */}
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<h2 className="text-xl font-semibold">
<h2 className="text-xl font-semibold text-purple-100 font-sans">
{format(currentDate, 'MMMM yyyy')}
</h2>
<button
onClick={onNextWeek}
className="p-2 rounded-full hover:bg-gray-100"
className="p-2 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 hover:from-indigo-500 hover:to-violet-500"
>
{/* Right arrow icon */}
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>

4
src/components/DayColumn.tsx
View File

@@ -44,10 +44,10 @@ const DayColumn: React.FC<DayColumnProps> = ({
return (
<motion.div
ref={columnRef}
className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative`}
className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative shadow-md z-10`}
data-day={index}
>
<div className="font-bold mb-2 text-black text-xl">
<div className="font-bold mb-2 text-purple-600 text-sm font-sans">
{format(date, 'EEE, MMM d')}
</div>

6
src/components/DraggableEvent.tsx
View File

@@ -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"
/>
)}
<div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
<div className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded">
{event.time}
</div>
</div>
<h3 className="font-medium text-black">{event.title}</h3>
<h3 className="text-sm text-black font-sans">{event.title}</h3>
</motion.div>
);
}

8
src/components/EventModal.tsx
View File

@@ -62,11 +62,11 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
className="w-full h-48 object-cover rounded-lg mb-4"
/>
)}
<motion.h2 className="text-2xl font-bold mb-4">{event.title}</motion.h2>
<motion.p className="text-gray-600 mb-2">Date: {formattedDate}</motion.p>
<motion.p className="text-gray-600">Time: {event.time}</motion.p>
<motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2>
<motion.p className="text-gray-600 mb-2 font-sans">Date: {formattedDate}</motion.p>
<motion.p className="text-gray-600 font-sans">Time: {event.time}</motion.p>
{event.description && (
<motion.p className="text-gray-600">
<motion.p className="text-gray-600 font-sans">
Description: {event.description}
</motion.p>
)}

7
src/styles/fonts.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Inter } from 'next/font/google';
export const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
});

15
tailwind.config.js Normal file
View File

@@ -0,0 +1,15 @@
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
// ... existing content ...
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', ...fontFamily.sans],
},
},
},
plugins: [],
}