Refine night mode contrast, improve settings UI readability, and polish Someday list styles
This commit is contained in:
parent
cb10fd657f
commit
b97230dcb4
@ -66,6 +66,7 @@ model User {
|
||||
|
||||
weekendColorSat String? @default("#666666")
|
||||
weekendColorSun String? @default("#dc2626")
|
||||
pastDayColor String? @default("#a6a6a7")
|
||||
|
||||
accounts Account[]
|
||||
sessions Session[]
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { getServerSession } from 'next-auth';
|
||||
import { authOptions } from '@/lib/auth';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import bcrypt from 'bcryptjs';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
// Prisma client re-initialized to pick up schema changes
|
||||
|
||||
// Get user profile
|
||||
export async function GET(request: NextRequest) {
|
||||
const session = await getServerSession(authOptions);
|
||||
@ -59,6 +56,7 @@ export async function GET(request: NextRequest) {
|
||||
todayHighlightColor: true,
|
||||
weekendColorSat: true,
|
||||
weekendColorSun: true,
|
||||
pastDayColor: true,
|
||||
createdAt: true
|
||||
}
|
||||
});
|
||||
@ -92,7 +90,8 @@ export async function PATCH(request: NextRequest) {
|
||||
bodyFont, taskFontFamily, taskFontSize, taskFontWeight,
|
||||
eventFontFamily, eventFontSize, eventFontWeight,
|
||||
fontWeight, weekendColorSat, weekendColorSun,
|
||||
weekdayColor, dateColor, taskColor, todayHighlightColor
|
||||
weekdayColor, dateColor, taskColor, todayHighlightColor,
|
||||
pastDayColor
|
||||
} = body;
|
||||
|
||||
const updateData: any = {
|
||||
@ -139,6 +138,7 @@ export async function PATCH(request: NextRequest) {
|
||||
...(todayHighlightColor !== undefined && { todayHighlightColor }),
|
||||
...(weekendColorSat !== undefined && { weekendColorSat }),
|
||||
...(weekendColorSun !== undefined && { weekendColorSun }),
|
||||
...(pastDayColor !== undefined && { pastDayColor }),
|
||||
};
|
||||
if (password && password.trim() !== "") {
|
||||
updateData.passwordHash = await bcrypt.hash(password, 10);
|
||||
@ -193,6 +193,7 @@ export async function PATCH(request: NextRequest) {
|
||||
todayHighlightColor: true,
|
||||
weekendColorSat: true,
|
||||
weekendColorSun: true,
|
||||
pastDayColor: true,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -452,6 +452,19 @@ h3 {
|
||||
--weekly-border: #eeeeee;
|
||||
--weekly-completed: #cccccc;
|
||||
--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 */
|
||||
@ -643,6 +656,11 @@ h3 {
|
||||
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 */
|
||||
.weekly-day-header {
|
||||
padding: 1rem 1rem 0.75rem;
|
||||
@ -940,8 +958,9 @@ h3 {
|
||||
color: var(--weekly-text);
|
||||
}
|
||||
|
||||
/* Removed rogue color override for weekly-day-name */
|
||||
.weekly-day-name {
|
||||
color: var(--weekly-text-light);
|
||||
/* color: var(--weekly-text-light); */
|
||||
}
|
||||
|
||||
.weekly-someday-title {
|
||||
@ -976,7 +995,6 @@ h3 {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
border-top: 1px solid var(--weekly-border);
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden; /* Prevent vertical Scrollbar on container */
|
||||
@ -1390,11 +1408,24 @@ h3 {
|
||||
|
||||
/* Dark Mode */
|
||||
.weekly-container.dark-mode {
|
||||
--weekly-bg: #1a1a1a;
|
||||
--weekly-bg: #323232;
|
||||
--weekly-text: #f0f0f0;
|
||||
--weekly-text-light: #888888;
|
||||
--weekly-border: #333333;
|
||||
--weekly-text-light: #aaa;
|
||||
--weekly-border: #4a4a4a;
|
||||
--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 {
|
||||
@ -1511,7 +1542,7 @@ h3 {
|
||||
|
||||
.time-slot.hour-start {
|
||||
/* 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 {
|
||||
@ -1833,11 +1864,11 @@ h3 {
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .time-slot {
|
||||
border-bottom-color: #2a2a2a;
|
||||
border-top: 1px dotted transparent;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -2467,6 +2498,28 @@ h3 {
|
||||
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 {
|
||||
font-family: var(--weekly-event-font);
|
||||
font-weight: var(--weekly-event-weight);
|
||||
|
||||
@ -310,6 +310,25 @@ const isAllDayEvent = (event: CalendarEvent): boolean => {
|
||||
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
|
||||
export default function WeeklyView() {
|
||||
const { data: session } = useSession();
|
||||
@ -400,6 +419,7 @@ export default function WeeklyView() {
|
||||
dateColor?: string;
|
||||
taskColor?: string;
|
||||
todayHighlightColor?: string;
|
||||
pastDayColor?: string;
|
||||
}>({
|
||||
name: session?.user?.name || '',
|
||||
email: session?.user?.email || '',
|
||||
@ -439,7 +459,8 @@ export default function WeeklyView() {
|
||||
weekendColorSat: '#666666',
|
||||
weekendColorSun: '#dc2626',
|
||||
focusTimerDuration: 25,
|
||||
focusBreakDuration: 5
|
||||
focusBreakDuration: 5,
|
||||
pastDayColor: '#a6a6a7'
|
||||
});
|
||||
const [showSummary, setShowSummary] = useState(false);
|
||||
|
||||
@ -1702,12 +1723,13 @@ export default function WeeklyView() {
|
||||
'--weekly-event-size': profile.eventFontSize || eventFontSize || '0.85rem',
|
||||
'--weekly-event-weight': profile.eventFontWeight || eventFontWeight || '400',
|
||||
'--font-weight-body': profile.fontWeight || fontWeight || '400',
|
||||
'--weekly-weekend-sat': profile.weekendColorSat || '#666666',
|
||||
'--weekly-weekend-sun': profile.weekendColorSun || '#dc2626',
|
||||
'--weekly-weekday-color': profile.weekdayColor || '#888888',
|
||||
'--weekly-date-color': profile.dateColor || '#888888',
|
||||
'--weekly-task-color': profile.taskColor || '#333333',
|
||||
'--weekly-today-highlight': profile.todayHighlightColor || '#f0fafa',
|
||||
'--weekly-weekend-sat': darkMode ? invertColor(profile.weekendColorSat || '#666666') : (profile.weekendColorSat || '#666666'),
|
||||
'--weekly-weekend-sun': darkMode ? invertColor(profile.weekendColorSun || '#dc2626') : (profile.weekendColorSun || '#dc2626'),
|
||||
'--weekly-weekday-color': darkMode ? invertColor(profile.weekdayColor || '#888888') : (profile.weekdayColor || '#888888'),
|
||||
'--weekly-date-color': darkMode ? invertColor(profile.dateColor || '#888888') : (profile.dateColor || '#888888'),
|
||||
'--weekly-task-color': darkMode ? invertColor(profile.taskColor || '#333333') : (profile.taskColor || '#333333'),
|
||||
'--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;
|
||||
|
||||
if (isLoading) {
|
||||
@ -1996,7 +2018,7 @@ export default function WeeklyView() {
|
||||
{getVisibleDays().map((date, colIndex) => (
|
||||
<div
|
||||
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}
|
||||
>
|
||||
{/* Day Header */}
|
||||
@ -2184,7 +2206,7 @@ export default function WeeklyView() {
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
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 */}
|
||||
<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 => (
|
||||
<div
|
||||
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={{
|
||||
minHeight: '200px',
|
||||
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) => (
|
||||
<li key={`filler-${i}`} className="weekly-task-item minimal filler" style={{
|
||||
borderBottom: '1px solid #eee',
|
||||
borderBottom: '1px solid var(--weekly-border)',
|
||||
height: '32px',
|
||||
margin: '0 0.5rem',
|
||||
pointerEvents: 'none'
|
||||
@ -3094,7 +3116,7 @@ function SomedayAddTask({ listId, onAdd }: { listId: string; onAdd: (title: stri
|
||||
};
|
||||
|
||||
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%' }}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
@ -3631,6 +3653,7 @@ function SettingsSidebar({
|
||||
dateColor?: string;
|
||||
taskColor?: string;
|
||||
todayHighlightColor?: string;
|
||||
pastDayColor?: string;
|
||||
}>({
|
||||
name: '',
|
||||
email: '',
|
||||
@ -3966,7 +3989,7 @@ function SettingsSidebar({
|
||||
onChange={(e) => setMotto(e.target.value)}
|
||||
className="weekly-input"
|
||||
placeholder={t.mottoOfWeek}
|
||||
style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -4173,8 +4196,8 @@ function SettingsSidebar({
|
||||
|
||||
{/* Text Size setting */}
|
||||
<div className="settings-item" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
|
||||
<label style={{ fontWeight: 500, color: '#4b5563' }}>Text size</label>
|
||||
<div className="weekly-toggle-group" style={{ display: 'flex', background: '#f3f4f6', borderRadius: '6px', padding: '2px' }}>
|
||||
<label style={{ fontWeight: 500, color: 'var(--weekly-settings-label)' }}>Text size</label>
|
||||
<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) => (
|
||||
<button
|
||||
key={size}
|
||||
@ -4190,8 +4213,8 @@ function SettingsSidebar({
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
background: (profile.fontSize || fontSize) === size ? 'white' : 'transparent',
|
||||
color: (profile.fontSize || fontSize) === size ? '#111827' : '#6b7280',
|
||||
background: (profile.fontSize || fontSize) === size ? 'var(--weekly-settings-toggle-active-bg)' : 'transparent',
|
||||
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',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
@ -4203,18 +4226,18 @@ function SettingsSidebar({
|
||||
</div>
|
||||
|
||||
{/* Typography Settings */}
|
||||
<div style={{ marginBottom: '1.5rem', borderBottom: '1px solid #eee', paddingBottom: '1rem' }}>
|
||||
<label style={{ display: 'block', fontSize: '1rem', fontWeight: 700, marginBottom: '12px', color: '#111827' }}>Font Customization</label>
|
||||
<div style={{ marginBottom: '1.5rem', borderBottom: '1px solid var(--weekly-border)', paddingBottom: '1rem' }}>
|
||||
<label style={{ display: 'block', fontSize: '1rem', fontWeight: 700, marginBottom: '12px', color: 'var(--weekly-settings-title)' }}>Font Customization</label>
|
||||
|
||||
{/* Day Names */}
|
||||
<div style={{ background: '#f8fafc', 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>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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' }}>
|
||||
<select
|
||||
value={profile.headlineFont || 'Inter'}
|
||||
onChange={(e) => setProfile({ ...profile, headlineFont: e.target.value })}
|
||||
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 => (
|
||||
<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'}
|
||||
onChange={(e) => setProfile({ ...profile, headlineFontSize: e.target.value })}
|
||||
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="1.25rem">Normal 20px</option>
|
||||
@ -4249,8 +4272,8 @@ function SettingsSidebar({
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div style={{ background: '#f8fafc', 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>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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' }}>
|
||||
<select
|
||||
value={profile.dateFontFamily || 'Inter'}
|
||||
@ -4278,7 +4301,7 @@ function SettingsSidebar({
|
||||
value={profile.dateFontWeight || '400'}
|
||||
onChange={(e) => setProfile({ ...profile, dateFontWeight: e.target.value })}
|
||||
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="400">Normal</option>
|
||||
@ -4290,8 +4313,8 @@ function SettingsSidebar({
|
||||
</div>
|
||||
|
||||
{/* Tasks */}
|
||||
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Task Font</label>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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' }}>
|
||||
<select
|
||||
value={profile.taskFontFamily || 'Inter'}
|
||||
@ -4319,7 +4342,7 @@ function SettingsSidebar({
|
||||
value={profile.taskFontWeight || '400'}
|
||||
onChange={(e) => setProfile({ ...profile, taskFontWeight: e.target.value, timeTaskFontWeight: e.target.value })}
|
||||
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="400">Normal</option>
|
||||
@ -4331,8 +4354,8 @@ function SettingsSidebar({
|
||||
</div>
|
||||
|
||||
{/* Calendar Event Font */}
|
||||
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Calendar Event Font</label>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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' }}>
|
||||
<select
|
||||
value={profile.eventFontFamily || 'Inter'}
|
||||
@ -4359,7 +4382,7 @@ function SettingsSidebar({
|
||||
value={profile.eventFontWeight || '400'}
|
||||
onChange={(e) => setProfile({ ...profile, eventFontWeight: e.target.value })}
|
||||
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="400">Normal</option>
|
||||
@ -4372,11 +4395,11 @@ function SettingsSidebar({
|
||||
|
||||
|
||||
{/* Element Colors */}
|
||||
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Element Colors</label>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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>
|
||||
<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
|
||||
type="color"
|
||||
value={profile.weekdayColor || '#888888'}
|
||||
@ -4385,7 +4408,7 @@ function SettingsSidebar({
|
||||
/>
|
||||
</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
|
||||
type="color"
|
||||
value={profile.dateColor || '#888888'}
|
||||
@ -4394,7 +4417,7 @@ function SettingsSidebar({
|
||||
/>
|
||||
</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
|
||||
type="color"
|
||||
value={profile.taskColor || '#333333'}
|
||||
@ -4403,7 +4426,7 @@ function SettingsSidebar({
|
||||
/>
|
||||
</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
|
||||
type="color"
|
||||
value={profile.todayHighlightColor || '#f0fafa'}
|
||||
@ -4411,15 +4434,24 @@ function SettingsSidebar({
|
||||
style={{ width: '100%', height: '30px', cursor: 'pointer', border: 'none', background: 'transparent' }}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* Weekend Colors */}
|
||||
<div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, color: '#475569', marginBottom: '8px' }}>Weekend Highlight Colors</label>
|
||||
<div style={{ background: 'var(--weekly-settings-item-bg)', padding: '12px', borderRadius: '8px', marginBottom: '12px' }}>
|
||||
<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>
|
||||
<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
|
||||
type="color"
|
||||
value={profile.weekendColorSat || '#666666'}
|
||||
@ -4428,7 +4460,7 @@ function SettingsSidebar({
|
||||
/>
|
||||
</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
|
||||
type="color"
|
||||
value={profile.weekendColorSun || '#dc2626'}
|
||||
@ -4455,25 +4487,25 @@ function SettingsSidebar({
|
||||
|
||||
<div style={{ marginBottom: '1rem', display: 'flex', gap: '16px' }}>
|
||||
<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
|
||||
type="number"
|
||||
min="1"
|
||||
max="120"
|
||||
value={profile.focusTimerDuration || 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 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
|
||||
type="number"
|
||||
min="1"
|
||||
max="60"
|
||||
value={profile.focusBreakDuration || 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>
|
||||
@ -4529,8 +4561,8 @@ function SettingsSidebar({
|
||||
onChange={(e) => handleUpdateCalendar(conn.id, cal.id, { selected: e.target.checked })}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<span style={{ fontSize: '0.9rem', color: '#555' }}>
|
||||
{cal.title} {cal.isPrimary && <span style={{ fontSize: '0.8em', color: '#888' }}>(Primary)</span>}
|
||||
<span style={{ fontSize: '0.9rem', color: 'var(--weekly-text)' }}>
|
||||
{cal.title} {cal.isPrimary && <span style={{ fontSize: '0.8em', color: 'var(--weekly-text-light)' }}>(Primary)</span>}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user