mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine night mode contrast, improve settings UI readability, and polish Someday list styles

Browse Source
This commit is contained in:
mARTin 2026-02-15 18:46:57 +01:00
parent cb10fd657f
commit b97230dcb4
4 changed files with 148 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
prisma/schema.prisma
View File

@ -66,6 +66,7 @@ model User {
weekendColorSat String? @default("#666666") weekendColorSat String? @default("#666666")
weekendColorSun String? @default("#dc2626") weekendColorSun String? @default("#dc2626")
pastDayColor String? @default("#a6a6a7")
accounts Account[] accounts Account[]
sessions Session[] sessions Session[]

11
src/app/api/user/profile/route.ts
View File

@ -1,12 +1,9 @@
import { NextRequest, NextResponse } from 'next/server'; import { NextRequest, NextResponse } from 'next/server';
import { getServerSession } from 'next-auth'; import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth'; import { authOptions } from '@/lib/auth';
import { PrismaClient } from '@prisma/client'; import { prisma } from '@/lib/prisma';
import bcrypt from 'bcryptjs'; import bcrypt from 'bcryptjs';
const prisma = new PrismaClient();
// Prisma client re-initialized to pick up schema changes
// Get user profile // Get user profile
export async function GET(request: NextRequest) { export async function GET(request: NextRequest) {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
@ -59,6 +56,7 @@ export async function GET(request: NextRequest) {
todayHighlightColor: true, todayHighlightColor: true,
weekendColorSat: true, weekendColorSat: true,
weekendColorSun: true, weekendColorSun: true,
pastDayColor: true,
createdAt: true createdAt: true
} }
}); });
@ -92,7 +90,8 @@ export async function PATCH(request: NextRequest) {
bodyFont, taskFontFamily, taskFontSize, taskFontWeight, bodyFont, taskFontFamily, taskFontSize, taskFontWeight,
eventFontFamily, eventFontSize, eventFontWeight, eventFontFamily, eventFontSize, eventFontWeight,
fontWeight, weekendColorSat, weekendColorSun, fontWeight, weekendColorSat, weekendColorSun,
weekdayColor, dateColor, taskColor, todayHighlightColor weekdayColor, dateColor, taskColor, todayHighlightColor,
pastDayColor
} = body; } = body;
const updateData: any = { const updateData: any = {
@ -139,6 +138,7 @@ export async function PATCH(request: NextRequest) {
...(todayHighlightColor !== undefined && { todayHighlightColor }), ...(todayHighlightColor !== undefined && { todayHighlightColor }),
...(weekendColorSat !== undefined && { weekendColorSat }), ...(weekendColorSat !== undefined && { weekendColorSat }),
...(weekendColorSun !== undefined && { weekendColorSun }), ...(weekendColorSun !== undefined && { weekendColorSun }),
...(pastDayColor !== undefined && { pastDayColor }),
}; };
if (password && password.trim() !== "") { if (password && password.trim() !== "") {
updateData.passwordHash = await bcrypt.hash(password, 10); updateData.passwordHash = await bcrypt.hash(password, 10);
@ -193,6 +193,7 @@ export async function PATCH(request: NextRequest) {
todayHighlightColor: true, todayHighlightColor: true,
weekendColorSat: true, weekendColorSat: true,
weekendColorSun: true, weekendColorSun: true,
pastDayColor: true,
} }
}); });

69
src/app/globals.css
View File

