From bed32863da553b07a8f06f5ae75a938e18c323b9 Mon Sep 17 00:00:00 2001 From: Jeet Debnath Date: Wed, 4 Mar 2026 11:49:45 +0530 Subject: [PATCH] ui enhance --- .env.example | 4 + .github/copilot-instructions.md | 176 +- .../brainstorming-session-2025-03-04.md | 49 + index.html | 2 +- project-context.md | 67 + src/App.css | 1695 ++++------------- src/components/BottomNav.tsx | 43 +- src/index.css | 50 +- src/pages/HistoryPage.tsx | 30 +- src/pages/HomePage.tsx | 49 +- src/pages/SettingsPage.tsx | 14 +- 11 files changed, 731 insertions(+), 1448 deletions(-) create mode 100644 _bmad-output/brainstorming/brainstorming-session-2025-03-04.md create mode 100644 project-context.md diff --git a/.env.example b/.env.example index 0174015..8268420 100644 --- a/.env.example +++ b/.env.example @@ -8,3 +8,7 @@ VITE_FIREBASE_PROJECT_ID= VITE_FIREBASE_STORAGE_BUCKET= VITE_FIREBASE_MESSAGING_SENDER_ID= VITE_FIREBASE_APP_ID= +# Optional: Firestore Emulator (for local development) +# Uncomment and set these if running Firebase emulator locally +# VITE_FIRESTORE_EMULATOR_HOST=localhost:8080 +# VITE_FIREBASE_EMULATOR_ENABLED=true \ No newline at end of file diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 3e62052..8ba127b 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,4 +1,5 @@ + # BMAD Method — Project Instructions ## Project Configuration @@ -8,9 +9,9 @@ - **Communication Language**: English - **Document Output Language**: English - **User Skill Level**: intermediate -- **Output Folder**: {project-root}/_bmad-output -- **Planning Artifacts**: {project-root}/_bmad-output/planning-artifacts -- **Implementation Artifacts**: {project-root}/_bmad-output/implementation-artifacts +- **Output Folder**: {project-root}/\_bmad-output +- **Planning Artifacts**: {project-root}/\_bmad-output/planning-artifacts +- **Implementation Artifacts**: {project-root}/\_bmad-output/implementation-artifacts - **Project Knowledge**: {project-root}/docs ## BMAD Runtime Structure @@ -39,18 +40,18 @@ ## Available Agents -| Agent | Persona | Title | Capabilities | -|---|---|---|---| -| bmad-master | BMad Master | BMad Master Executor, Knowledge Custodian, and Workflow Orchestrator | runtime resource management, workflow orchestration, task execution, knowledge custodian | -| analyst | Mary | Business Analyst | market research, competitive analysis, requirements elicitation, domain expertise | -| architect | Winston | Architect | distributed systems, cloud infrastructure, API design, scalable patterns | -| dev | Amelia | Developer Agent | story execution, test-driven development, code implementation | -| pm | John | Product Manager | PRD creation, requirements discovery, stakeholder alignment, user interviews | -| qa | Quinn | QA Engineer | test automation, API testing, E2E testing, coverage analysis | -| quick-flow-solo-dev | Barry | Quick Flow Solo Dev | rapid spec creation, lean implementation, minimum ceremony | -| sm | Bob | Scrum Master | sprint planning, story preparation, agile ceremonies, backlog management | -| tech-writer | Paige | Technical Writer | documentation, Mermaid diagrams, standards compliance, concept explanation | -| ux-designer | Sally | UX Designer | user research, interaction design, UI patterns, experience strategy | +| Agent | Persona | Title | Capabilities | +| ------------------- | ----------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | +| bmad-master | BMad Master | BMad Master Executor, Knowledge Custodian, and Workflow Orchestrator | runtime resource management, workflow orchestration, task execution, knowledge custodian | +| analyst | Mary | Business Analyst | market research, competitive analysis, requirements elicitation, domain expertise | +| architect | Winston | Architect | distributed systems, cloud infrastructure, API design, scalable patterns | +| dev | Amelia | Developer Agent | story execution, test-driven development, code implementation | +| pm | John | Product Manager | PRD creation, requirements discovery, stakeholder alignment, user interviews | +| qa | Quinn | QA Engineer | test automation, API testing, E2E testing, coverage analysis | +| quick-flow-solo-dev | Barry | Quick Flow Solo Dev | rapid spec creation, lean implementation, minimum ceremony | +| sm | Bob | Scrum Master | sprint planning, story preparation, agile ceremonies, backlog management | +| tech-writer | Paige | Technical Writer | documentation, Mermaid diagrams, standards compliance, concept explanation | +| ux-designer | Sally | UX Designer | user research, interaction design, UI patterns, experience strategy | ## Slash Commands @@ -58,59 +59,104 @@ When the user's message starts with a `/bmad-` command (with or without addition ### Workflow Commands -| Command | Action | -|---|---| -| `/bmad-help` | Load and follow `_bmad/core/tasks/help.md` | -| `/bmad-brainstorming` | Load and follow `_bmad/core/workflows/brainstorming/workflow.md` | -| `/bmad-party-mode` | Load and follow `_bmad/core/workflows/party-mode/workflow.md` | -| `/bmad-bmm-create-product-brief` | Load and follow `_bmad/bmm/workflows/1-analysis/create-product-brief/workflow.md` | -| `/bmad-bmm-market-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-market-research.md` | -| `/bmad-bmm-domain-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-domain-research.md` | -| `/bmad-bmm-technical-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-technical-research.md` | -| `/bmad-bmm-create-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-create-prd.md` | -| `/bmad-bmm-edit-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-edit-prd.md` | -| `/bmad-bmm-validate-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-validate-prd.md` | -| `/bmad-bmm-create-ux-design` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-ux-design/workflow.md` | -| `/bmad-bmm-create-architecture` | Load and follow `_bmad/bmm/workflows/3-solutioning/create-architecture/workflow.md` | -| `/bmad-bmm-create-epics-and-stories` | Load and follow `_bmad/bmm/workflows/3-solutioning/create-epics-and-stories/workflow.md` | -| `/bmad-bmm-check-implementation-readiness` | Load and follow `_bmad/bmm/workflows/3-solutioning/check-implementation-readiness/workflow.md` | -| `/bmad-bmm-sprint-planning` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/sprint-planning/workflow.yaml` | -| `/bmad-bmm-sprint-status` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/sprint-status/workflow.yaml` | -| `/bmad-bmm-create-story` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/create-story/workflow.yaml` | -| `/bmad-bmm-dev-story` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/dev-story/workflow.yaml` | -| `/bmad-bmm-code-review` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/code-review/workflow.yaml` | -| `/bmad-bmm-retrospective` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/retrospective/workflow.yaml` | -| `/bmad-bmm-correct-course` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml` | -| `/bmad-bmm-qa-automate` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/qa/automate/workflow.yaml` | -| `/bmad-bmm-quick-spec` | Load and follow `_bmad/bmm/workflows/bmad-quick-flow/quick-spec/workflow.md` | -| `/bmad-bmm-quick-dev` | Load and follow `_bmad/bmm/workflows/bmad-quick-flow/quick-dev/workflow.md` | -| `/bmad-bmm-document-project` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/document-project/workflow.yaml` | -| `/bmad-bmm-generate-project-context` | Load and follow `_bmad/bmm/workflows/generate-project-context/workflow.md` | -| `/bmad-index-docs` | Load and execute `_bmad/core/tasks/index-docs.xml` | -| `/bmad-shard-doc` | Load and execute `_bmad/core/tasks/shard-doc.xml` | -| `/bmad-editorial-review-prose` | Load and execute `_bmad/core/tasks/editorial-review-prose.xml` | -| `/bmad-editorial-review-structure` | Load and execute `_bmad/core/tasks/editorial-review-structure.xml` | -| `/bmad-review-adversarial-general` | Load and execute `_bmad/core/tasks/review-adversarial-general.xml` | -| `/bmad-bmm-write-document` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Write Document (WD) | -| `/bmad-bmm-update-standards` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Update Standards (US) | -| `/bmad-bmm-mermaid-generate` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Mermaid Generate (MG) | -| `/bmad-bmm-validate-document` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Validate Document (VD) | -| `/bmad-bmm-explain-concept` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Explain Concept (EC) | +| Command | Action | +| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `/bmad-help` | Load and follow `_bmad/core/tasks/help.md` | +| `/bmad-brainstorming` | Load and follow `_bmad/core/workflows/brainstorming/workflow.md` | +| `/bmad-party-mode` | Load and follow `_bmad/core/workflows/party-mode/workflow.md` | +| `/bmad-bmm-create-product-brief` | Load and follow `_bmad/bmm/workflows/1-analysis/create-product-brief/workflow.md` | +| `/bmad-bmm-market-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-market-research.md` | +| `/bmad-bmm-domain-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-domain-research.md` | +| `/bmad-bmm-technical-research` | Load and follow `_bmad/bmm/workflows/1-analysis/research/workflow-technical-research.md` | +| `/bmad-bmm-create-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-create-prd.md` | +| `/bmad-bmm-edit-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-edit-prd.md` | +| `/bmad-bmm-validate-prd` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-prd/workflow-validate-prd.md` | +| `/bmad-bmm-create-ux-design` | Load and follow `_bmad/bmm/workflows/2-plan-workflows/create-ux-design/workflow.md` | +| `/bmad-bmm-create-architecture` | Load and follow `_bmad/bmm/workflows/3-solutioning/create-architecture/workflow.md` | +| `/bmad-bmm-create-epics-and-stories` | Load and follow `_bmad/bmm/workflows/3-solutioning/create-epics-and-stories/workflow.md` | +| `/bmad-bmm-check-implementation-readiness` | Load and follow `_bmad/bmm/workflows/3-solutioning/check-implementation-readiness/workflow.md` | +| `/bmad-bmm-sprint-planning` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/sprint-planning/workflow.yaml` | +| `/bmad-bmm-sprint-status` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/sprint-status/workflow.yaml` | +| `/bmad-bmm-create-story` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/create-story/workflow.yaml` | +| `/bmad-bmm-dev-story` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/dev-story/workflow.yaml` | +| `/bmad-bmm-code-review` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/code-review/workflow.yaml` | +| `/bmad-bmm-retrospective` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/retrospective/workflow.yaml` | +| `/bmad-bmm-correct-course` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml` | +| `/bmad-bmm-qa-automate` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/qa/automate/workflow.yaml` | +| `/bmad-bmm-quick-spec` | Load and follow `_bmad/bmm/workflows/bmad-quick-flow/quick-spec/workflow.md` | +| `/bmad-bmm-quick-dev` | Load and follow `_bmad/bmm/workflows/bmad-quick-flow/quick-dev/workflow.md` | +| `/bmad-bmm-document-project` | Load `_bmad/core/tasks/workflow.xml` (engine), then execute `_bmad/bmm/workflows/document-project/workflow.yaml` | +| `/bmad-bmm-generate-project-context` | Load and follow `_bmad/bmm/workflows/generate-project-context/workflow.md` | +| `/bmad-index-docs` | Load and execute `_bmad/core/tasks/index-docs.xml` | +| `/bmad-shard-doc` | Load and execute `_bmad/core/tasks/shard-doc.xml` | +| `/bmad-editorial-review-prose` | Load and execute `_bmad/core/tasks/editorial-review-prose.xml` | +| `/bmad-editorial-review-structure` | Load and execute `_bmad/core/tasks/editorial-review-structure.xml` | +| `/bmad-review-adversarial-general` | Load and execute `_bmad/core/tasks/review-adversarial-general.xml` | +| `/bmad-bmm-write-document` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Write Document (WD) | +| `/bmad-bmm-update-standards` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Update Standards (US) | +| `/bmad-bmm-mermaid-generate` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Mermaid Generate (MG) | +| `/bmad-bmm-validate-document` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Validate Document (VD) | +| `/bmad-bmm-explain-concept` | Load `_bmad/bmm/agents/tech-writer/tech-writer.md`, activate Paige persona, execute Explain Concept (EC) | ### Agent Activator Commands -| Command | Agent File | -|---|---| -| `/bmad-bmad-master` | `_bmad/core/agents/bmad-master.md` | -| `/bmad-analyst` | `_bmad/bmm/agents/analyst.md` | -| `/bmad-architect` | `_bmad/bmm/agents/architect.md` | -| `/bmad-dev` | `_bmad/bmm/agents/dev.md` | -| `/bmad-pm` | `_bmad/bmm/agents/pm.md` | -| `/bmad-qa` | `_bmad/bmm/agents/qa.md` | -| `/bmad-quick-flow-solo-dev` | `_bmad/bmm/agents/quick-flow-solo-dev.md` | -| `/bmad-sm` | `_bmad/bmm/agents/sm.md` | -| `/bmad-tech-writer` | `_bmad/bmm/agents/tech-writer/tech-writer.md` | -| `/bmad-ux-designer` | `_bmad/bmm/agents/ux-designer.md` | +| Command | Agent File | +| --------------------------- | --------------------------------------------- | +| `/bmad-bmad-master` | `_bmad/core/agents/bmad-master.md` | +| `/bmad-analyst` | `_bmad/bmm/agents/analyst.md` | +| `/bmad-architect` | `_bmad/bmm/agents/architect.md` | +| `/bmad-dev` | `_bmad/bmm/agents/dev.md` | +| `/bmad-pm` | `_bmad/bmm/agents/pm.md` | +| `/bmad-qa` | `_bmad/bmm/agents/qa.md` | +| `/bmad-quick-flow-solo-dev` | `_bmad/bmm/agents/quick-flow-solo-dev.md` | +| `/bmad-sm` | `_bmad/bmm/agents/sm.md` | +| `/bmad-tech-writer` | `_bmad/bmm/agents/tech-writer/tech-writer.md` | +| `/bmad-ux-designer` | `_bmad/bmm/agents/ux-designer.md` | For agent commands: load the agent file, follow ALL activation instructions, display the welcome/greeting, present the numbered menu, and wait for user input. + +--- + +## Project Context Maintenance (Critical) + +**Purpose:** `project-context.md` serves as the single source of truth for the project state, implementation patterns, and active features. + +### When to Update `project-context.md` + +1. **After each feature implementation** — Update relevant sections: + - Technology stack (versions) + - Critical implementation rules (new patterns or constraints) + - File layout (new files/folders) + - Known issues or deferred work + +2. **When user announces new features** — Immediately add to the file: + - Feature description in project overview + - Any new technology or dependency + - Updated file structure (if applicable) + - New implementation rules or conventions + - Status of feature (e.g., _In Progress_, _Planned_, _Complete_) + +3. **Before starting implementation** — Ensure the file reflects current state + - Validate that all recent changes are documented + - Flag any deferred work or known blockers + - Cross-reference with current codebase + +### Format Rules + +- **Last updated:** Always update the timestamp at the bottom: `_Last updated: [YYYY-MM-DD]_` +- **Feature status markers:** Use `_Planning_`, `_In Progress_`, `_Complete)_`, `_Deferred_` +- **Keep it concise:** One-line descriptions; refer to external docs for details +- **Match codebase reality:** If the code differs from the document, the document is wrong—fix it immediately + +### Example Updates + +When user says: "Add dark mode toggle to settings" + +```markdown +| Feature | Status | Notes | +| Dark mode toggle | In Progress | Added to SettingsPage; CSS variables predefined | +``` + +When implementation is done: Update to `Complete` and add any implementation notes. + diff --git a/_bmad-output/brainstorming/brainstorming-session-2025-03-04.md b/_bmad-output/brainstorming/brainstorming-session-2025-03-04.md new file mode 100644 index 0000000..1b1021d --- /dev/null +++ b/_bmad-output/brainstorming/brainstorming-session-2025-03-04.md @@ -0,0 +1,49 @@ +--- +stepsCompleted: [1, 2] +inputDocuments: [] +session_topic: 'Grateful Journal — minimal private-first gratitude journaling app. 3 pages (main writing, calendar, profile) + Google auth. Green palette (Coolors). Responsive web, client-side encryption.' +session_goals: 'Feature and UX ideas for writing page, calendar page, profile page, and auth flow; copy and minimal UI; edge cases and trust; differentiation.' +selected_approach: 'Progressive Technique Flow' +techniques_used: ['What If Scenarios', 'Mind Mapping', 'Yes And Building', 'Decision Tree Mapping'] +ideas_generated: [] +context_file: '_bmad-output/brainstorming/brainstorming-session-2025-02-18.md' +--- + +# Brainstorming Session Results + +**Facilitator:** Jeet +**Date:** 2025-03-04 + +## Session Overview + +**Topic:** Grateful Journal — a minimal, private-first responsive writing app for gratitude and reflection. Three main pages (main writing page, calendar for previous writings, profile) plus one Google auth page. Green colour scheme from Coolors palette (#1be62c, #f1eee1, #ffffff, #cff2dc, #c3fd2f). No feeds, no algorithms; privacy by design with client-side encryption; daily use, even one sentence. + +**Goals:** Generate ideas for features, UX, and flows for the writing space, calendar, profile, and auth; minimal UI and copy; edge cases and trust; what makes it feel distinct. + +### Context Guidance + +Session context resumed from **brainstorming-session-2025-02-18.md**. Same topic and goals; frontend-first (Vite + React), then backend (Python/FastAPI); agile learning focus. + +### Session Setup + +Resumed from previous discussion. Topic and goals confirmed; ready for technique selection. + +## Technique Selection + +**Approach:** Progressive Technique Flow +**Journey Design:** Systematic development from exploration to action (aligned with Grateful Journal scope and frontend-first, agile learning). + +**Progressive Techniques:** + +- **Phase 1 - Exploration:** What If Scenarios — maximum idea generation without constraints +- **Phase 2 - Pattern Recognition:** Mind Mapping — organise ideas and find connections +- **Phase 3 - Development:** Yes And Building — refine and deepen promising concepts +- **Phase 4 - Action Planning:** Decision Tree Mapping — implementation paths and next steps (frontend-first, then backend) + +**Journey Rationale:** Broad-to-focused flow fits Grateful Journal’s scope (3 pages + auth, green UI) and your frontend-first approach; Phase 4 can target UI milestones and later backend integration. + +## Remaining procedure (project roadmap) + +- **Purpose & UI:** Website purpose decided; UI created. Next: UI changes only — **make layout responsive for all screens**. +- **Data:** Then **setup MongoDB**. +- **Backend:** Then backend in **Python**: **FastAPI**, **modular** — separate file per page and its functions; **each page has its own backend**. diff --git a/index.html b/index.html index 99b48ae..cc1751e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + diff --git a/project-context.md b/project-context.md new file mode 100644 index 0000000..3351874 --- /dev/null +++ b/project-context.md @@ -0,0 +1,67 @@ +# Project Context for AI Agents + +_This file contains critical rules and patterns that AI agents must follow when implementing code in this project. Focus on unobvious details that agents might otherwise miss._ + +--- + +## Project overview + +**Grateful Journal** — A minimal, private-first gratitude journaling web app. Three main pages (Write, History/calendar, Settings/profile) plus Google auth. No feeds or algorithms; privacy by design with client-side encryption; daily use, even one sentence. + +**User:** Jeet + +--- + +## Technology stack & versions + +| Layer | Technology | Notes | +|-----------|--------------------------|--------------------------------------------| +| Frontend | React 19, TypeScript | Vite 7 build | +| Routing | react-router-dom 7 | Routes: `/`, `/history`, `/settings`, `/login` | +| Auth | Firebase 12 | Google sign-in only | +| Styling | Plain CSS | `src/index.css` (globals), `src/App.css` (components) | +| Backend | _Planned_ Python/FastAPI | Modular: one file per page/function | +| Database | _Planned_ MongoDB | To be set up after responsive UI | + +--- + +## Critical implementation rules + +### Frontend + +- **Colour palette (Coolors):** Use CSS variables from `src/index.css`. Primary green `#1be62c`, background soft `#f1eee1`, surface `#ffffff`, accent light `#cff2dc`, accent bright `#c3fd2f`. Do not introduce new palette colours without reason. +- **Layout:** Responsive for all screens. Breakpoints: `--bp-sm` 480px, `--bp-md` 768px, `--bp-lg` 1024px, `--bp-xl` 1280px. On laptop (1024px+), page is single-screen 100vh — no vertical scroll; fonts and spacing scaled so content fits one viewport. +- **Touch targets:** Minimum 44px (`--touch-min`) on interactive elements for small screens. +- **Safe areas:** Use `env(safe-area-inset-*)` for padding where the app can sit under notches or system UI. Viewport meta includes `viewport-fit=cover`. +- **Structure:** Main app layout: page container → header + main content + fixed `BottomNav`. Content max-width `min(680px, 100%)` (or `--content-max` 720px where appropriate). + +### Backend (when implemented) + +- **Framework:** FastAPI. APIs in Python only. +- **Modularity:** Separate file per page and its functions. Each app page (write, history, settings, auth) has its own backend module; avoid one monolithic API file. +- **Database:** MongoDB. Setup comes after frontend responsive work. + +### Conventions + +- **Fonts:** Inter for UI, Playfair Display for headings/editorial, Lora for body/entry text. Loaded via Google Fonts in `index.html`. +- **Naming:** CSS uses BEM-like class names (e.g. `.journal-card`, `.journal-prompt`). Keep the same pattern for new components. +- **Build:** Fixing the current TypeScript/ESLint build errors is deferred to a later step; do not assume a clean build when adding features. + +--- + +## File layout (reference) + +``` +src/ + App.tsx, App.css # Root layout, routes, global page styles + index.css # Resets, :root vars, base typography + main.tsx + pages/ # HomePage, HistoryPage, SettingsPage, LoginPage + components/ # BottomNav, LoginCard, GoogleSignInButton, ProtectedRoute + contexts/ # AuthContext (Firebase) + lib/ # firebase.ts, firestoreService.ts +``` + +--- + +_Last updated from session context and codebase review._ diff --git a/src/App.css b/src/App.css index 1ea088c..df96a40 100644 --- a/src/App.css +++ b/src/App.css @@ -1,1512 +1,637 @@ -/* Grateful Journal – green palette. Responsive layout. */ +/* Grateful Journal – phone-first, no page scroll, fits one screen */ +/* ============================ + ROOT / LAYOUT SHELL + ============================ */ #root { - min-height: 100vh; - min-height: 100dvh; - margin: 0; - padding: 0; - overflow-x: hidden; + width: 100%; + height: 100dvh; + overflow: hidden; + display: flex; + flex-direction: column; } -/* ----- Protected route loading ----- */ +/* ============================ + PROTECTED ROUTE SPINNER + ============================ */ .protected-route__loading { - min-height: 100vh; - min-height: 100dvh; + height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; - background: var(--color-bg-soft); - color: var(--color-text-muted); + background: #f5f0e8; + color: #9ca3af; } .protected-route__spinner { - width: 32px; - height: 32px; - border: 3px solid var(--color-border); - border-top-color: var(--color-primary); + width: 28px; + height: 28px; + border: 3px solid #e5e7eb; + border-top-color: #22c55e; border-radius: 50%; - animation: login-spin 0.7s linear infinite; + animation: spin 0.7s linear infinite; } -@keyframes login-spin { - to { transform: rotate(360deg); } -} +@keyframes spin { to { transform: rotate(360deg); } } -/* ----- Login page – green accent aesthetic ----- */ +/* ============================ + LOGIN PAGE + ============================ */ .login-page { - min-height: 100vh; - min-height: 100dvh; + height: 100dvh; display: flex; align-items: center; justify-content: center; - background: linear-gradient(160deg, var(--color-bg-soft) 0%, var(--color-accent-light) 100%); - padding: clamp(0.75rem, 3vw, 1.5rem); - padding-left: max(clamp(0.75rem, 3vw, 1.5rem), env(safe-area-inset-left)); - padding-right: max(clamp(0.75rem, 3vw, 1.5rem), env(safe-area-inset-right)); + background: linear-gradient(160deg, #f5f0e8 0%, #dcfce7 100%); + padding: 1.5rem; + overflow: hidden; } .login-page__loading { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - color: var(--color-text-muted); + display: flex; flex-direction: column; align-items: center; + gap: 1rem; color: #9ca3af; } .login-page__spinner { - width: 32px; - height: 32px; - border: 3px solid var(--color-border); - border-top-color: var(--color-primary); + width: 28px; height: 28px; + border: 3px solid #e5e7eb; + border-top-color: #22c55e; border-radius: 50%; - animation: login-spin 0.7s linear infinite; + animation: spin 0.7s linear infinite; } -/* Login card – green accent */ .login-card { - background: var(--color-surface); - padding: clamp(1.5rem, 6vw, 2.75rem); - border-radius: 16px; - border-top: 4px solid var(--color-primary); - box-shadow: 0 8px 32px rgba(27, 230, 44, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04); - max-width: 400px; + background: #fff; + padding: 2rem; + border-radius: 20px; + border-top: 4px solid #22c55e; + box-shadow: 0 8px 32px rgba(0,0,0,0.08); width: 100%; - min-width: 0; + max-width: 360px; text-align: center; } -.login-card__brand { - margin-bottom: 1.75rem; -} +.login-card__brand { margin-bottom: 1.75rem; } .login-card__title { - margin: 0 0 0.5rem; - font-size: clamp(1.5rem, 4.5vw, 1.875rem); - font-weight: 600; - color: var(--color-primary); + margin: 0 0 0.375rem; + font-size: 1.625rem; + font-weight: 700; + color: #22c55e; letter-spacing: -0.02em; + font-family: 'Playfair Display', Georgia, serif; } -.login-card__tagline { - margin: 0; - color: var(--color-text-muted); - font-size: clamp(0.875rem, 2vw, 0.9375rem); - line-height: 1.5; -} +.login-card__tagline { margin: 0; color: #6b7280; font-size: 0.9375rem; } -.login-card__actions { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 1rem; -} +.login-card__actions { display: flex; flex-direction: column; gap: 1rem; } .login-card__error { - margin: 0; - padding: 0.65rem 0.75rem; - color: #b91c1c; - font-size: 0.875rem; - background: #fef2f2; - border-radius: 8px; - word-break: break-word; - text-align: left; + margin: 0; padding: 0.625rem 0.75rem; + color: #b91c1c; font-size: 0.875rem; + background: #fef2f2; border-radius: 8px; text-align: left; } -/* Sign in with Google button – standard Google-style UI */ .google-sign-in-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.75rem; - width: 100%; - min-height: 52px; - padding: 0.75rem 1.25rem; - font-size: 1rem; - font-weight: 500; - color: #3c4043; - background: #fff; - border: 1px solid #dadce0; - border-radius: 8px; - cursor: pointer; + display: inline-flex; align-items: center; justify-content: center; + gap: 0.75rem; width: 100%; min-height: 48px; + padding: 0.75rem 1.25rem; font-size: 0.9375rem; font-weight: 500; + color: #3c4043; background: #fff; border: 1px solid #dadce0; + border-radius: 10px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .google-sign-in-btn:hover:not(:disabled) { - background: #f8f9fa; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); -} - -.google-sign-in-btn:active:not(:disabled) { - background: #f1f3f4; -} - -.google-sign-in-btn:disabled { - opacity: 0.7; - cursor: not-allowed; -} - -.google-sign-in-btn__logo { - flex-shrink: 0; -} - -.google-sign-in-btn__label { - color: inherit; -} - -/* ----- Home page ----- */ -.home-page { - min-height: 100vh; - min-height: 100dvh; - background: - linear-gradient(135deg, rgba(241, 238, 225, 0.9) 0%, rgba(232, 245, 237, 0.85) 100%), - url('data:image/svg+xml,%3Csvg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="g1" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23c3fd2f;stop-opacity:0.15" /%3E%3Cstop offset="100%25" style="stop-color:%23c3fd2f;stop-opacity:0" /%3E%3C/radialGradient%3E%3CradialGradient id="g2" cx="70%25" cy="70%25"%3E%3Cstop offset="0%25" style="stop-color:%231be62c;stop-opacity:0.12" /%3E%3Cstop offset="100%25" style="stop-color:%231be62c;stop-opacity:0" /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill="%23f1eee1" width="1920" height="1080"/%3E%3Cellipse cx="576" cy="324" rx="500" ry="500" fill="url(%23g1)" /%3E%3Cellipse cx="1344" cy="756" rx="400" rx="400" fill="url(%23g2)" /%3E%3C/svg%3E'); - background-size: cover; - background-position: center; - background-attachment: fixed; - padding: clamp(1rem, 3vw, 2rem); - padding-left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left)); - padding-right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right)); - position: relative; - overflow: hidden; -} - -/* Background decorative elements */ -.home-bg-decoration { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; - overflow: hidden; -} - -.bg-orb { - position: absolute; - border-radius: 50%; - filter: blur(100px); - opacity: 0.25; - mix-blend-mode: multiply; - animation: float 20s ease-in-out infinite; -} - -.bg-orb-1 { - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(27, 230, 44, 0.3) 0%, rgba(27, 230, 44, 0) 70%); - top: -150px; - left: -150px; - animation-delay: 0s; - animation-duration: 25s; -} - -.bg-orb-2 { - width: 400px; - height: 400px; - background: radial-gradient(circle, rgba(195, 253, 47, 0.25) 0%, rgba(195, 253, 47, 0) 70%); - bottom: -100px; - right: -100px; - animation-delay: -8s; - animation-duration: 30s; -} - -.bg-orb-3 { - width: 350px; - height: 350px; - background: radial-gradient(circle, rgba(207, 242, 220, 0.4) 0%, rgba(207, 242, 220, 0) 70%); - top: 50%; - right: 10%; - animation-delay: -15s; - animation-duration: 35s; -} - -@keyframes float { - 0%, 100% { - transform: translate(0, 0) scale(1); - } - 33% { - transform: translate(30px, -30px) scale(1.1); - } - 66% { - transform: translate(-20px, 20px) scale(0.9); - } -} - -.bg-pattern { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: - radial-gradient(circle at 20% 30%, rgba(27, 230, 44, 0.03) 0%, transparent 50%), - radial-gradient(circle at 80% 70%, rgba(195, 253, 47, 0.03) 0%, transparent 50%), - radial-gradient(circle at 40% 80%, rgba(207, 242, 220, 0.04) 0%, transparent 50%); - background-size: 100% 100%; -} - -/* Side decorative panels */ -.bg-pattern::before, -.bg-pattern::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - width: 250px; - opacity: 0.15; -} - -.bg-pattern::before { - left: 0; - background: linear-gradient( - to right, - rgba(27, 230, 44, 0.1) 0%, - rgba(207, 242, 220, 0.05) 50%, - transparent 100% - ); - -webkit-mask-image: repeating-linear-gradient( - to bottom, - black 0px, - black 3px, - transparent 3px, - transparent 6px - ); - mask-image: repeating-linear-gradient( - to bottom, - black 0px, - black 3px, - transparent 3px, - transparent 6px - ); -} - -.bg-pattern::after { - right: 0; - background: linear-gradient( - to left, - rgba(195, 253, 47, 0.08) 0%, - rgba(207, 242, 220, 0.05) 50%, - transparent 100% - ); - -webkit-mask-image: repeating-linear-gradient( - to bottom, - black 0px, - black 3px, - transparent 3px, - transparent 6px - ); - mask-image: repeating-linear-gradient( - to bottom, - black 0px, - black 3px, - transparent 3px, - transparent 6px - ); -} - -/* Decorative quote marks or subtle elements on sides */ -.home-page::before, -.home-page::after { - content: ''; - position: absolute; - width: 200px; - height: 200px; - background: radial-gradient(circle, rgba(27, 230, 44, 0.05) 0%, transparent 70%); - border-radius: 50%; - filter: blur(40px); - pointer-events: none; -} - -.home-page::before { - top: 20%; - left: 5%; - animation: pulse 8s ease-in-out infinite; -} - -.home-page::after { - bottom: 30%; - right: 5%; - animation: pulse 8s ease-in-out infinite; - animation-delay: -4s; -} - -@keyframes pulse { - 0%, 100% { - opacity: 0.3; - transform: scale(1); - } - 50% { - opacity: 0.5; - transform: scale(1.2); - } -} - -.home-header { - max-width: 680px; - margin: 0 auto 2rem; - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: 1rem; - padding-bottom: 0.5rem; - position: relative; - z-index: 1; -} - -.home-header h1 { - margin: 0; - font-size: clamp(1.25rem, 3.5vw, 1.625rem); - font-weight: 600; - color: #2d3748; - letter-spacing: -0.01em; - word-break: break-word; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.home-user { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - min-width: 0; -} - -.home-username { - font-weight: 500; - font-size: clamp(0.875rem, 2vw, 0.9375rem); - color: #4a5568; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: min(50vw, 200px); - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.home-sign-out { - min-height: 44px; - padding: 0.625rem 1.125rem; - font-size: 0.875rem; - font-weight: 500; - color: #4a5568; - background: rgba(255, 255, 255, 0.6); - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 10px; - cursor: pointer; - transition: all 0.2s ease; - -webkit-tap-highlight-color: transparent; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.home-sign-out:hover { - background: rgba(255, 255, 255, 0.85); - border-color: rgba(0, 0, 0, 0.12); - color: #2d3748; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.home-sign-out:active { - transform: translateY(0); -} - -.home-main { - max-width: 720px; - margin: 0 auto; - background: var(--color-surface, #ffffff); - padding: clamp(1rem, 4vw, 2rem); - border-radius: 12px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); - min-width: 0; -} - -.home-welcome { - margin: 0 0 0.5rem; - font-size: clamp(1.15rem, 3vw, 1.35rem); - color: var(--color-text, #1a1a1a); - word-break: break-word; -} - -.home-sub { - margin: 0; - color: var(--color-text-muted, #555); - font-size: clamp(0.875rem, 2vw, 0.95rem); + background: #f8f9fa; box-shadow: 0 1px 6px rgba(0,0,0,0.1); } +.google-sign-in-btn:disabled { opacity: 0.7; cursor: not-allowed; } +.google-sign-in-btn__logo { flex-shrink: 0; } .home-login-link { - display: inline-block; - margin-top: 1rem; - min-height: 48px; - padding: 0.75rem 1.25rem; - line-height: 1.25; - color: #fff; - background: var(--color-primary, #1be62c); - border-radius: 8px; - text-decoration: none; - font-weight: 500; - transition: background 0.2s; - -webkit-tap-highlight-color: transparent; + display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem; + color: #fff; background: #22c55e; border-radius: 10px; + text-decoration: none; font-weight: 600; transition: background 0.2s; } +.home-login-link:hover { background: #16a34a; } -.home-login-link:hover { - background: var(--color-primary-hover, #18c925); -} - -/* Small screens: stack header and tighten spacing */ -@media (max-width: 480px) { - .home-header { - flex-direction: column; - align-items: flex-start; - } - - .home-user { - width: 100%; - } - - .home-username { - max-width: none; - } -} - -/* ----- Journal writing interface ----- */ -.journal-container { - max-width: 680px; - margin: 0 auto; - min-width: 0; - position: relative; - z-index: 1; -} - -.journal-card { - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(30px) saturate(180%); - -webkit-backdrop-filter: blur(30px) saturate(180%); - padding: clamp(2.5rem, 7vw, 4.5rem) clamp(2.5rem, 7vw, 4rem); - padding-bottom: clamp(3rem, 7vw, 4.5rem); - border-radius: 28px; - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 8px 32px rgba(31, 38, 135, 0.15), - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - min-height: 70vh; +/* ============================ + SHARED PAGE SHELL + Pages fill #root (100dvh) as flex children – no page-level scroll + ============================ */ +.home-page, +.history-page, +.settings-page { + flex: 1; + min-height: 0; + overflow: hidden; display: flex; flex-direction: column; - position: relative; - overflow: hidden; + background: #f5f0e8; } -.journal-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, - rgba(27, 230, 44, 0.6) 0%, - rgba(195, 253, 47, 0.5) 50%, - rgba(27, 230, 44, 0.6) 100%); - opacity: 0.7; - border-radius: 28px 28px 0 0; +/* ============================ + HOME / WRITE PAGE + ============================ */ +.journal-container { + flex: 1; + min-height: 0; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE/Edge */ + display: flex; + flex-direction: column; + padding: 1.5rem 1.25rem 1rem; +} + +.journal-container::-webkit-scrollbar { display: none; } + +.journal-card { + background: #fff; + border-radius: 20px; + padding: 1.625rem 1.5rem; + box-shadow: 0 2px 12px rgba(0,0,0,0.07); + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; } .journal-date { - margin: 0 0 2.5rem; - font-size: clamp(0.6875rem, 1.75vw, 0.75rem); - font-weight: 600; - letter-spacing: 0.15em; - color: rgba(27, 230, 44, 0.85); + font-size: 0.625rem; + font-weight: 700; + letter-spacing: 0.14em; + color: #22c55e; text-transform: uppercase; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + margin: 0 0 1rem; } .journal-prompt { - margin: 0 0 3rem; - font-size: clamp(2rem, 5.5vw, 3.25rem); - font-weight: 600; + margin: 0 0 1.5rem; + font-size: 1.75rem; + font-weight: 700; line-height: 1.2; - color: #2d3748; - letter-spacing: -0.015em; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; + color: #1a1a1a; + letter-spacing: -0.02em; + font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; } .journal-writing-area { flex: 1; + min-height: 0; display: flex; flex-direction: column; - gap: 2rem; - margin-bottom: 0; } .journal-title-input { width: 100%; - padding: 1.25rem 0; + padding: 0 0 0.875rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - font-size: clamp(1.125rem, 2.75vw, 1.375rem); - font-weight: 500; - color: #2d3748; + font-size: 1rem; + font-weight: 400; + color: #374151; background: transparent; border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); + border-bottom: 1px solid #f0ece4; outline: none; - transition: all 0.3s ease; + transition: border-color 0.2s; } -.journal-title-input::placeholder { - color: #cbd5e0; - font-weight: 400; - opacity: 0.65; - letter-spacing: 0.01em; -} - -.journal-title-input:focus { - border-bottom-color: rgba(27, 230, 44, 0.4); -} +.journal-title-input::placeholder { color: #c4bfb5; } +.journal-title-input:focus { border-bottom-color: #22c55e; } .journal-entry-textarea { flex: 1; + min-height: 0; width: 100%; - min-height: 300px; - padding: 1.25rem 0; - font-family: 'Lora', 'Georgia', 'Times New Roman', serif; - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); - line-height: 1.8; - color: #2d3748; + padding: 0.875rem 0; + font-family: 'Lora', Georgia, serif; + font-size: 1rem; + line-height: 1.75; + color: #374151; background: transparent; border: none; outline: none; resize: none; - -webkit-font-smoothing: antialiased; - font-weight: 400; + caret-color: #374151; } -.journal-entry-textarea::placeholder { - color: #cbd5e0; - font-style: italic; - opacity: 0.45; -} - -.journal-actions { - display: flex; - align-items: center; - gap: 0.875rem; - margin-top: 1.75rem; - padding: 0; -} +.journal-entry-textarea::placeholder { color: #c4bfb5; font-style: italic; } .journal-write-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.625rem; - min-height: 56px; - padding: 1rem 2.75rem; - font-size: clamp(0.9375rem, 2.25vw, 1rem); - font-weight: 600; - color: #fff; - background: linear-gradient(135deg, #6dd98b 0%, #1be62c 100%); - border: none; - border-radius: 100px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - -webkit-tap-highlight-color: transparent; - box-shadow: - 0 4px 16px rgba(27, 230, 44, 0.25), - 0 2px 8px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - text-transform: none; - letter-spacing: 0.02em; + display: inline-flex; align-items: center; justify-content: center; + gap: 0.5rem; min-height: 44px; padding: 0.625rem 1.5rem; + font-size: 0.9375rem; font-weight: 600; color: #fff; + background: #22c55e; border: none; border-radius: 100px; + cursor: pointer; transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(34,197,94,0.3); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + white-space: nowrap; } .journal-write-btn:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: - 0 6px 24px rgba(27, 230, 44, 0.3), - 0 3px 10px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.25); - background: linear-gradient(135deg, #7de397 0%, #1ef030 100%); -} - -.journal-write-btn:active:not(:disabled) { - transform: translateY(0); - box-shadow: - 0 2px 8px rgba(27, 230, 44, 0.25), - 0 1px 4px rgba(0, 0, 0, 0.1); -} - -.journal-write-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; + background: #16a34a; transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(34,197,94,0.4); } +.journal-write-btn:active:not(:disabled) { transform: translateY(0); } +.journal-write-btn:disabled { opacity: 0.5; cursor: not-allowed; } .journal-icon-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 52px; - height: 52px; - min-height: 52px; - padding: 0; - font-size: 1.25rem; - background: rgba(255, 255, 255, 0.5); - backdrop-filter: blur(10px); - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 14px; - cursor: pointer; - transition: all 0.2s ease; - -webkit-tap-highlight-color: transparent; - opacity: 0.7; + display: inline-flex; align-items: center; justify-content: center; + width: 44px; height: 44px; background: transparent; border: none; + border-radius: 12px; cursor: pointer; color: #9ca3af; + transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } +.journal-icon-btn:hover { color: #6b7280; background: rgba(0,0,0,0.05); } -.journal-icon-btn:hover { - background: rgba(255, 255, 255, 0.8); - border-color: rgba(0, 0, 0, 0.1); - opacity: 1; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.journal-icon-btn:active { - transform: translateY(0); -} - -/* Button icon styling */ -.journal-write-btn svg, -.journal-icon-btn svg { - flex-shrink: 0; - display: block; -} - -/* Mobile adjustments */ -@media (max-width: 480px) { - .journal-card { - min-height: calc(100vh - 10rem); - padding: clamp(1.5rem, 5vw, 2rem); - border-radius: 16px; - } - - .journal-prompt { - margin-bottom: 2rem; - } - - .journal-entry-textarea { - min-height: 220px; - } - - /* Simplify background on mobile */ - .bg-orb { - filter: blur(60px); - opacity: 0.25; - } - - .bg-pattern::before, - .bg-pattern::after { - width: 100px; - opacity: 0.08; - } - - .home-page::before, - .home-page::after { - display: none; - } -} - -@media (max-width: 768px) { - .bg-pattern::before, - .bg-pattern::after { - width: 150px; - } -} - -/* ----- History Page ----- */ -.history-page { - min-height: 100vh; - min-height: 100dvh; - background: linear-gradient(135deg, rgba(241, 238, 225, 0.9) 0%, rgba(232, 245, 237, 0.85) 100%), - url('data:image/svg+xml,%3Csvg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="g1" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23c3fd2f;stop-opacity:0.15" /%3E%3Cstop offset="100%25" style="stop-color:%23c3fd2f;stop-opacity:0" /%3E%3C/radialGradient%3E%3CradialGradient id="g2" cx="70%25" cy="70%25"%3E%3Cstop offset="0%25" style="stop-color:%231be62c;stop-opacity:0.12" /%3E%3Cstop offset="100%25" style="stop-color:%231be62c;stop-opacity:0" /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill="%23f1eee1" width="1920" height="1080"/%3E%3Cellipse cx="576" cy="324" rx="500" ry="500" fill="url(%23g1)" /%3E%3Cellipse cx="1344" cy="756" rx="400" rx="400" fill="url(%23g2)" /%3E%3C/svg%3E'); - background-size: cover; - background-position: center; - background-attachment: fixed; - padding: clamp(1rem, 3vw, 2rem); - padding-bottom: 90px; - padding-left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left)); - padding-right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right)); - position: relative; - overflow-x: hidden; -} - -.history-bg-decoration { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; - overflow: hidden; -} - -.history-header { - max-width: 680px; - margin: 0 auto 2rem; - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 1rem; - position: relative; - z-index: 1; -} - -.history-header-text h1 { - margin: 0 0 0.25rem; - font-size: clamp(2rem, 6vw, 2.5rem); - font-weight: 700; - color: #2d3748; - letter-spacing: -0.02em; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; -} - -.history-subtitle { - margin: 0; - font-size: clamp(0.9375rem, 2.25vw, 1.0625rem); - color: #6b7280; - font-weight: 400; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.history-search-btn { - width: 48px; - height: 48px; - min-height: 48px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.6); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 14px; - cursor: pointer; - transition: all 0.2s ease; - color: #4a5568; -} - -.history-search-btn:hover { - background: rgba(255, 255, 255, 0.85); - border-color: rgba(0, 0, 0, 0.1); - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.history-container { - max-width: 680px; - margin: 0 auto; - position: relative; - z-index: 1; -} - -/* Calendar Card */ -.calendar-card { - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(30px) saturate(180%); - -webkit-backdrop-filter: blur(30px) saturate(180%); - padding: clamp(1.75rem, 5vw, 2.5rem); - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 8px 32px rgba(31, 38, 135, 0.12), - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - margin-bottom: 2rem; -} - -.calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 1.75rem; -} - -.calendar-month { - margin: 0; - font-size: clamp(1.25rem, 3.5vw, 1.5rem); - font-weight: 600; - color: #2d3748; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; -} - -.calendar-nav { - display: flex; - gap: 0.5rem; -} - -.calendar-nav-btn { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 10px; - cursor: pointer; - color: #4a5568; - transition: all 0.2s ease; -} - -.calendar-nav-btn:hover { - background: rgba(0, 0, 0, 0.03); - border-color: rgba(0, 0, 0, 0.1); -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: clamp(0.5rem, 2vw, 0.875rem); -} - -.calendar-weekday { - font-size: clamp(0.75rem, 2vw, 0.875rem); - font-weight: 500; - color: #9ca3af; - text-align: center; - padding: 0.5rem 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - letter-spacing: 0.02em; -} - -.calendar-day { - aspect-ratio: 1; - display: flex; - align-items: center; - justify-content: center; - font-size: clamp(0.9375rem, 2.25vw, 1.0625rem); - font-weight: 500; - color: #4a5568; - background: transparent; - border: none; - border-radius: 50%; - cursor: pointer; - transition: all 0.2s ease; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - position: relative; -} - -.calendar-day-empty { - cursor: default; -} - -.calendar-day:not(.calendar-day-empty):hover { - background: rgba(27, 230, 44, 0.08); - color: #2d3748; -} - -.calendar-day-has-entry { - background: rgba(27, 230, 44, 0.15); - color: #1be62c; - font-weight: 600; -} - -.calendar-day-has-entry:hover { - background: rgba(27, 230, 44, 0.25); -} - -.calendar-day-today { - background: #1be62c; - color: #fff; - font-weight: 700; -} - -.calendar-day-today:hover { - background: #18c925; -} - -/* Recent Entries */ -.recent-entries { - margin-bottom: 2rem; -} - -.recent-entries-title { - margin: 0 0 1.25rem; - font-size: clamp(0.6875rem, 1.75vw, 0.75rem); - font-weight: 600; - letter-spacing: 0.15em; - color: #9ca3af; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.entries-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.entry-card { - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); - padding: clamp(1.25rem, 4vw, 1.75rem); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.6); - border-left: 4px solid #1be62c; - box-shadow: - 0 4px 16px rgba(31, 38, 135, 0.08), - 0 1px 4px rgba(0, 0, 0, 0.02); - cursor: pointer; - transition: all 0.2s ease; - text-align: left; - width: 100%; -} - -.entry-card:hover { - transform: translateY(-2px); - box-shadow: - 0 8px 24px rgba(31, 38, 135, 0.12), - 0 2px 8px rgba(0, 0, 0, 0.04); - border-left-color: #18c925; -} - -.entry-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.75rem; - gap: 1rem; -} - -.entry-date { - font-size: clamp(0.6875rem, 1.75vw, 0.75rem); - font-weight: 600; - letter-spacing: 0.08em; - color: #1be62c; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.entry-time { - font-size: clamp(0.75rem, 1.85vw, 0.8125rem); - color: #9ca3af; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.entry-title { - margin: 0 0 0.5rem; - font-size: clamp(1.125rem, 2.75vw, 1.375rem); - font-weight: 600; - color: #2d3748; - line-height: 1.3; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; -} - -.entry-preview { - margin: 0; - font-size: clamp(0.9375rem, 2.25vw, 1rem); - line-height: 1.6; - color: #6b7280; - font-family: 'Lora', 'Georgia', serif; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* ----- Bottom Navigation ----- */ +/* ============================ + BOTTOM NAVIGATION — Static flex item, always at bottom + ============================ */ .bottom-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: rgba(255, 255, 255, 0.85); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); - border-top: 1px solid rgba(0, 0, 0, 0.06); - padding: 0.75rem clamp(1rem, 3vw, 2rem); - padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); + flex-shrink: 0; + position: relative; /* NOT fixed — lives in the flex column */ + background: rgba(255,255,255,0.96); + border-top: 1px solid rgba(0,0,0,0.07); + padding: 8px 12px 12px; display: flex; align-items: center; justify-content: space-around; - gap: 0.5rem; - z-index: 100; - box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04); + gap: 4px; + z-index: 10; } .bottom-nav-btn { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; - gap: 0.375rem; - padding: 0.625rem 1rem; + gap: 5px; + padding: 8px 14px; background: transparent; border: none; - border-radius: 12px; + border-radius: 100px; cursor: pointer; color: #9ca3af; - transition: all 0.2s ease; - min-width: 70px; + transition: all 0.18s ease; + min-height: 44px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + -webkit-tap-highlight-color: transparent; } .bottom-nav-btn svg { - width: 24px; - height: 24px; - stroke-width: 2; + width: 18px; height: 18px; + flex-shrink: 0; stroke-width: 2; } .bottom-nav-btn span { - font-size: 0.6875rem; - font-weight: 500; - letter-spacing: 0.01em; + font-size: 0.8125rem; font-weight: 600; + white-space: nowrap; display: none; } -.bottom-nav-btn:hover { - color: #4a5568; - background: rgba(0, 0, 0, 0.02); -} +.bottom-nav-btn:hover { color: #6b7280; } .bottom-nav-btn-active { - color: #1be62c; - background: rgba(27, 230, 44, 0.08); + background: #22c55e; + color: #fff; + padding: 9px 18px; } -.bottom-nav-btn-active:hover { - color: #18c925; - background: rgba(27, 230, 44, 0.12); +.bottom-nav-btn-active span { display: inline; } +.bottom-nav-btn-active:hover { background: #16a34a; color: #fff; } + +/* ============================ + HISTORY PAGE + ============================ */ +.history-header { + flex-shrink: 0; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1.5rem 1.25rem 0; } -/* Adjust home page for bottom nav */ -.home-page { - padding-bottom: 100px; +.history-header-text h1 { + margin: 0 0 0.15rem; + font-size: 1.625rem; + font-weight: 700; + color: #1a1a1a; + letter-spacing: -0.02em; + font-family: 'Playfair Display', Georgia, serif; } -/* Mobile adjustments for history */ -@media (max-width: 480px) { - .history-header-text h1 { - font-size: clamp(1.75rem, 6vw, 2rem); - } - - .calendar-card { - padding: clamp(1.25rem, 4vw, 1.75rem); - } - - .calendar-grid { - gap: clamp(0.375rem, 1.5vw, 0.5rem); - } - - .entry-card { - padding: 1.125rem; - } +.history-subtitle { + margin: 0; font-size: 0.875rem; + color: #6b7280; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } -/* ----- Settings Page ----- */ -.settings-page { - min-height: 100vh; - min-height: 100dvh; - background: linear-gradient(135deg, rgba(241, 238, 225, 0.9) 0%, rgba(232, 245, 237, 0.85) 100%), - url('data:image/svg+xml,%3Csvg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="g1" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23c3fd2f;stop-opacity:0.15" /%3E%3Cstop offset="100%25" style="stop-color:%23c3fd2f;stop-opacity:0" /%3E%3C/radialGradient%3E%3CradialGradient id="g2" cx="70%25" cy="70%25"%3E%3Cstop offset="0%25" style="stop-color:%231be62c;stop-opacity:0.12" /%3E%3Cstop offset="100%25" style="stop-color:%231be62c;stop-opacity:0" /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill="%23f1eee1" width="1920" height="1080"/%3E%3Cellipse cx="576" cy="324" rx="500" ry="500" fill="url(%23g1)" /%3E%3Cellipse cx="1344" cy="756" rx="400" rx="400" fill="url(%23g2)" /%3E%3C/svg%3E'); - background-size: cover; - background-position: center; - background-attachment: fixed; - padding: clamp(1rem, 3vw, 2rem); - padding-bottom: 100px; - padding-left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left)); - padding-right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right)); - position: relative; - overflow-x: hidden; +.history-search-btn { + width: 40px; height: 40px; flex-shrink: 0; + display: flex; align-items: center; justify-content: center; + background: #fff; border: 1px solid #e5e7eb; border-radius: 50%; + cursor: pointer; color: #6b7280; transition: all 0.2s ease; +} +.history-search-btn:hover { background: #f9fafb; color: #374151; } + +/* scrollable content area for history */ +.history-container { + flex: 1; + min-height: 0; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 1rem 1.25rem 0.5rem; +} +.history-container::-webkit-scrollbar { display: none; } + +/* Calendar */ +.calendar-card { + background: #fff; border-radius: 18px; + padding: 1.125rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.06); + margin-bottom: 1.125rem; } -.settings-bg-decoration { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; - overflow: hidden; +.calendar-header { + display: flex; align-items: center; + justify-content: space-between; margin-bottom: 1rem; } +.calendar-month { + margin: 0; font-size: 1.0625rem; font-weight: 600; color: #1a1a1a; + font-family: 'Playfair Display', Georgia, serif; +} + +.calendar-nav { display: flex; gap: 2px; } + +.calendar-nav-btn { + width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; + background: transparent; border: none; border-radius: 8px; cursor: pointer; + color: #9ca3af; transition: all 0.15s ease; +} +.calendar-nav-btn:hover { background: #f3f4f6; color: #374151; } + +.calendar-grid { + display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; +} + +.calendar-weekday { + font-size: 0.6875rem; font-weight: 500; color: #9ca3af; + text-align: center; padding: 4px 0; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.calendar-day { + aspect-ratio: 1; display: flex; align-items: center; justify-content: center; + font-size: 0.8125rem; font-weight: 400; color: #374151; + background: transparent; border: none; border-radius: 50%; + cursor: pointer; transition: all 0.15s ease; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.calendar-day-empty { cursor: default; } +.calendar-day:not(.calendar-day-empty):hover { background: #f0fdf4; color: #22c55e; } + +.calendar-day-has-entry { + background: #dcfce7; color: #22c55e; font-weight: 600; +} +.calendar-day-has-entry:hover { background: #bbf7d0; } + +.calendar-day-today { + background: #22c55e; color: #fff; font-weight: 700; +} +.calendar-day-today:hover { background: #16a34a; } + +/* Recent Entries */ +.recent-entries { margin-bottom: 1rem; } + +.recent-entries-title { + margin: 0 0 0.75rem; + font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; + color: #9ca3af; text-transform: uppercase; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.entries-list { display: flex; flex-direction: column; gap: 0.625rem; } + +.entry-card { + background: #fff; padding: 1rem 1rem 1rem 0.875rem; + border-radius: 14px; border-left: 4px solid #22c55e; + box-shadow: 0 2px 6px rgba(0,0,0,0.05); cursor: pointer; + transition: all 0.2s ease; text-align: left; width: 100%; +} +.entry-card:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.09); } + +.entry-header { + display: flex; align-items: center; justify-content: space-between; + margin-bottom: 0.375rem; gap: 0.5rem; +} + +.entry-date { + font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; + color: #6b7280; text-transform: uppercase; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.entry-time { + font-size: 0.6875rem; color: #9ca3af; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.entry-title { + margin: 0 0 0.3rem; font-size: 1rem; font-weight: 600; + color: #1a1a1a; line-height: 1.3; + font-family: 'Playfair Display', Georgia, serif; +} + +.entry-preview { + margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #6b7280; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + display: -webkit-box; -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; +} + +/* ============================ + SETTINGS PAGE + ============================ */ .settings-header { - max-width: 680px; - margin: 0 auto 2rem; - position: relative; - z-index: 1; + flex-shrink: 0; + padding: 1.5rem 1.25rem 0; } .settings-header-text h1 { - margin: 0 0 0.25rem; - font-size: clamp(2rem, 6vw, 2.5rem); - font-weight: 700; - color: #2d3748; + margin: 0 0 0.2rem; + font-size: 1.75rem; font-weight: 700; color: #1a1a1a; letter-spacing: -0.02em; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; + font-family: 'Playfair Display', Georgia, serif; } .settings-subtitle { - margin: 0; - font-size: clamp(0.9375rem, 2.25vw, 1.0625rem); - color: #6b7280; - font-weight: 400; + margin: 0; font-size: 0.875rem; color: #6b7280; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } +/* scrollable content area for settings */ .settings-container { - max-width: 680px; - margin: 0 auto; - position: relative; - z-index: 1; + flex: 1; + min-height: 0; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 1rem 1.25rem 0.5rem; } +.settings-container::-webkit-scrollbar { display: none; } -/* Profile Section */ +/* Profile */ .settings-profile { - display: flex; - align-items: center; - gap: 1.25rem; - margin-bottom: 2.5rem; + display: flex; align-items: center; gap: 1rem; + margin-bottom: 1.25rem; background: #fff; + border-radius: 18px; padding: 1rem 1.125rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.06); } -.settings-avatar { - width: 80px; - height: 80px; - flex-shrink: 0; -} +.settings-avatar { width: 52px; height: 52px; flex-shrink: 0; } .settings-avatar-img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; - border: 3px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .settings-avatar-placeholder { - width: 100%; - height: 100%; - border-radius: 50%; - background: linear-gradient(135deg, #f8ceec 0%, #f4b6d3 100%); - display: flex; - align-items: center; - justify-content: center; - font-size: 2rem; - font-weight: 600; - color: #fff; - border: 3px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + width: 100%; height: 100%; border-radius: 50%; + background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 100%); + display: flex; align-items: center; justify-content: center; + font-size: 1.25rem; font-weight: 600; color: #fff; } -.settings-profile-info { - flex: 1; - min-width: 0; -} +.settings-profile-info { flex: 1; min-width: 0; } .settings-profile-name { - margin: 0 0 0.5rem; - font-size: clamp(1.25rem, 3vw, 1.5rem); - font-weight: 600; - color: #2d3748; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; + margin: 0 0 0.3rem; font-size: 1.0625rem; font-weight: 700; color: #1a1a1a; + font-family: 'Playfair Display', Georgia, serif; } .settings-profile-badge { - display: inline-block; - padding: 0.375rem 0.875rem; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.05em; - color: #166534; - background: rgba(27, 230, 44, 0.2); - border-radius: 100px; + display: inline-block; padding: 0.15rem 0.5rem; + font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; + color: #fff; background: #22c55e; border-radius: 100px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + text-transform: uppercase; } -/* Settings Sections */ -.settings-section { - margin-bottom: 2rem; -} +.settings-section { margin-bottom: 1rem; } .settings-section-title { - margin: 0 0 1rem; - font-size: clamp(0.6875rem, 1.75vw, 0.75rem); - font-weight: 600; - letter-spacing: 0.15em; - color: #9ca3af; + margin: 0 0 0.5rem; + font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; + color: #9ca3af; text-transform: uppercase; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .settings-card { - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(30px) saturate(180%); - -webkit-backdrop-filter: blur(30px) saturate(180%); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 8px 32px rgba(31, 38, 135, 0.12), - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - overflow: hidden; + background: #fff; border-radius: 18px; + box-shadow: 0 2px 10px rgba(0,0,0,0.06); overflow: hidden; } -/* Settings Items */ .settings-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.25rem 1.5rem; - background: transparent; - border: none; - width: 100%; - text-align: left; + display: flex; align-items: center; gap: 0.875rem; + padding: 0.875rem 1.125rem; background: transparent; + border: none; width: 100%; text-align: left; } -.settings-item-button { - cursor: pointer; - transition: background 0.2s ease; -} - -.settings-item-button:hover { - background: rgba(0, 0, 0, 0.02); -} +.settings-item-button { cursor: pointer; transition: background 0.15s ease; } +.settings-item-button:hover { background: #f9fafb; } .settings-item-icon { - width: 48px; - height: 48px; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - border-radius: 12px; + width: 40px; height: 40px; flex-shrink: 0; + display: flex; align-items: center; justify-content: center; + border-radius: 10px; } -.settings-item-icon-green { - background: rgba(27, 230, 44, 0.12); - color: #1be62c; -} +.settings-item-icon-green { background: rgba(34,197,94,0.12); color: #22c55e; } +.settings-item-icon-gray { background: rgba(107,114,128,0.10); color: #6b7280; } +.settings-item-icon-orange { background: rgba(251,146,60,0.12); color: #f97316; } +.settings-item-icon-blue { background: rgba(59,130,246,0.12); color: #3b82f6; } -.settings-item-icon-gray { - background: rgba(107, 114, 128, 0.12); - color: #6b7280; -} - -.settings-item-icon-orange { - background: rgba(251, 146, 60, 0.12); - color: #f97316; -} - -.settings-item-icon-blue { - background: rgba(59, 130, 246, 0.12); - color: #3b82f6; -} - -.settings-item-content { - flex: 1; - min-width: 0; -} +.settings-item-content { flex: 1; min-width: 0; } .settings-item-title { - margin: 0 0 0.25rem; - font-size: clamp(1rem, 2.5vw, 1.125rem); - font-weight: 600; - color: #2d3748; - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; + margin: 0 0 0.15rem; font-size: 0.9375rem; font-weight: 600; color: #1a1a1a; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .settings-item-subtitle { - margin: 0; - font-size: clamp(0.8125rem, 2vw, 0.875rem); - color: #9ca3af; + margin: 0; font-size: 0.75rem; color: #9ca3af; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } -.settings-item-arrow { - flex-shrink: 0; - color: #cbd5e0; -} +.settings-item-arrow { flex-shrink: 0; color: #d1d5db; } -.settings-divider { - height: 1px; - background: rgba(0, 0, 0, 0.06); - margin: 0 1.5rem; -} +.settings-divider { height: 1px; background: #f3f4f6; margin: 0 1.125rem; } -/* Toggle Switch */ +/* Toggle */ .settings-toggle { - position: relative; - display: inline-block; - width: 52px; - height: 32px; - flex-shrink: 0; + position: relative; display: inline-block; + width: 46px; height: 26px; flex-shrink: 0; } -.settings-toggle input { - opacity: 0; - width: 0; - height: 0; -} +.settings-toggle input { opacity: 0; width: 0; height: 0; } .settings-toggle-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #cbd5e0; - transition: 0.3s; - border-radius: 100px; + position: absolute; cursor: pointer; + top: 0; left: 0; right: 0; bottom: 0; + background: #d1d5db; transition: 0.25s; border-radius: 100px; } .settings-toggle-slider:before { - position: absolute; - content: ""; - height: 24px; - width: 24px; - left: 4px; - bottom: 4px; - background: white; - transition: 0.3s; - border-radius: 50%; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: absolute; content: ""; + height: 20px; width: 20px; left: 3px; bottom: 3px; + background: white; transition: 0.25s; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0,0,0,0.15); } -.settings-toggle input:checked + .settings-toggle-slider { - background: #1be62c; -} +.settings-toggle input:checked + .settings-toggle-slider { background: #22c55e; } +.settings-toggle input:checked + .settings-toggle-slider:before { transform: translateX(20px); } -.settings-toggle input:checked + .settings-toggle-slider:before { - transform: translateX(20px); -} - -/* Theme Colors */ -.settings-theme-colors { - display: flex; - gap: 0.5rem; - margin-right: 0.5rem; -} +/* Theme dots */ +.settings-theme-colors { display: flex; gap: 5px; margin-right: 4px; } .settings-theme-dot { - width: 24px; - height: 24px; - border-radius: 50%; - border: 2px solid rgba(0, 0, 0, 0.1); - cursor: pointer; - transition: all 0.2s ease; + width: 20px; height: 20px; border-radius: 50%; + border: 2px solid rgba(0,0,0,0.08); cursor: pointer; transition: all 0.2s; } -.settings-theme-dot-beige { - background: #f1eee1; -} +.settings-theme-dot-beige { background: #f5f0e8; } +.settings-theme-dot-dark { background: #1a1a1a; } +.settings-theme-dot:hover { transform: scale(1.15); } -.settings-theme-dot-dark { - background: #1a1a1a; -} - -.settings-theme-dot:hover { - transform: scale(1.1); - border-color: rgba(0, 0, 0, 0.2); -} - -/* Clear Data Button */ +/* Clear Data */ .settings-clear-btn { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.25rem 1.5rem; - margin-bottom: 1rem; - font-size: clamp(0.9375rem, 2.25vw, 1rem); - font-weight: 600; - color: #dc2626; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.6); - border-radius: 16px; - cursor: pointer; - transition: all 0.2s ease; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08); + width: 100%; display: flex; align-items: center; justify-content: space-between; + padding: 0.875rem 1.125rem; margin-bottom: 0.75rem; + font-size: 0.9375rem; font-weight: 600; color: #dc2626; + background: #fff; border: none; border-radius: 14px; cursor: pointer; + transition: background 0.2s; font-family: 'Inter', sans-serif; + box-shadow: 0 2px 6px rgba(0,0,0,0.05); } +.settings-clear-btn:hover { background: #fef2f2; } -.settings-clear-btn:hover { - background: rgba(254, 226, 226, 0.9); - border-color: rgba(220, 38, 38, 0.2); - transform: translateY(-1px); - box-shadow: 0 6px 16px rgba(220, 38, 38, 0.12); -} - -.settings-clear-btn svg { - flex-shrink: 0; -} - -/* Sign Out Button */ +/* Sign Out */ .settings-signout-btn { - width: 100%; - padding: 1rem; - margin-bottom: 1.5rem; - font-size: clamp(0.9375rem, 2.25vw, 1rem); - font-weight: 600; - color: #4a5568; - background: rgba(255, 255, 255, 0.6); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 14px; - cursor: pointer; - transition: all 0.2s ease; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -} - -.settings-signout-btn:hover { - background: rgba(255, 255, 255, 0.85); - border-color: rgba(0, 0, 0, 0.12); - color: #2d3748; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + width: 100%; padding: 0.75rem; margin-bottom: 1rem; + font-size: 0.9375rem; font-weight: 600; color: #6b7280; + background: #fff; border: none; border-radius: 14px; cursor: pointer; + transition: background 0.2s; font-family: 'Inter', sans-serif; + box-shadow: 0 2px 6px rgba(0,0,0,0.05); } +.settings-signout-btn:hover { background: #f9fafb; color: #374151; } /* Version */ .settings-version { - text-align: center; - font-size: 0.6875rem; - font-weight: 500; - letter-spacing: 0.08em; - color: #cbd5e0; - margin: 2rem 0 0; + text-align: center; font-size: 0.625rem; font-weight: 500; + letter-spacing: 0.08em; color: #d1d5db; margin: 0.75rem 0 0.5rem; + text-transform: uppercase; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } - -/* Mobile adjustments for settings */ -@media (max-width: 480px) { - .settings-header-text h1 { - font-size: clamp(1.75rem, 6vw, 2rem); - } - - .settings-profile { - margin-bottom: 2rem; - } - - .settings-avatar { - width: 64px; - height: 64px; - } - - .settings-item { - padding: 1rem 1.25rem; - } - - .settings-item-icon { - width: 44px; - height: 44px; - } -} - - diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx index ec56a81..31354fc 100644 --- a/src/components/BottomNav.tsx +++ b/src/components/BottomNav.tsx @@ -8,38 +8,47 @@ export default function BottomNav() { return (