fix: redesign add-event modal — vertical layout, toggle switch, unified time picker

2026-04-22 19:50:35 +00:00
parent 1d330f0f41
commit b797d0d660
1 changed files with 156 additions and 110 deletions
--- a/components/CalendarTab.tsx
+++ b/components/CalendarTab.tsx
@@ -44,9 +44,6 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;

  const selectedCal = CALENDAR_OPTIONS.find(c => c.owner === owner) || CALENDAR_OPTIONS[0]

-  const dateObj = date ? new Date(date + 'T00:00:00') : new Date()
-  const dateLabel = dateObj.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'long' })
-
  const save = async () => {
    if (!title.trim()) { setError('Введите название'); return }
    setSaving(true); setError('')
@@ -59,148 +56,197 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
    } catch (e: any) { setError(e.message || 'Ошибка сохранения'); setSaving(false) }
  }

-  const fieldInputStyle: React.CSSProperties = {
-    padding: '14px 18px', borderRadius: 14, width: '100%',
-    background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)',
-    color: 'var(--text-primary)', fontSize: 15, outline: 'none', fontFamily: 'inherit',
-  }
-
-  const fieldLabelStyle: React.CSSProperties = {
-    fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600,
-    marginBottom: 8, display: 'block', textTransform: 'uppercase', letterSpacing: '0.08em',
-  }
-
  return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div style={{
+      position: 'fixed', inset: 0,
+      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)',
+      zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
+      padding: 20,
+    }} onClick={onClose}>
      <div style={{
        background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
        border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
-        width: 460, maxWidth: '95vw', overflow: 'hidden',
+        width: 420, maxWidth: '95vw', overflow: 'hidden',
        boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
      }} onClick={e => e.stopPropagation()}>

-        {/* Colored header */}
+        {/* Header */}
        <div style={{
-          background: `linear-gradient(135deg, ${selectedCal.color}20, ${selectedCal.color}08)`,
-          borderBottom: `1px solid ${selectedCal.color}15`,
-          padding: '28px 32px 22px',
-          transition: 'background 0.3s ease',
+          padding: '24px 28px 20px',
+          borderBottom: '1px solid rgba(255,255,255,0.05)',
+          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-              <div style={{
-                width: 44, height: 44, borderRadius: 14,
-                background: `${selectedCal.color}25`,
-                border: `1px solid ${selectedCal.color}30`,
+          <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
+            Новое событие
+          </span>
+          <button onClick={onClose} style={{
+            width: 32, height: 32, borderRadius: 10,
+            background: 'rgba(255,255,255,0.05)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
-                boxShadow: `0 0 20px ${selectedCal.color}15`,
+            color: 'var(--text-secondary)',
          }}>
-                <Plus size={22} color={selectedCal.color} />
-              </div>
-              <div>
-                <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>Новое событие</div>
-                <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2, textTransform: 'capitalize' }}>{dateLabel}</div>
-              </div>
-            </div>
-            <button onClick={onClose} style={{ color: 'var(--text-secondary)', padding: 8, borderRadius: 12, background: 'rgba(255,255,255,0.05)' }}>
-              <X size={18} />
+            <X size={16} />
          </button>
        </div>
-        </div>

        {/* Body */}
-        <div style={{ padding: '24px 32px 30px', display: 'flex', flexDirection: 'column', gap: 18 }}>
+        <div style={{ padding: '20px 28px 28px' }}>

          {/* Calendar selector */}
-          <div>
-            <label style={fieldLabelStyle}>Календарь</label>
-            <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
            {CALENDAR_OPTIONS.map(cal => {
-                const isSelected = owner === cal.owner
+              const sel = owner === cal.owner
              return (
                <button key={cal.owner} onClick={() => setOwner(cal.owner)} style={{
-                    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                    padding: '12px 16px', borderRadius: 14,
-                    background: isSelected ? `${cal.color}18` : 'rgba(255,255,255,0.03)',
-                    border: `1px solid ${isSelected ? cal.color + '35' : 'rgba(255,255,255,0.06)'}`,
-                    transition: 'all 0.25s ease',
+                  flex: 1, padding: '11px 0', borderRadius: 12,
+                  background: sel ? `${cal.color}15` : 'rgba(255,255,255,0.03)',
+                  border: `1.5px solid ${sel ? cal.color + '40' : 'rgba(255,255,255,0.06)'}`,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                  transition: 'all 0.2s ease',
                }}>
                  <div style={{
-                      width: 8, height: 8, borderRadius: '50%',
-                      background: cal.color,
-                      boxShadow: isSelected ? `0 0 8px ${cal.color}60` : 'none',
+                    width: 10, height: 10, borderRadius: '50%',
+                    background: sel ? cal.color : 'rgba(255,255,255,0.15)',
+                    boxShadow: sel ? `0 0 8px ${cal.color}50` : 'none',
+                    transition: 'all 0.2s ease',
                  }} />
                  <span style={{
-                      fontSize: 14, fontWeight: isSelected ? 600 : 500,
-                      color: isSelected ? cal.color : 'var(--text-secondary)',
-                    }}>
-                      {cal.name}
-                    </span>
+                    fontSize: 14, fontWeight: sel ? 600 : 400,
+                    color: sel ? cal.color : 'var(--text-secondary)',
+                  }}>{cal.name}</span>
                </button>
              )
            })}
          </div>
