[Enhancement] / UI Redesign Screen: Reminders

🔔 Feature Update: Reminders Screen Redesign — Living Positively

**Type:** Enhancement / UI Redesign
**Screen:** Reminders (`/screens/RemindersScreen`)
**Priority:** High
**Assignees:** Frontend Team

## 📋 Overview
We've finalized the updated design and functionality spec for the Reminders screen. Please update the existing implementation to match all requirements below.

**CRITICAL DESIGN NOTE:** Do NOT introduce new hardcoded colors. Use the existing Living Positively (LP) color tokens from our theme file.

---

## ✅ Acceptance Criteria

### 1. Header — Title
* Display the screen title as: **Remind** (Purple) + **Me** (Green).
* Must use the global app color tokens for consistency.

### 2. App Reminder — "A Word of Resilience" (First in list, OPT-IN)
* The first reminder must be the LP app reminder, displayed before all others.
* **Default State:** ✅ Enabled (Opt-in — user must actively disable it).
* **Default Time:** `08:00`.
* **Strings (EN):** Title: "A Word of Resilience" | Subtitle: "A gentle daily spark of comfort and hope, lighting your way"
* **Strings (HE):** Title: "מסר חיזוק יומי" | Subtitle: "ניצוץ יומי עדין של תקווה ונחמה, להאיר לך את הדרך"
* **Visual tag:** Small gradient badge labeled **LP** (purple → green).
* 🔄 **DYNAMIC CONTENT REQUIREMENT:** The actual content (push notification body) of this specific reminder must change every day. The system should randomly pull a sentence from our existing pool/database of resilience quotes each day.

### 3. Quick Reminders List
* All other reminders default to **disabled** (user opts in).
* Each has an independent toggle.
*
Click to view the exact 12 quick reminders data (Emoji + EN + HE)

1. 💪🏻 Exercise / פעילות גופנית
2. 💊 Take Pills / לקחת תרופות
3. 🧘🏻‍♀️ Meditate / מדיטציה
4. 💧 Drink Water / לשתות מים
5. 📖 Read / לקרוא
6. 🌙 Sleep / לישון
7. 📓 Write in Journal / לכתוב ביומן
8. 🤸 Stretch / מתיחות
9. 🌬️ Breathe / נשימות
10. 🎵 Play Music / לנגן
11. 🤝 Connect with a Friend / לדבר או לבלות עם חבר.ה

### 4. Multiple Reminders + Per-Reminder Time
* Each reminder (including the app reminder) has its own independent time picker.
* Time picker is revealed on tap of the current time display.
* Pressing **Enter** / confirming time advances UX flow naturally (no extra taps).
* *UX Goal:* Minimum interaction cost: toggle ON → tap time → set time.

### 5. Custom Reminder Creation
* Add a "Choose or Create Your Own Reminder" section below the quick reminders, separated by a visible dashed divider.
* Fields required:
* **Emoji input** (short text field, max 2 chars).
* **Label** (free text, supports Hebrew RTL).
* **Time** (via clock picker).
* Pressing **Enter** on the label field submits the form.
* Must support creating *multiple* custom reminders.
* Must display a remove (`✕`) button and be toggleable (on/off).

### 6. Interactive Clock / Time Picker
* Implement an interactive analog clock UI.
* Automatically transition from hour selection to minute selection.
* **24h mode:** Inner ring = hours 12–23, outer ring = 0–11.
* **AM/PM mode:** Standard 12-hour display with AM/PM toggle buttons.
* Display selected time digitally above the clock (HH:MM). Clicking HH/MM switches selection modes.

### 7. Global Settings (Top Bar)
* **24h / AM-PM Toggle:** Switches format globally (affects all displays and the clock picker).
* **RTL / Language Support:** Language toggle (EN / עב). All UI direction switches to `rtl` when Hebrew is active.

### 8. Active Reminders Summary
* A summary card (green-tinted border/background based on theme) at the bottom lists all *currently enabled* reminders with their scheduled times.
* Only visible when at least one reminder is active.

---

## 🎨 Design Notes & Guidelines
* **DO NOT introduce new brand colors.** Always map to our existing theme system.
* **Section headers:** small caps, letter-spacing, subdued purple.
* **Enabled reminder cards:** subtle purple-tinted background + purple border.
* **Disabled reminder cards:** neutral/transparent background.

---

## 🔗 Reference & Source of Truth
* **Interactive Example:** [View Claude Prototype here](https://claude.ai/public/artifacts/3c959beb-10a7-468d-82d7-4c666d6321dd)
* ⚠️ **IMPORTANT DISCLAIMER:** The prototype above is ONLY an example for functional behavior, interactions, and general layout. It is **NOT** a pixel-perfect design spec. You must adapt this layout to use the **current app's exact styling, typography, and color tokens**.

---

## 🧪 Testing Checklist
- [ ] App reminder is ON by default (`08:00`), all others OFF.
- [ ] App reminder successfully pulls a different quote daily from the database.
- [ ] All 11 quick reminders present with correct emoji + bilingual labels.
- [ ] 🎵 "Play Music" and 🤝 "Connect with a Friend" are included.
- [ ] Time picker works in both 24h and AM/PM modes; transitions hour → minute automatically.
- [ ] Custom reminders can be added (Enter key submits), toggled, and removed.
- [ ] RTL layout aligns correctly in Hebrew mode.
- [ ] Active reminders summary appears ONLY when reminders are enabled.
- [ ] UI uses existing app color tokens (no hardcoded prototype colors).