@ -452,6 +452,19 @@ h3 {
--weekly-border: #eeeeee; --weekly-border: #eeeeee;
--weekly-completed: #cccccc; --weekly-completed: #cccccc;
--weekly-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --weekly-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Settings Sidebar Theme */
--weekly-settings-bg: white;
--weekly-settings-item-bg: #f8fafc;
--weekly-settings-label: #475569;
--weekly-settings-title: #111827;
--weekly-settings-input-bg: white;
--weekly-settings-input-border: #dddddd;
--weekly-settings-text: #111827;
--weekly-settings-toggle-bg: #f3f4f6;
--weekly-settings-toggle-active-bg: white;
--weekly-settings-toggle-text: #6b7280;
--weekly-settings-toggle-active-text: #111827;
} }
/* Weekly Main Container */ /* Weekly Main Container */
@ -643,6 +656,11 @@ h3 {
background-color: var(--weekly-today-highlight); background-color: var(--weekly-today-highlight);
} }
.weekly-day-column.is-past .weekly-day-name,
.weekly-day-column.is-past .weekly-day-date {
color: var(--weekly-past-color, #a6a6a7);
}
/* Day Header */ /* Day Header */
.weekly-day-header { .weekly-day-header {
padding: 1rem 1rem 0.75rem; padding: 1rem 1rem 0.75rem;
@ -940,8 +958,9 @@ h3 {
color: var(--weekly-text); color: var(--weekly-text);
} }
/* Removed rogue color override for weekly-day-name */
.weekly-day-name { .weekly-day-name {
color: var(--weekly-text-light); /* color: var(--weekly-text-light); */
} }
.weekly-someday-title { .weekly-someday-title {
@ -976,7 +995,6 @@ h3 {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 1rem; gap: 1rem;
border-top: 1px solid var(--weekly-border);
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; /* Prevent vertical Scrollbar on container */ overflow-y: hidden; /* Prevent vertical Scrollbar on container */
@ -1390,11 +1408,24 @@ h3 {
/* Dark Mode */ /* Dark Mode */
.weekly-container.dark-mode { .weekly-container.dark-mode {
--weekly-bg: #1a1a1a; --weekly-bg: #323232;
--weekly-text: #f0f0f0; --weekly-text: #f0f0f0;
--weekly-text-light: #888888; --weekly-text-light: #aaa;
--weekly-border: #333333; --weekly-border: #4a4a4a;
--weekly-completed: #666666; --weekly-completed: #666666;
/* Settings Sidebar Theme (Dark) */
--weekly-settings-bg: #111111;
--weekly-settings-item-bg: #1a1a1a;
--weekly-settings-label: #aaaaaa;
--weekly-settings-title: #ffffff;
--weekly-settings-input-bg: #222222;
--weekly-settings-input-border: #333333;
--weekly-settings-text: #ffffff;
--weekly-settings-toggle-bg: #222222;
--weekly-settings-toggle-active-bg: #333333;
--weekly-settings-toggle-text: #888888;
--weekly-settings-toggle-active-text: #ffffff;
} }
.weekly-container.dark-mode .weekly-task-item:hover { .weekly-container.dark-mode .weekly-task-item:hover {
@ -1511,7 +1542,7 @@ h3 {
.time-slot.hour-start { .time-slot.hour-start {
/* Weekly-style: subtle dotted line at hour boundaries */ /* Weekly-style: subtle dotted line at hour boundaries */
border-top: 1px dotted rgba(0, 0, 0, 0.1); border-top: 1px dotted var(--weekly-border);
} }
.time-slot:hover { .time-slot:hover {
@ -1833,11 +1864,11 @@ h3 {
} }
.weekly-container.dark-mode .time-slot { .weekly-container.dark-mode .time-slot {
border-bottom-color: #2a2a2a; border-top: 1px dotted transparent;
} }
.weekly-container.dark-mode .time-slot.hour-start { .weekly-container.dark-mode .time-slot.hour-start {
border-bottom-color: var(--weekly-border); border-top-color: var(--weekly-border);
} }
.weekly-container.dark-mode .time-slot.drop-target:hover { .weekly-container.dark-mode .time-slot.drop-target:hover {
@ -2467,6 +2498,28 @@ h3 {
margin-bottom: 12px; margin-bottom: 12px;
} }
/* Form Elements in Settings */
.weekly-input,
.weekly-settings-sidebar select,
.weekly-settings-sidebar input[type="text"],
.weekly-settings-sidebar input[type="number"] {
background: var(--weekly-settings-input-bg) !important;
color: var(--weekly-settings-text) !important;
border: 1px solid var(--weekly-settings-input-border) !important;
border-radius: 4px;
padding: 8px;
width: 100%;
font-family: inherit;
font-size: 0.9rem;
}
.weekly-input:focus,
.weekly-settings-sidebar select:focus,
.weekly-settings-sidebar input:focus {
outline: 2px solid var(--weekly-teal);
outline-offset: -1px;
}
.event-title { .event-title {
font-family: var(--weekly-event-font); font-family: var(--weekly-event-font);
font-weight: var(--weekly-event-weight); font-weight: var(--weekly-event-weight);

128
src/components/WeeklyView.tsx
View File

@ -310,6 +310,25 @@ const isAllDayEvent = (event: CalendarEvent): boolean => {
return durationHours >= 24 && (isLocalMidnight || isUTCMidnight); return durationHours >= 24 && (isLocalMidnight || isUTCMidnight);
}; };
// Helper to invert colors for dark mode
function invertColor(hex: string): string {
if (!hex) return hex;
let color = hex.startsWith('#') ? hex.slice(1) : hex;
if (color.length === 3) {
color = color.split('').map(c => c + c).join('');
}
if (color.length !== 6) return hex;
try {
const r = (255 - parseInt(color.slice(0, 2), 16)).toString(16).padStart(2, '0');
const g = (255 - parseInt(color.slice(2, 4), 16)).toString(16).padStart(2, '0');
const b = (255 - parseInt(color.slice(4, 6), 16)).toString(16).padStart(2, '0');
return `#${r}${g}${b}`;
} catch (e) {
return hex;
}
}
// Main Component // Main Component
export default function WeeklyView() { export default function WeeklyView() {
const { data: session } = useSession(); const { data: session } = useSession();
@ -400,6 +419,7 @@ export default function WeeklyView() {
dateColor?: string; dateColor?: string;
taskColor?: string; taskColor?: string;
todayHighlightColor?: string; todayHighlightColor?: string;
pastDayColor?: string;
}>({ }>({
name: session?.user?.name || '', name: session?.user?.name || '',
email: session?.user?.email || '', email: session?.user?.email || '',
@ -439,7 +459,8 @@ export default function WeeklyView() {
weekendColorSat: '#666666', weekendColorSat: '#666666',
weekendColorSun: '#dc2626', weekendColorSun: '#dc2626',
focusTimerDuration: 25, focusTimerDuration: 25,
focusBreakDuration: 5 focusBreakDuration: 5,
pastDayColor: '#a6a6a7'
}); });
const [showSummary, setShowSummary] = useState(false); const [showSummary, setShowSummary] = useState(false);
@ -1702,12 +1723,13 @@ export default function WeeklyView() {
'--weekly-event-size': profile.eventFontSize || eventFontSize || '0.85rem', '--weekly-event-size': profile.eventFontSize || eventFontSize || '0.85rem',
'--weekly-event-weight': profile.eventFontWeight || eventFontWeight || '400', '--weekly-event-weight': profile.eventFontWeight || eventFontWeight || '400',
'--font-weight-body': profile.fontWeight || fontWeight || '400', '--font-weight-body': profile.fontWeight || fontWeight || '400',
'--weekly-weekend-sat': profile.weekendColorSat || '#666666', '--weekly-weekend-sat': darkMode ? invertColor(profile.weekendColorSat || '#666666') : (profile.weekendColorSat || '#666666'),
'--weekly-weekend-sun': profile.weekendColorSun || '#dc2626', '--weekly-weekend-sun': darkMode ? invertColor(profile.weekendColorSun || '#dc2626') : (profile.weekendColorSun || '#dc2626'),
'--weekly-weekday-color': profile.weekdayColor || '#888888', '--weekly-weekday-color': darkMode ? invertColor(profile.weekdayColor || '#888888') : (profile.weekdayColor || '#888888'),
'--weekly-date-color': profile.dateColor || '#888888', '--weekly-date-color': darkMode ? invertColor(profile.dateColor || '#888888') : (profile.dateColor || '#888888'),
'--weekly-task-color': profile.taskColor || '#333333', '--weekly-task-color': darkMode ? invertColor(profile.taskColor || '#333333') : (profile.taskColor || '#333333'),
'--weekly-today-highlight': profile.todayHighlightColor || '#f0fafa', '--weekly-today-highlight': darkMode ? invertColor(profile.todayHighlightColor || '#f0fafa') : (profile.todayHighlightColor || '#f0fafa'),
'--weekly-past-color': darkMode ? invertColor(profile.pastDayColor || '#a6a6a7') : (profile.pastDayColor || '#a6a6a7'),
} as React.CSSProperties; } as React.CSSProperties;
if (isLoading) { if (isLoading) {
@ -1996,7 +2018,7 @@ export default function WeeklyView() {
{getVisibleDays().map((date, colIndex) => ( {getVisibleDays().map((date, colIndex) => (
<div <div
key={date.toISOString()} key={date.toISOString()}
className={`weekly-day-column ${date.getDay() === 6 ? 'is-sat' : ''} ${date.getDay() === 0 ? 'is-sun' : ''} ${isSameDay(date, new Date()) ? 'is-today' : ''}`} className={`weekly-day-column ${date.getDay() === 6 ? 'is-sat' : ''} ${date.getDay() === 0 ? 'is-sun' : ''} ${isSameDay(date, new Date()) ? 'is-today' : ''} ${date < new Date() && !isSameDay(date, new Date()) ? 'is-past' : ''}`}
style={{ viewTransitionName: `day-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}` } as any} style={{ viewTransitionName: `day-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}` } as any}
> >
{/* Day Header */} {/* Day Header */}
@ -2184,7 +2206,7 @@ export default function WeeklyView() {
if (e.key === 'Enter') e.currentTarget.blur(); if (e.key === 'Enter') e.currentTarget.blur();
}} }}
className="weekly-task-text" className="weekly-task-text"
style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: '1px solid #777', outline: 'none' }} style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: '1px solid var(--weekly-border)', outline: 'none' }}
/> />
{/* Duration Presets */} {/* Duration Presets */}
<div className="duration-presets" style={{ display: 'flex', gap: '4px', marginTop: '6px', flexWrap: 'wrap' }}> <div className="duration-presets" style={{ display: 'flex', gap: '4px', marginTop: '6px', flexWrap: 'wrap' }}>
@ -2526,7 +2548,7 @@ export default function WeeklyView() {
{(somedayLists.length > 0 ? somedayLists : [{ id: 'default', title: 'LISTE', tasks: [] }]).slice(0, Math.max(somedayLists.length, viewDays)).map(list => ( {(somedayLists.length > 0 ? somedayLists : [{ id: 'default', title: 'LISTE', tasks: [] }]).slice(0, Math.max(somedayLists.length, viewDays)).map(list => (
<div <div
key={list.id} key={list.id}
className={`weekly-someday-list ${draggingListId === list.id ? 'is-dragging' : ''} dark:bg-gray-800 dark:border-gray-700 rounded-lg p-2 transition-colors duration-200`} className={`weekly-someday-list ${draggingListId === list.id ? 'is-dragging' : ''} dark:bg-gray-800 dark:border-gray-700 p-2 transition-colors duration-200`}
style={{ style={{
minHeight: '200px', minHeight: '200px',
cursor: 'text', // Indicate actionable area cursor: 'text', // Indicate actionable area
@ -2717,7 +2739,7 @@ export default function WeeklyView() {
}} /> }} />
{Array.from({ length: Math.max(0, 5 - list.tasks.length) }).map((_, i) => ( {Array.from({ length: Math.max(0, 5 - list.tasks.length) }).map((_, i) => (
<li key={`filler-${i}`} className="weekly-task-item minimal filler" style={{ <li key={`filler-${i}`} className="weekly-task-item minimal filler" style={{
borderBottom: '1px solid #eee', borderBottom: '1px solid var(--weekly-border)',
height: '32px', height: '32px',
margin: '0 0.5rem', margin: '0 0.5rem',
pointerEvents: 'none' pointerEvents: 'none'
@ -3094,7 +3116,7 @@ function SomedayAddTask({ listId, onAdd }: { listId: string; onAdd: (title: stri
}; };
return ( return (
<li className="weekly-task-item minimal" style={{ borderBottom: '1px solid #eee', margin: '0 0.5rem' }}> <li className="weekly-task-item minimal" style={{ borderBottom: '1px solid var(--weekly-border)', margin: '0 0.5rem' }}>
<form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }} style={{ width: '100%' }}> <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }} style={{ width: '100%' }}>
<input <input
ref={inputRef} ref={inputRef}
@ -3631,6 +3653,7 @@ function SettingsSidebar({
dateColor?: string; dateColor?: string;
taskColor?: string; taskColor?: string;
todayHighlightColor?: string; todayHighlightColor?: string;
pastDayColor?: string;
}>({ }>({
name: '', name: '',
email: '', email: '',
@ -3966,7 +3989,7 @@ function SettingsSidebar({
onChange={(e) => setMotto(e.target.value)} onChange={(e) => setMotto(e.target.value)}
className="weekly-input" className="weekly-input"
placeholder={t.mottoOfWeek} placeholder={t.mottoOfWeek}
style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }} style={{ width: '100%' }}
/> />
</div> </div>
@ -4173,8 +4196,8 @@ function SettingsSidebar({
{/* Text Size setting */} {/* Text Size setting */}
<div className="settings-item" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}> <div className="settings-item" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
<label style={{ fontWeight: 500, color: '#4b5563' }}>Text size</label> <label style={{ fontWeight: 500, color: 'var(--weekly-settings-label)' }}>Text size</label>
<div className="weekly-toggle-group" style={{ display: 'flex', background: '#f3f4f6', borderRadius: '6px', padding: '2px' }}> <div className="weekly-toggle-group" style={{ display: 'flex', background: 'var(--weekly-settings-toggle-bg)', borderRadius: '6px', padding: '2px' }}>
{(['S', 'M', 'L'] as const).map((size) => ( {(['S', 'M', 'L'] as const).map((size) => (
<button <button
key={size} key={size}
@ -4190,8 +4213,8 @@ function SettingsSidebar({
fontSize: '0.75rem', fontSize: '0.75rem',
fontWeight: 600, fontWeight: 600,
cursor: 'pointer', cursor: 'pointer',
background: (profile.fontSize || fontSize) === size ? 'white' : 'transparent', background: (profile.fontSize || fontSize) === size ? 'var(--weekly-settings-toggle-active-bg)' : 'transparent',
color: (profile.fontSize || fontSize) === size ? '#111827' : '#6b7280', color: (profile.fontSize || fontSize) === size ? 'var(--weekly-settings-toggle-active-text)' : 'var(--weekly-settings-toggle-text)',
boxShadow: (profile.fontSize || fontSize) === size ? '0 1px 2px rgba(0,0,0,0.1)' : 'none', boxShadow: (profile.fontSize || fontSize) === size ? '0 1px 2px rgba(0,0,0,0.1)' : 'none',
transition: 'all 0.2s ease' transition: 'all 0.2s ease'
}} }}
@ -4203,18 +4226,18 @@ function SettingsSidebar({
</div> </div>
{/* Typography Settings */} {/* Typography Settings */}
<div style={{ marginBottom: '1.5rem', borderBottom: '1px solid #eee', paddingBottom: '1rem' }}> <div style={{ marginBottom: '1.5rem', borderBottom: '1px solid var(--weekly-border)', paddingBottom: '1rem' }}>
<label style={{ display: 'block', fontSize: '1rem', fontWeight: 700, marginBottom: '12px', color: '#111827' }}>Font Customization</label> <label style={{ display: 'block', fontSize: '1rem', fontWeight: 700, marginBottom: '12px', color: 'var(--weekly-settings-title)' }}>Font Customization</label>
{/* Day Names */} {/* Day Names */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Weekday Font (e.g. MONTAG)</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Weekday Font (e.g. MONTAG)</label>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}> <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}>
<select <select
value={profile.headlineFont || 'Inter'} value={profile.headlineFont || 'Inter'}
onChange={(e) => setProfile({ ...profile, headlineFont: e.target.value })} onChange={(e) => setProfile({ ...profile, headlineFont: e.target.value })}
className="weekly-input" className="weekly-input"
style={{ width: '100%', padding: '8px', fontSize: '0.9rem' }} style={{ width: '100%', padding: '8px', fontSize: '0.9rem', border: '1px solid var(--weekly-settings-input-border)', borderRadius: '4px', background: 'var(--weekly-settings-input-bg)', color: 'var(--weekly-settings-text)' }}
> >
{AVAILABLE_FONTS.map(font => ( {AVAILABLE_FONTS.map(font => (
<option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option> <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
@ -4224,7 +4247,7 @@ function SettingsSidebar({
value={profile.headlineFontSize || '1.25rem'} value={profile.headlineFontSize || '1.25rem'}
onChange={(e) => setProfile({ ...profile, headlineFontSize: e.target.value })} onChange={(e) => setProfile({ ...profile, headlineFontSize: e.target.value })}
className="weekly-input" className="weekly-input"
style={{ width: '100%', padding: '8px', fontSize: '0.9rem' }} style={{ width: '100%', padding: '8px', fontSize: '0.9rem', border: '1px solid var(--weekly-settings-input-border)', borderRadius: '4px', background: 'var(--weekly-settings-input-bg)', color: 'var(--weekly-settings-text)' }}
> >
<option value="1rem">Small 16px</option> <option value="1rem">Small 16px</option>
<option value="1.25rem">Normal 20px</option> <option value="1.25rem">Normal 20px</option>
@ -4249,8 +4272,8 @@ function SettingsSidebar({
</div> </div>
{/* Dates */} {/* Dates */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Date Font (e.g. 12. Feb.)</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Date Font (e.g. 12. Feb.)</label>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}> <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}>
<select <select
value={profile.dateFontFamily || 'Inter'} value={profile.dateFontFamily || 'Inter'}
@ -4278,7 +4301,7 @@ function SettingsSidebar({
value={profile.dateFontWeight || '400'} value={profile.dateFontWeight || '400'}
onChange={(e) => setProfile({ ...profile, dateFontWeight: e.target.value })} onChange={(e) => setProfile({ ...profile, dateFontWeight: e.target.value })}
className="weekly-input" className="weekly-input"
style={{ width: '100%', padding: '8px', fontSize: '0.9rem' }} style={{ width: '100%', padding: '8px', fontSize: '0.9rem', border: '1px solid var(--weekly-settings-input-border)', borderRadius: '4px', background: 'var(--weekly-settings-input-bg)', color: 'var(--weekly-settings-text)' }}
> >
<option value="300">Light</option> <option value="300">Light</option>
<option value="400">Normal</option> <option value="400">Normal</option>
@ -4290,8 +4313,8 @@ function SettingsSidebar({
</div> </div>
{/* Tasks */} {/* Tasks */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Task Font</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Task Font</label>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}> <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}>
<select <select
value={profile.taskFontFamily || 'Inter'} value={profile.taskFontFamily || 'Inter'}
@ -4319,7 +4342,7 @@ function SettingsSidebar({
value={profile.taskFontWeight || '400'} value={profile.taskFontWeight || '400'}
onChange={(e) => setProfile({ ...profile, taskFontWeight: e.target.value, timeTaskFontWeight: e.target.value })} onChange={(e) => setProfile({ ...profile, taskFontWeight: e.target.value, timeTaskFontWeight: e.target.value })}
className="weekly-input" className="weekly-input"
style={{ width: '100%', padding: '8px', fontSize: '0.9rem' }} style={{ width: '100%', padding: '8px', fontSize: '0.9rem', border: '1px solid var(--weekly-settings-input-border)', borderRadius: '4px', background: 'var(--weekly-settings-input-bg)', color: 'var(--weekly-settings-text)' }}
> >
<option value="300">Light</option> <option value="300">Light</option>
<option value="400">Normal</option> <option value="400">Normal</option>
@ -4331,8 +4354,8 @@ function SettingsSidebar({
</div> </div>
{/* Calendar Event Font */} {/* Calendar Event Font */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Calendar Event Font</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Calendar Event Font</label>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}> <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '8px' }}>
<select <select
value={profile.eventFontFamily || 'Inter'} value={profile.eventFontFamily || 'Inter'}
@ -4359,7 +4382,7 @@ function SettingsSidebar({
value={profile.eventFontWeight || '400'} value={profile.eventFontWeight || '400'}
onChange={(e) => setProfile({ ...profile, eventFontWeight: e.target.value })} onChange={(e) => setProfile({ ...profile, eventFontWeight: e.target.value })}
className="weekly-input" className="weekly-input"
style={{ width: '100%', padding: '8px', fontSize: '0.9rem' }} style={{ width: '100%', padding: '8px', fontSize: '0.9rem', border: '1px solid var(--weekly-settings-input-border)', borderRadius: '4px', background: 'var(--weekly-settings-input-bg)', color: 'var(--weekly-settings-text)' }}
> >
<option value="300">Light</option> <option value="300">Light</option>
<option value="400">Normal</option> <option value="400">Normal</option>
@ -4372,11 +4395,11 @@ function SettingsSidebar({
{/* Element Colors */} {/* Element Colors */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Element Colors</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Element Colors</label>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}> <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Weekday Name</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Weekday Name</label>
<input <input
type="color" type="color"
value={profile.weekdayColor || '#888888'} value={profile.weekdayColor || '#888888'}
@ -4385,7 +4408,7 @@ function SettingsSidebar({
/> />
</div> </div>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Date</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Date</label>
<input <input
type="color" type="color"
value={profile.dateColor || '#888888'} value={profile.dateColor || '#888888'}
@ -4394,7 +4417,7 @@ function SettingsSidebar({
/> />
</div> </div>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Task Text</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Task Text</label>
<input <input
type="color" type="color"
value={profile.taskColor || '#333333'} value={profile.taskColor || '#333333'}
@ -4403,7 +4426,7 @@ function SettingsSidebar({
/> />
</div> </div>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Today Highlight</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Today Highlight</label>
<input <input
type="color" type="color"
value={profile.todayHighlightColor || '#f0fafa'} value={profile.todayHighlightColor || '#f0fafa'}
@ -4411,15 +4434,24 @@ function SettingsSidebar({
style={{ width: '100%', height: '30px', cursor: 'pointer', border: 'none', background: 'transparent' }} style={{ width: '100%', height: '30px', cursor: 'pointer', border: 'none', background: 'transparent' }}
/> />
</div> </div>
<div>
<label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Past Days</label>
<input
type="color"
value={profile.pastDayColor || '#a6a6a7'}
onChange={(e) => setProfile({ ...profile, pastDayColor: e.target.value })}
style={{ width: '100%', height: '30px', cursor: 'pointer', border: 'none', background: 'transparent' }}
/>
</div>
</div> </div>
</div> </div>
{/* Weekend Colors */} {/* Weekend Colors */}
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}> <div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Weekend Highlight Colors</label> <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: 'var(--weekly-settings-label)', marginBottom: '8px' }}>Weekend Highlight Colors</label>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}> <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Saturday</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Saturday</label>
<input <input
type="color" type="color"
value={profile.weekendColorSat || '#666666'} value={profile.weekendColorSat || '#666666'}
@ -4428,7 +4460,7 @@ function SettingsSidebar({
/> />
</div> </div>
<div> <div>
<label style={{ display: 'block', fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>Sunday</label> <label style={{ display: 'block', fontSize: '0.75rem', color: 'var(--weekly-settings-label)', marginBottom: '4px' }}>Sunday</label>
<input <input
type="color" type="color"
value={profile.weekendColorSun || '#dc2626'} value={profile.weekendColorSun || '#dc2626'}
@ -4455,25 +4487,25 @@ function SettingsSidebar({
<div style={{ marginBottom: '1rem', display: 'flex', gap: '16px' }}> <div style={{ marginBottom: '1rem', display: 'flex', gap: '16px' }}>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500 }}>Focus Timer (min)</label> <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500, color: 'var(--weekly-settings-label)' }}>Focus Timer (min)</label>
<input <input
type="number" type="number"
min="1" min="1"
max="120" max="120"
value={profile.focusTimerDuration || 25} value={profile.focusTimerDuration || 25}
onChange={(e) => setProfile({ ...profile, focusTimerDuration: parseInt(e.target.value) || 25 })} onChange={(e) => setProfile({ ...profile, focusTimerDuration: parseInt(e.target.value) || 25 })}
style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500 }}>Focus Break (min)</label> <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500, color: 'var(--weekly-settings-label)' }}>Focus Break (min)</label>
<input <input
type="number" type="number"
min="1" min="1"
max="60" max="60"
value={profile.focusBreakDuration || 5} value={profile.focusBreakDuration || 5}
onChange={(e) => setProfile({ ...profile, focusBreakDuration: parseInt(e.target.value) || 5 })} onChange={(e) => setProfile({ ...profile, focusBreakDuration: parseInt(e.target.value) || 5 })}
style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }} style={{ width: '100%' }}
/> />
</div> </div>
</div> </div>
@ -4529,8 +4561,8 @@ function SettingsSidebar({
onChange={(e) => handleUpdateCalendar(conn.id, cal.id, { selected: e.target.checked })} onChange={(e) => handleUpdateCalendar(conn.id, cal.id, { selected: e.target.checked })}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
<span style={{ fontSize: '0.9rem', color: '#555' }}> <span style={{ fontSize: '0.9rem', color: 'var(--weekly-text)' }}>
{cal.title} {cal.isPrimary && <span style={{ fontSize: '0.8em', color: '#888' }}>(Primary)</span>} {cal.title} {cal.isPrimary && <span style={{ fontSize: '0.8em', color: 'var(--weekly-text-light)' }}>(Primary)</span>}
</span> </span>
</div> </div>