-          </div>

          {/* Title */}
-          <div>
-            <label style={fieldLabelStyle}>Название</label>
-            <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Что запланировано?" autoFocus style={fieldInputStyle} />
+          <input
+            value={title} onChange={e => setTitle(e.target.value)}
+            placeholder="Название события"
+            autoFocus
+            style={{
+              width: '100%', padding: '15px 18px', borderRadius: 14,
+              background: 'rgba(255,255,255,0.04)',
+              border: '1px solid rgba(255,255,255,0.07)',
+              color: 'var(--text-primary)', fontSize: 16, fontWeight: 500,
+              outline: 'none', fontFamily: 'inherit',
+              marginBottom: 16,
+            }}
+          />
+
+          {/* Date */}
+          <div style={{ marginBottom: 16 }}>
+            <div style={{
+              fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600,
+              textTransform: 'uppercase', letterSpacing: '0.08em',
+              marginBottom: 8,
+            }}>Дата</div>
+            <input
+              type="date" value={date} onChange={e => setDate(e.target.value)}
+              style={{
+                width: '100%', padding: '14px 18px', borderRadius: 14,
+                background: 'rgba(255,255,255,0.04)',
+                border: '1px solid rgba(255,255,255,0.07)',
+                color: 'var(--text-primary)', fontSize: 15,
+                outline: 'none', fontFamily: 'inherit',
+              }}
+            />
          </div>

-          {/* Date + All day */}
-          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
-            <div style={{ flex: 1 }}>
-              <label style={fieldLabelStyle}>Дата</label>
-              <input type="date" value={date} onChange={e => setDate(e.target.value)} style={fieldInputStyle} />
-            </div>
+          {/* All day toggle */}
          <button onClick={() => setAllDay(v => !v)} style={{
-              padding: '14px 18px', borderRadius: 14, whiteSpace: 'nowrap',
-              background: allDay ? `${selectedCal.color}12` : 'rgba(255,255,255,0.03)',
+            width: '100%', padding: '13px 18px', borderRadius: 14,
+            background: allDay ? `${selectedCal.color}10` : 'rgba(255,255,255,0.025)',
            border: `1px solid ${allDay ? selectedCal.color + '25' : 'rgba(255,255,255,0.06)'}`,
-              color: allDay ? selectedCal.color : 'var(--text-secondary)',
-              fontSize: 13, fontWeight: 600, transition: 'all 0.25s ease',
+            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            marginBottom: 16, transition: 'all 0.2s ease',
          }}>
-              {allDay ? '✓ Весь день' : 'Весь день'}
+            <span style={{
+              fontSize: 14, fontWeight: 500,
+              color: allDay ? selectedCal.color : 'var(--text-secondary)',
+            }}>Весь день</span>
+            <div style={{
+              width: 40, height: 22, borderRadius: 11,
+              background: allDay ? selectedCal.color : 'rgba(255,255,255,0.1)',
+              position: 'relative', transition: 'background 0.2s ease',
+            }}>
+              <div style={{
+                width: 18, height: 18, borderRadius: '50%',
+                background: '#fff', position: 'absolute', top: 2,
+                left: allDay ? 20 : 2,
+                transition: 'left 0.2s ease',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+              }} />
+            </div>
          </button>
-          </div>

