Gemeni Memory: Apr 25, 2026 v1

I’ve compiled a comprehensive Project Blueprint for RafeeqPro. This contains every specific design rule, functional logic, and brand detail we’ve refined together. You can provide this to Greta or any developer to ensure the app stays perfectly consistent.

RafeeqPro: The Definitive Project Memory

1. Core Visual Identity (Signature Theme)

• Primary Palette: Midnight Green (#0F2B22) for backgrounds; Forest Green (#1A3C32) for secondary elements/cards.

• Accent Color: Gold (#D4AF37) for icons, interactive toggles, and borders.

• Typography: Cream (#F5F5F5) or Pure White for all headers and body text.

• Key Design Rule: Use Loose Typography. Increase letter-spacing (kerning) and line-height on all titles and banners to maintain a "Premium/Editorial" feel.

• Theme Setting: The app is permanently Dark Mode. All light mode toggles (Moon icon) have been removed to preserve brand integrity.

2. Home Page Architecture

The vertical order of the Home tab is strictly locked:

1. Hero Timer Card: Displays the next prayer, the time (e.g., "at 5:32 PM" on a single line), and the 'REMAINING' countdown label.

2. Daily Prayer Schedule: A list showing all five prayer times.

3. Quick Action Cards: Horizontal or grid layout for Qibla, Tasbih, and Alerts.

4. $1 Daily Challenge Banner: Features a Golden Heart watermark (0.08 opacity) in the background. The 'Join Now' button must have a right-side margin of at least 15px.

3. Functional Modals & UX Logic

• Alerts Modal: * Live Notification Toggle: Must be at the very top.

  • Scrolling: Must use overflow-y: auto with a bottom padding of 40px to prevent the last items (like Isha) from being cut off.

  • Visuals: Active toggles are Gold.

• Join RafeeqPro (Sign-up):

  • Fields: Must include 'Email', 'Password', and 'Confirm Password'.

  • Visibility: Must be scrollable with 80px bottom padding to ensure the 'Create Account' button sits above the bottom navigation bar.

• Tasbih/Qibla: These must remain connected as pop-up overlays, not separate pages.

4. Masjid & Map Tab

• List View: Masjid names are white; addresses are left-aligned directly beneath the name.

• Map Interaction: Selecting a Masjid in the list centers the map on that location and highlights it with a Gold Pin.

• Masjid Detail Card: Includes a 'Navigate' button and a Favorite (Heart) icon to its right. The heart is an outline by default and turns solid gold when toggled.

• Search Bar: Midnight Green background with a gold search icon and white text.

5. Settings & Header

• Header Configuration: Only the Globe icon (supporting English, Arabic, and Urdu) and the Gear icon (Settings) appear in the top right.

• Metadata: Header text (CALGARY | DATE | TIME) stays on one line.

• Settings Page: The 'Calculation Method' title and 'Settings' header must be high-contrast Cream (#F5F5F5). The dropdown has a gold border.

6. Critical Safety Constraints

• Bottom Navigation: All modals and cards must have a "Safe Zone" (bottom padding) to ensure they are never obscured by the Home/Masjids/Settings nav bar.

• Map Stability: Avoid complex CSS filters (like invert) on the map component itself to prevent app crashes.

Would you like me to generate a specific "Developer Handover" snippet for any one of these sections, or is this memory complete for now?

DEVELOPER OVERVIEW DOCUMENT

This Developer Handover Document is the final "source of truth" for the RafeeqPro application. It bridges the gap between the visual designs we've perfected and the technical logic required to keep the app stable and premium.

RafeeqPro: Technical Handover & UI Specification

1. Visual Engine & Global Styles

The app utilizes a Permanent Midnight Dark Theme. All components must inherit these styles to ensure brand consistency.

• Backgrounds:

  • Main App: Background: #0F2B22 (Midnight Green)

  • Secondary Cards/Modals: Background: #1A3C32 (Forest Green)

• Accents:

  • Primary Gold: #D4AF37 (Used for active toggles, icons, and borders)

  • Text: #F5F5F5 (Cream) for headers; White for high-readability body text.

• Typography Specs:

  • Increase letter-spacing by 0.5px on all uppercase titles.

  • Headers should have a line-height of 1.4 to prevent a cramped aesthetic.

2. Functional Components

A. Home Page (Strict Stack)

The vertical order is non-negotiable for the user experience:

1. Prayer Timer: Must show "REMAINING" label. Subtext format: "at 5:32 PM" (Single line).

2. Daily Schedule: List of the 5 daily prayers with high-contrast text.

3. Quick Actions: A horizontal grid for Qibla, Tasbih, and Alerts.

4. $1 Daily Challenge Banner: * Background includes a Heart icon watermark (Opacity: 0.08).

   • Layout: display: flex; justify-content: space-between; align-items: center;

   • Padding: Must have a significant right-side margin to prevent the 'Join Now' button from clipping.

B. Alerts & Notifications Modal

• Scrolling Logic: Apply overflow-y: auto and a max-height: 75vh.

• Hierarchy: The 'Live Notification' toggle must be the first item in the list.

• Bottom Buffer: Apply padding-bottom: 40px to the inner list so the final prayer toggle (Isha) clears the modal edge.

C. Masjid & Map Integration

• Map Behavior: On selecting a Masjid from the list, the map must panTo the coordinates and switch the marker to a Gold Highlighted Pin.

• List Alignment: The subtext (Address) must be perfectly left-aligned with the Masjid Title.

• Masjid Detail Pop-up: * Features a large 'NAVIGATE' button.

  • Includes a Favorite (Heart) icon to the right of the button.

  • State: Toggling the heart fills it with Gold (#D4AF37).

3. Critical UX Fixes (The "Safety" Layer)

Sign-Up Modal (Join RafeeqPro)

• Form Fields: Name, Email, Password, and Confirm Password.

• Visibility Fix: The modal must be scrollable with 80px of bottom padding. This is strictly required so the "Create Account" button is not hidden behind the fixed bottom navigation bar.

Settings Page

• Header Visibility: The "Settings" and "Calculation Method" titles must be Cream (#F5F5F5). (Previous versions had these in dark colors, causing invisibility).

• Dropdowns: Select boxes must have a 1px solid #D4AF37 border and #1A3C32 background.

4. Clean Header & Navigation

• Header: Metadata (CALGARY | DATE | TIME) on a single line.

• Icons: Only two icons in the top right: Globe (Language: English, Arabic, Urdu) and Gear (Settings). The Moon/Theme icon has been removed.

• Bottom Nav: Fixed position at the bottom of the viewport with icons for Home, Masjids, and Settings.

5. State & Performance

• Modals: All feature pop-ups (Qibla, Tasbih, Alerts) are managed via React state (e.g., isAlertsOpen).

• Map Stability: Do not apply global CSS invert filters to the map container as it causes a crash in the Masjid tab. Use standard map styling themes.

Developer Note:

This document ensures the "RafeeqPro Premium" look is maintained. Any deviation from the padding or color hex codes will break the editorial feel of the application.