final notif changes

src/pages/SettingsPage.tsx

@@ -12,6 +12,7 @@ import {
   getSavedReminderTime, isReminderEnabled,
   enableReminder, disableReminder, reenableReminder,
 } from '../hooks/useReminder'
+import ClockTimePicker from '../components/ClockTimePicker'
 
 const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
 const MAX_BG_HISTORY = 3
@@ -933,25 +934,16 @@ export default function SettingsPage() {
 
       {/* Daily Reminder Modal */}
       {showReminderModal && (
-        <div className="confirm-modal-overlay" onClick={() => !reminderSaving && setShowReminderModal(false)}>
-          <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
-            <div style={{ fontSize: '2rem', textAlign: 'center', marginBottom: '0.5rem' }}>🔔</div>
-            <h3 className="confirm-modal-title">
+        <div className="confirm-modal-overlay reminder-modal-overlay" onClick={() => !reminderSaving && setShowReminderModal(false)}>
+          <div className="confirm-modal reminder-modal" onClick={(e) => e.stopPropagation()}>
+            <div style={{ fontSize: '1.75rem', textAlign: 'center', marginBottom: '0.25rem' }}>🔔</div>
+            <h3 className="edit-modal-title" style={{ marginBottom: '0.5rem' }}>
               {reminderTime ? 'Edit Reminder' : 'Set Daily Reminder'}
             </h3>
-            <p className="confirm-modal-desc">
-              You'll get a notification at this time each day if you haven't written yet.
-              {' '}The reminder stays even if you log out and back in.
-            </p>
-
-            <label className="confirm-modal-label">Reminder time</label>
-            <input
-              type="time"
-              className="confirm-modal-input"
+            <ClockTimePicker
               value={reminderPickedTime}
-              onChange={(e) => setReminderPickedTime(e.target.value)}
+              onChange={setReminderPickedTime}
               disabled={reminderSaving}
-              autoFocus
             />
 
             {reminderError && (
@@ -966,17 +958,7 @@ export default function SettingsPage() {
               </p>
             )}
 
-            <p style={{
-              fontSize: '0.75rem',
-              color: 'var(--color-text-muted)',
-              marginTop: '0.75rem',
-              textAlign: 'center',
-              lineHeight: 1.5,
-            }}>
-              Works best when the app is installed on your home screen.
-            </p>
-
-            <div className="confirm-modal-actions" style={{ marginTop: '1rem' }}>
+            <div className="confirm-modal-actions" style={{ marginTop: '0.75rem' }}>
               <button
                 type="button"
                 className="confirm-modal-cancel"