-          {/* Time */}
+          {/* Time pickers */}
          {!allDay && (
-            <div>
-              <label style={fieldLabelStyle}>Время</label>
-              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-                <div style={{ flex: 1, position: 'relative' }}>
-                  <Clock size={14} color="var(--text-tertiary)" style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
-                  <input type="time" value={startTime} onChange={e => setStartTime(e.target.value)} style={{ ...fieldInputStyle, paddingLeft: 36 }} />
-                </div>
-                <div style={{ width: 20, height: 2, borderRadius: 1, background: 'rgba(255,255,255,0.12)', flexShrink: 0 }} />
-                <div style={{ flex: 1, position: 'relative' }}>
-                  <Clock size={14} color="var(--text-tertiary)" style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
-                  <input type="time" value={endTime} onChange={e => setEndTime(e.target.value)} style={{ ...fieldInputStyle, paddingLeft: 36 }} />
-                </div>
+            <div style={{ marginBottom: 16 }}>
+              <div style={{
+                fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600,
+                textTransform: 'uppercase', letterSpacing: '0.08em',
+                marginBottom: 8,
+              }}>Время</div>
+              <div style={{
+                display: 'flex', alignItems: 'center',
+                background: 'rgba(255,255,255,0.04)',
+                border: '1px solid rgba(255,255,255,0.07)',
+                borderRadius: 14, overflow: 'hidden',
+              }}>
+                <input
+                  type="time" value={startTime} onChange={e => setStartTime(e.target.value)}
+                  style={{
+                    flex: 1, padding: '14px 18px', border: 'none',
+                    background: 'transparent', color: 'var(--text-primary)',
+                    fontSize: 16, fontWeight: 600, fontFamily: 'inherit',
+                    outline: 'none', textAlign: 'center',
+                  }}
+                />
+                <div style={{
+                  padding: '0 12px', color: 'var(--text-tertiary)',
+                  fontSize: 13, fontWeight: 500, flexShrink: 0,
+                  borderLeft: '1px solid rgba(255,255,255,0.06)',
+                  borderRight: '1px solid rgba(255,255,255,0.06)',
+                  height: '100%', display: 'flex', alignItems: 'center',
+                  background: 'rgba(255,255,255,0.02)',
+                }}>до</div>
+                <input
+                  type="time" value={endTime} onChange={e => setEndTime(e.target.value)}
+                  style={{
+                    flex: 1, padding: '14px 18px', border: 'none',
+                    background: 'transparent', color: 'var(--text-primary)',
+                    fontSize: 16, fontWeight: 600, fontFamily: 'inherit',
+                    outline: 'none', textAlign: 'center',
+                  }}
+                />
              </div>
            </div>
          )}

+          {/* Error */}
          {error && (
-            <div style={{ color: '#f87171', fontSize: 13, padding: '10px 14px', borderRadius: 12, background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.12)' }}>
-              {error}
-            </div>
+            <div style={{
+              padding: '10px 14px', borderRadius: 12, marginBottom: 16,
+              background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.12)',
+              color: '#f87171', fontSize: 13, fontWeight: 500,
+            }}>{error}</div>
          )}

          {/* Submit */}
          <button onClick={save} disabled={saving} style={{
-            padding: '16px', borderRadius: 16, marginTop: 2,
-            background: saving ? `${selectedCal.color}15` : `linear-gradient(135deg, ${selectedCal.color}50, ${selectedCal.color}35)`,
-            border: `1px solid ${selectedCal.color}40`,
-            color: selectedCal.color === '#ec4899' ? '#f9a8d4' : '#a5b4fc',
+            width: '100%', padding: '15px', borderRadius: 14,
+            background: saving
+              ? 'rgba(255,255,255,0.04)'
+              : `linear-gradient(135deg, ${selectedCal.color}45, ${selectedCal.color}30)`,
+            border: `1px solid ${selectedCal.color}35`,
+            color: selectedCal.color === '#ec4899' ? '#f9a8d4' : '#c7d2fe',
            fontSize: 15, fontWeight: 700,
            cursor: saving ? 'default' : 'pointer',
-            transition: 'all 0.3s ease',
-            boxShadow: saving ? 'none' : `0 4px 20px ${selectedCal.color}20`,
+            transition: 'all 0.25s ease',
+            boxShadow: saving ? 'none' : `0 4px 16px ${selectedCal.color}18`,
          }}>
-            {saving ? 'Сохранение...' : 'Создать событие'}
+            {saving ? 'Сохранение...' : 'Создать'}
          </button>
        </div>
      </div>