ui enhance

2026-03-04 11:49:45 +05:30
parent 190243081a
commit bed32863da
11 changed files with 731 additions and 1448 deletions
--- 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
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,4 +1,5 @@
 <!-- BMAD:START -->
+
 # 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
@@ -40,7 +41,7 @@
 ## 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                 |
@@ -59,7 +60,7 @@ 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`                                                                    |
@@ -100,7 +101,7 @@ When the user's message starts with a `/bmad-` command (with or without addition
 ### 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`               |
@@ -113,4 +114,49 @@ When the user's message starts with a `/bmad-` command (with or without addition
 | `/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.
+
 <!-- BMAD:END -->
--- a/_bmad-output/brainstorming/brainstorming-session-2025-03-04.md
+++ 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**.
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
--- a/project-context.md
+++ 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._
--- a/src/App.css
+++ b/src/App.css
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -8,38 +8,47 @@ export default function BottomNav() {

  return (
    <nav className="bottom-nav">
+      {/* Write */}
      <button
        type="button"
        className={`bottom-nav-btn ${isActive('/') ? 'bottom-nav-btn-active' : ''}`}
        onClick={() => navigate('/')}
+        aria-label="Write"
      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
-          <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
-          <path d="M2 2l7.586 7.586"></path>
-          <circle cx="11" cy="11" r="2"></circle>
+        {/* Pencil / edit icon */}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
        </svg>
        <span>Write</span>
      </button>
+
+      {/* History */}
      <button
        type="button"
        className={`bottom-nav-btn ${isActive('/history') ? 'bottom-nav-btn-active' : ''}`}
        onClick={() => navigate('/history')}
+        aria-label="History"
      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-          <polyline points="9 22 9 12 15 12 15 22"></polyline>
+        {/* Clock icon */}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
        </svg>
        <span>History</span>
      </button>
+
+      {/* Settings */}
      <button
        type="button"
        className={`bottom-nav-btn ${isActive('/settings') ? 'bottom-nav-btn-active' : ''}`}
        onClick={() => navigate('/settings')}
+        aria-label="Settings"
      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <circle cx="12" cy="12" r="3"></circle>
-          <path d="M12 1v6m0 6v6m5.196-15.804l-4.243 4.243m-5.657 5.657l-4.243 4.243M23 12h-6m-6 0H1m15.804 5.196l-4.243-4.243m-5.657-5.657L2.661 2.661"></path>
+        {/* Gear icon */}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
        </svg>
        <span>Settings</span>
      </button>
--- a/src/index.css
+++ b/src/index.css
@@ -6,21 +6,22 @@
 }

 :root {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  line-height: 1.5;
  font-weight: 400;
-  /* Responsive base: 16px at 320px, scales up to 18px by 768px */
-  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
+  /* Fixed 16px – we're always rendering at phone scale */
+  font-size: 16px;

-  --color-primary: #1be62c;
-  --color-primary-hover: #18c925;
-  --color-bg-soft: #f1eee1;
+  --touch-min: 44px;
+
+  --color-primary: #22c55e;
+  --color-primary-hover: #16a34a;
+  --color-bg-soft: #f5f0e8;
  --color-surface: #ffffff;
-  --color-accent-light: #cff2dc;
-  --color-accent-bright: #c3fd2f;
+  --color-accent-light: #dcfce7;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
-  --color-border: #cff2dc;
+  --color-border: #e5e7eb;

  color: var(--color-text);
  background-color: var(--color-bg-soft);
@@ -40,16 +41,39 @@ a:hover {
 }

 html {
-  overflow-x: hidden;
+  height: 100%;
  -webkit-text-size-adjust: 100%;
 }

 body {
  margin: 0;
-  min-width: 280px;
-  min-height: 100vh;
+  height: 100%;
  min-height: 100dvh;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  overflow: hidden;
+  /* Desktop: show as phone on a desk surface */
+  background: #ccc8c0;
+}
+
+/* ── Phone shell on desktop ───────────────────────────── */
+@media (min-width: 600px) {
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #bbb7af;
+  }
+
+  #root {
+    width: 390px !important;
+    max-width: 390px !important;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    overflow: hidden;
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);
+    position: relative;
+    flex-shrink: 0;
+  }
 }

 h1 {
--- a/src/pages/HistoryPage.tsx
+++ b/src/pages/HistoryPage.tsx
@@ -11,21 +11,7 @@ interface JournalEntry {
 export default function HistoryPage() {
  const [currentMonth, setCurrentMonth] = useState(new Date())
  
-  // Mock data - replace with actual Firebase data later
-  const mockEntries: JournalEntry[] = [
-    {
-      id: '1',
-      date: new Date(2026, 1, 12),
-      title: 'Feeling much lighter today',
-      content: 'After the long conversation yesterday, I woke up with a sense of clarity I haven\'t felt in weeks...'
-    },
-    {
-      id: '2',
-      date: new Date(2026, 1, 5),
-      title: 'Morning thoughts',
-      content: 'The coffee smells amazing this morning. Simple pleasures like this remind me...'
-    }
-  ]
+  const entries: JournalEntry[] = []

  const getDaysInMonth = (date: Date) => {
    const year = date.getFullYear()
@@ -39,7 +25,7 @@ export default function HistoryPage() {
  }

  const hasEntryOnDate = (day: number) => {
-    return mockEntries.some(entry => {
+    return entries.some(entry => {
      const entryDate = new Date(entry.date)
      return entryDate.getDate() === day &&
        entryDate.getMonth() === currentMonth.getMonth() &&
@@ -82,12 +68,6 @@ export default function HistoryPage() {

  return (
    <div className="history-page">
-      <div className="history-bg-decoration">
-        <div className="bg-orb bg-orb-1"></div>
-        <div className="bg-orb bg-orb-2"></div>
-        <div className="bg-pattern"></div>
-      </div>
-
      <header className="history-header">
        <div className="history-header-text">
          <h1>History</h1>
@@ -155,7 +135,11 @@ export default function HistoryPage() {
          <h3 className="recent-entries-title">RECENT ENTRIES</h3>
          
          <div className="entries-list">
-            {mockEntries.map(entry => (
+            {entries.length === 0 ? (
+              <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
+                No entries yet. Start writing!
+              </p>
+            ) : entries.map(entry => (
              <button
                key={entry.id}
                type="button"
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -10,36 +10,29 @@ export default function HomePage() {

  if (loading) {
    return (
-      <div className="home-page">
-        <p>Loading…</p>
+      <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <p style={{ color: '#9ca3af' }}>Loading…</p>
      </div>
    )
  }

  if (!user) {
    return (
-      <div className="home-page">
-        <h1>Grateful Journal</h1>
-        <p>Sign in to start your journal.</p>
-        <Link to="/login" className="home-login-link">
-          Go to login
-        </Link>
+      <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
+        <h1 style={{ fontFamily: 'Playfair Display, Georgia, serif', color: '#1a1a1a' }}>Grateful Journal</h1>
+        <p style={{ color: '#6b7280' }}>Sign in to start your journal.</p>
+        <Link to="/login" className="home-login-link">Go to login</Link>
      </div>
    )
  }

-  const displayName = user.displayName ?? user.email ?? 'there'
-  
-  // Get current date formatted like "THURSDAY, OCT 24"
+  // Format date: "THURSDAY, OCT 24"
  const today = new Date()
-  const dateString = today.toLocaleDateString('en-US', { 
-    weekday: 'long', 
-    month: 'short', 
-    day: 'numeric' 
-  }).toUpperCase()
+  const dateString = today
+    .toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
+    .toUpperCase()

  const handleWrite = () => {
-    console.log('Saving entry:', { title, entry })
    // TODO: Save to Firebase
    setTitle('')
    setEntry('')
@@ -47,23 +40,6 @@ export default function HomePage() {

  return (
    <div className="home-page">
-      <div className="home-bg-decoration">
-        <div className="bg-orb bg-orb-1"></div>
-        <div className="bg-orb bg-orb-2"></div>
-        <div className="bg-orb bg-orb-3"></div>
-        <div className="bg-pattern"></div>
-      </div>
-      
-      <header className="home-header">
-        <h1>Grateful Journal</h1>
-        <div className="home-user">
-          <span className="home-username">{displayName}</span>
-          <button type="button" className="home-sign-out" onClick={() => signOut()}>
-            Sign out
-          </button>
-        </div>
-      </header>
-      
      <main className="journal-container">
        <div className="journal-card">
          <div className="journal-date">{dateString}</div>
@@ -92,3 +68,4 @@ export default function HomePage() {
    </div>
  )
 }
+
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -19,12 +19,6 @@ export default function SettingsPage() {

  return (
    <div className="settings-page">
-      <div className="settings-bg-decoration">
-        <div className="bg-orb bg-orb-1"></div>
-        <div className="bg-orb bg-orb-2"></div>
-        <div className="bg-pattern"></div>
-      </div>
-
      <header className="settings-header">
        <div className="settings-header-text">
          <h1>Settings</h1>
@@ -80,8 +74,12 @@ export default function SettingsPage() {
            <div className="settings-item">
              <div className="settings-item-icon settings-item-icon-gray">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path>
-                  <path d="M12 6v6l4 2"></path>
+                  <path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"></path>
+                  <path d="M5 19.5C5.5 18 6 15 6 12c0-1.73.37-3.36 1.03-4.83"></path>
+                  <path d="M10 21c.2-2 .4-5 .4-6 0-1 .2-1.93.56-2.78"></path>
+                  <path d="M14 21c.2-2 .4-5 .4-6 0-3-1-5-3.4-6.5"></path>
+                  <path d="M18.5 21C18 18.5 18 17 18 12c0-1-.07-2-.2-3"></path>
+                  <path d="M22 12a10 10 0 0 1-1.53 5.35"></path>
                </svg>
              </div>
              <div className="settings-item-content">