diff --git a/docs/stories/epic-12-branding-refresh.md b/docs/stories/epic-12-branding-refresh.md new file mode 100644 index 0000000..0ad6660 --- /dev/null +++ b/docs/stories/epic-12-branding-refresh.md @@ -0,0 +1,135 @@ +# Epic 12: Branding Refresh - Logo and Color Scheme Update + +## Epic Goal + +Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme from charcoal/warm gray to an olive green palette that aligns with the new botanical logo design. + +## Epic Description + +### Existing System Context + +- **Current relevant functionality:** The application uses a horizontal SVG logo (240×60px) in navbar and footer, with a color scheme based on Charcoal (#4A4A42) and Warm Gray (#C9C4BA) +- **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components +- **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components. + +### Enhancement Details + +**What's being added/changed:** + +1. Replace horizontal SVG logo with new square logo featuring Palestinian tatreez (embroidery) patterns +2. Update color palette from charcoal/warm gray to olive green theme +3. Adjust CSS/layouts to accommodate square logo dimensions +4. Update all brand assets (favicon, mobile icons, email logo) + +**New Color Palette:** + +| Color | Old Hex | New Hex | Usage | +|-------|---------|---------|-------| +| Primary | #4A4A42 (Charcoal) | #8AB357 (Olive Green) | Primary backgrounds, accents | +| Secondary | #C9C4BA (Warm Gray) | #A5C87A (Light Olive) | Secondary backgrounds, borders | +| Background | #E8E4DC (Off-White) | #E8E4DC (Off-White) | Light backgrounds (unchanged) | +| Text | #1A1A1A (Deep Black) | #1A1A1A (Deep Black) | Text, headings (unchanged) | + +**How it integrates:** + +- Logo files will be placed in `public/images/` replacing existing SVG files +- Tailwind CSS color configuration will be updated +- Existing Blade components will automatically use new colors via CSS variables + +**Success criteria:** + +- New square logo displays correctly in navbar and footer +- Color scheme consistently uses olive green palette across all pages +- All favicon and mobile app icons updated +- No visual regressions in existing UI components + +## Stories + +### Story 12.1: Logo Asset Deployment and CSS Layout Updates +**File:** `story-12.1-logo-asset-deployment.md` + +Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment. + +### Story 12.2: Core CSS Theme Update - Olive Green Palette +**File:** `story-12.2-core-css-theme-update.md` + +Update Tailwind CSS theme variables from charcoal/warm gray to olive green palette. Add color variants for hover, active, and light states. Maintain backward compatibility aliases. + +### Story 12.3: Blade Component Color Migration +**File:** `story-12.3-blade-component-color-migration.md` + +Update all Blade components and pages to use the new olive green palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components. + +### Story 12.4: Email Template Color and Logo Update +**File:** `story-12.4-email-template-color-update.md` + +Update email templates to use new olive green colors and square logo. Includes theme CSS, header/footer components, button styles, and all notification emails. + +### Story 12.5: PDF Template Color and Logo Update +**File:** `story-12.5-pdf-template-color-update.md` + +Update PDF export templates to use new olive green colors and square logo. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService. + +### Story 12.6: Brand Documentation and Cleanup +**File:** `story-12.6-documentation-update.md` + +Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.md`, `CLAUDE.md`) to reflect new branding. Update test color assertions. Remove old logo files and cleanup. + +## Compatibility Requirements + +- [x] Existing APIs remain unchanged +- [x] Database schema changes are backward compatible (N/A - no DB changes) +- [x] UI changes follow existing patterns +- [x] Performance impact is minimal + +## Risk Mitigation + +- **Primary Risk:** Color changes may affect accessibility (contrast ratios) +- **Mitigation:** Test all color combinations for WCAG AA compliance; adjust shades if needed +- **Rollback Plan:** Git revert to previous commit; old logo files preserved in git history + +## Definition of Done + +- [ ] All stories completed with acceptance criteria met +- [ ] New logo displays correctly across all pages and devices +- [ ] Color scheme is consistent throughout the application +- [ ] Brand documentation is updated +- [ ] No regression in existing features +- [ ] Visual QA completed on major pages + +## Technical Notes + +### Logo Files Generated + +Located in `logo/` folder, ready for deployment: + +| File | Dimensions | Target Location | +|------|------------|-----------------| +| `favicon.ico` | 16/32/48px | `public/favicon.ico` | +| `favicon-16x16.png` | 16×16 | `public/favicon-16x16.png` | +| `favicon-32x32.png` | 32×32 | `public/favicon-32x32.png` | +| `apple-touch-icon.png` | 180×180 | `public/apple-touch-icon.png` | +| `android-chrome-192x192.png` | 192×192 | `public/android-chrome-192x192.png` | +| `android-chrome-512x512.png` | 512×512 | `public/android-chrome-512x512.png` | +| `logo-square.png` | 623×628 | `public/images/logo.png` | +| `logo-email.png` | 200×200 | `public/images/logo-email.png` | + +### Color Values for Implementation + +```css +/* New Olive Green Palette */ +--color-primary: #8AB357; /* Olive Green - replaces Charcoal */ +--color-secondary: #A5C87A; /* Light Olive - replaces Warm Gray */ +--color-background: #E8E4DC; /* Off-White - unchanged */ +--color-text: #1A1A1A; /* Deep Black - unchanged */ + +/* Additional olive variants for UI states */ +--color-primary-hover: #7AA347; /* Darker olive for hover states */ +--color-primary-dark: #6A9337; /* Dark olive for active/pressed */ +--color-primary-light: #B5D88A; /* Light olive for highlights */ +``` + +## Dependencies + +- Logo files already generated in `logo/` folder +- No external dependencies required diff --git a/docs/stories/story-12.1-logo-asset-deployment.md b/docs/stories/story-12.1-logo-asset-deployment.md new file mode 100644 index 0000000..a219e61 --- /dev/null +++ b/docs/stories/story-12.1-logo-asset-deployment.md @@ -0,0 +1,190 @@ +# Story 12.1: Logo Asset Deployment and CSS Layout Updates + +## Story + +**As a** developer +**I want to** deploy the new square logo with Palestinian tatreez patterns and update CSS layouts +**So that** the application displays the new brand identity correctly throughout the website + +## Acceptance Criteria + +### AC1: Logo Files Deployed to Public Directory + +**Given** logo files have been generated in the `logo/` folder +**When** I deploy them to the public directory +**Then** the following files are placed correctly: + +| Source File | Destination | Purpose | +|-------------|-------------|---------| +| `logo/favicon.ico` | `public/favicon.ico` | Browser tab icon | +| `logo/favicon-16x16.png` | `public/favicon-16x16.png` | Small favicon | +| `logo/favicon-32x32.png` | `public/favicon-32x32.png` | Standard favicon | +| `logo/favicon-48x48.png` | `public/favicon-48x48.png` | Large favicon | +| `logo/apple-touch-icon.png` | `public/apple-touch-icon.png` | iOS home screen | +| `logo/android-chrome-192x192.png` | `public/android-chrome-192x192.png` | Android home screen | +| `logo/android-chrome-512x512.png` | `public/android-chrome-512x512.png` | Android splash | +| `logo/logo-square.png` | `public/images/logo.png` | Main logo | +| `logo/logo-email.png` | `public/images/logo-email.png` | Email templates | + +### AC2: Navigation Component Updated for Square Logo + +**Given** the navigation uses a horizontal logo layout +**When** I update `resources/views/components/navigation.blade.php` +**Then** the following changes are applied: +- Logo container adjusted for square aspect ratio +- Logo height set to appropriate size (e.g., 48px-56px) +- Width set to auto to maintain aspect ratio +- Responsive sizing for mobile views +- Proper alignment with navigation items + +### AC3: Footer Component Updated for Square Logo + +**Given** the footer uses the logo +**When** I update `resources/views/components/footer.blade.php` +**Then** the following changes are applied: +- Logo container adjusted for square format +- Appropriate sizing for footer context +- Proper spacing and alignment + +### AC4: Logo Blade Component Updated + +**Given** `resources/views/components/logo.blade.php` references logo files +**When** I update the component +**Then** it: +- Uses the new PNG logo as the primary source +- Removes references to old horizontal SVG +- Supports size variants via props (sm, md, lg) +- Maintains alt text "LIBRA for Rights" + +### AC5: Auth Pages Logo Updated + +**Given** auth pages (login, password reset, etc.) display the logo +**When** I update auth page layouts +**Then** the square logo displays correctly: +- Centered on auth pages +- Appropriate size for auth context +- Proper spacing above forms + +### AC6: Favicon Displays in Browser Tab + +**Given** the new favicon files are deployed +**When** I view the application in a browser +**Then** the botanical design icon appears in: +- Browser tab +- Bookmarks +- Browser history + +### AC7: Mobile App Icons Updated + +**Given** mobile manifest files reference app icons +**When** I update `public/manifest.json` (if exists) or meta tags +**Then** mobile icons reference the new files: +- `apple-touch-icon.png` for iOS +- `android-chrome-*.png` for Android + +### AC8: Logo Displays Correctly on All Breakpoints + +**Given** the application is responsive +**When** I test the logo on different screen sizes +**Then** it displays correctly: +- Desktop: Full size logo in navbar +- Tablet: Appropriately scaled +- Mobile: Compact size that fits mobile nav + +### AC9: RTL Layout Support + +**Given** the application supports RTL (Arabic) +**When** viewing in Arabic mode +**Then** the logo displays correctly without mirroring + +### AC10: Old Logo Files Removed + +**Given** old SVG logo files exist +**When** deployment is complete +**Then** the following old files are removed or archived: +- `public/images/logo.svg` +- `public/images/logo-reversed.svg` +- `public/images/logo-mono.svg` +- `public/favicon.svg` + +## Technical Notes + +### Files to Modify + +**Components:** +- `resources/views/components/navigation.blade.php` +- `resources/views/components/footer.blade.php` +- `resources/views/components/logo.blade.php` +- `resources/views/components/app-logo.blade.php` +- `resources/views/components/app-logo-icon.blade.php` + +**Layouts:** +- `resources/views/components/layouts/public.blade.php` (head section for favicon meta) +- `resources/views/components/layouts/app.blade.php` (if applicable) + +**Auth Views (check for logo usage):** +- `resources/views/livewire/pages/auth/login.blade.php` +- `resources/views/livewire/pages/auth/forgot-password.blade.php` +- `resources/views/livewire/pages/auth/reset-password.blade.php` + +### Logo Sizing Guidelines + +| Context | Recommended Size | +|---------|------------------| +| Navbar (Desktop) | 48-56px height | +| Navbar (Mobile) | 40px height | +| Footer | 64-80px height | +| Auth Pages | 80-100px height | +| Email Header | 60px height | + +### CSS Updates for Square Logo + +```css +/* Example navbar logo styling */ +.logo-container { + height: 48px; + width: 48px; +} + +.logo-container img { + height: 100%; + width: auto; + object-fit: contain; +} + +/* Mobile */ +@media (max-width: 768px) { + .logo-container { + height: 40px; + width: 40px; + } +} +``` + +## Dev Checklist + +- [ ] Copy logo files from `logo/` to `public/` directories +- [ ] Update `navigation.blade.php` for square logo +- [ ] Update `footer.blade.php` for square logo +- [ ] Update `logo.blade.php` component +- [ ] Update `app-logo.blade.php` component +- [ ] Update `app-logo-icon.blade.php` component +- [ ] Update favicon meta tags in layout head +- [ ] Update auth page logo displays +- [ ] Test favicon in browser tab +- [ ] Test logo on desktop viewport +- [ ] Test logo on tablet viewport +- [ ] Test logo on mobile viewport +- [ ] Test RTL layout (Arabic) +- [ ] Remove old SVG logo files +- [ ] Run existing tests to ensure no regressions + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Primarily asset replacement and CSS adjustments + +## Dependencies + +- Logo files already generated in `logo/` folder +- No dependencies on other Epic 12 stories (can run in parallel with 12.2) diff --git a/docs/stories/story-12.2-core-css-theme-update.md b/docs/stories/story-12.2-core-css-theme-update.md new file mode 100644 index 0000000..484d003 --- /dev/null +++ b/docs/stories/story-12.2-core-css-theme-update.md @@ -0,0 +1,194 @@ +# Story 12.2: Core CSS Theme Update - Olive Green Palette + +## Story + +**As a** developer +**I want to** update the Tailwind CSS theme to use the new olive green color palette +**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo + +## Acceptance Criteria + +### AC1: Update Color Variables in `resources/css/app.css` + +**Given** the current theme uses Charcoal/Warm Gray palette +**When** I update the `@theme` block +**Then** the following color mappings are applied: + +| Old Variable | Old Hex | New Variable | New Hex | +|--------------|---------|--------------|---------| +| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) | +| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) | +| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) | +| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged | +| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged | + +### AC2: Add Olive Green Color Variants + +**Given** the new palette needs hover and active states +**When** I update the theme +**Then** these additional variants are defined: + +| Variable | Hex | Usage | +|----------|-----|-------| +| `--color-primary` | `#8AB357` | Primary olive green | +| `--color-primary-hover` | `#7AA347` | Darker olive for hover | +| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed | +| `--color-primary-light` | `#B5D88A` | Light olive for highlights | +| `--color-accent` | `#A5C87A` | Secondary light olive | +| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds | + +### AC3: Maintain Backward Compatibility Aliases + +**Given** existing components may use old color names +**When** the theme is updated +**Then** aliases are updated so existing classes continue to work: +- `--color-charcoal` → points to `--color-primary` (Olive Green) +- `--color-warm-gray` → points to `--color-accent` (Light Olive) +- Legacy navy/gold aliases remain for any residual references + +### AC4: Update Button Styles + +**Given** button classes use the primary color +**When** theme is updated +**Then** `.btn-primary` and `.btn-secondary` use new olive palette: +- Primary: Olive Green background (`#8AB357`), Off-White text +- Primary Hover: Darker Olive (`#7AA347`) +- Secondary: Light Olive border, Deep Black text +- Hover states updated accordingly + +### AC5: Update Form Focus States + +**Given** form inputs have focus rings +**When** theme is updated +**Then** focus states use Olive Green: +- `focus:border-accent` → Light Olive border +- `focus:ring-accent` → Light Olive ring +- `focus:ring-primary` → Olive Green ring + +### AC6: Update Link Colors + +**Given** links use accent colors +**When** theme is updated +**Then** link colors use olive palette: +- Default: Olive Green (`#8AB357`) +- Hover: Darker Olive (`#7AA347`) +- Visited: Primary Olive (unchanged) + +### AC7: Status Colors Unchanged + +**Given** status colors serve functional purposes +**When** theme is updated +**Then** these remain unchanged: +- `--color-success: #27AE60` +- `--color-danger: #E74C3C` +- `--color-warning: #F39C12` + +### AC8: WCAG AA Contrast Compliance + +**Given** accessibility requirements +**When** new colors are applied +**Then** all text/background combinations meet WCAG AA: +- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text +- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text +- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio + +### AC9: Update Prose Class + +**Given** `.prose-brand` class exists for blog content +**When** theme is updated +**Then** prose colors use olive palette: +- Headings: Deep Black +- Links: Olive Green +- Body: Deep Black + +### AC10: Build Succeeds + +**Given** CSS changes are made +**When** I run `npm run build` +**Then** the build completes successfully without errors + +## Technical Notes + +### Files to Modify +- `resources/css/app.css` - Main theme file + +### New Color Palette Reference + +| Color | Hex | RGB | Usage | +|-------|-----|-----|-------| +| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color | +| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states | +| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states | +| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent | +| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds | +| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights | +| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) | +| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) | + +### Contrast Verification + +Use WebAIM Contrast Checker to verify: +- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA) +- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes) +- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA) + +**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead. + +### CSS Theme Block Example + +```css +@theme { + /* Primary Olive Green Palette */ + --color-primary: #8AB357; + --color-primary-hover: #7AA347; + --color-primary-dark: #6A9337; + --color-primary-light: #B5D88A; + + /* Secondary/Accent */ + --color-accent: #A5C87A; + --color-accent-light: #C5D9A5; + --color-accent-content: #A5C87A; + --color-accent-foreground: #1A1A1A; + + /* Neutrals (unchanged) */ + --color-background: #E8E4DC; + --color-text: #1A1A1A; + + /* Backward compatibility */ + --color-charcoal: var(--color-primary); + --color-warm-gray: var(--color-accent); + --color-off-white: var(--color-background); + + /* Status colors (unchanged) */ + --color-success: #27AE60; + --color-danger: #E74C3C; + --color-warning: #F39C12; +} +``` + +## Dev Checklist + +- [ ] Update `@theme` block with new olive green values +- [ ] Add olive green variants (hover, dark, light) +- [ ] Update backward-compatible aliases +- [ ] Update `.btn-primary` styles +- [ ] Update `.btn-secondary` styles +- [ ] Update form focus states +- [ ] Update link colors +- [ ] Update `.prose-brand` class +- [ ] Update skip-link focus styles +- [ ] Update timeline-dot color +- [ ] Update skeleton loader color +- [ ] Verify status colors unchanged +- [ ] Run contrast checker on all combinations +- [ ] Run `npm run build` successfully +- [ ] Visual test in browser + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Low - CSS-only changes with aliases for backward compatibility + +## Dependencies + +- Can run in parallel with Story 12.1 (Logo Deployment) diff --git a/docs/stories/story-12.3-blade-component-color-migration.md b/docs/stories/story-12.3-blade-component-color-migration.md new file mode 100644 index 0000000..f527600 --- /dev/null +++ b/docs/stories/story-12.3-blade-component-color-migration.md @@ -0,0 +1,211 @@ +# Story 12.3: Blade Component Color Migration - Olive Green + +## Story + +**As a** developer +**I want to** update all Blade components and pages to use the new olive green palette +**So that** the entire application has consistent branding with the new botanical logo + +## Acceptance Criteria + +### AC1: Navigation Component Updated + +**Given** `resources/views/components/navigation.blade.php` uses charcoal colors +**When** I update the component +**Then** the following changes are applied: +- Background: Charcoal → Olive Green (`bg-charcoal` → `bg-primary`) +- Text/Links: Off-White for contrast on olive background +- Hover states: Use darker olive (`hover:bg-primary-hover`) +- Mobile menu uses new olive colors +- Active states updated accordingly + +### AC2: Footer Component Updated + +**Given** `resources/views/components/footer.blade.php` uses charcoal colors +**When** I update the component +**Then** the following changes are applied: +- Background: Charcoal → Olive Green +- Text: Off-White for contrast +- Links: Light Olive with hover states +- Social icons: Appropriate contrast colors + +### AC3: Card Components Updated + +**Given** card components use old accent colors +**When** I update `resources/views/components/ui/card.blade.php` +**Then** the following changes are applied: +- Background: Off-White (unchanged) +- Borders/accents: Light Olive (`border-accent`) +- Text: Deep Black (unchanged) +- Hover states: Subtle olive highlight + +### AC4: Stat Card Component Updated + +**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors +**When** I update the component +**Then** accent colors use olive palette: +- Icon backgrounds: Light Olive +- Value highlights: Olive Green +- Borders: Light Olive + +### AC5: Spinner Component Updated + +**Given** `resources/views/components/spinner.blade.php` uses old colors +**When** I update the component +**Then** spinner uses Olive Green + +### AC6: Toast Component Updated + +**Given** `resources/views/components/toast.blade.php` uses old colors +**When** I update the component +**Then** default toast uses olive palette (status colors remain unchanged) + +### AC7: Language Toggle Updated + +**Given** `resources/views/components/language-toggle.blade.php` uses old colors +**When** I update the component +**Then** active/inactive states use olive colors + +### AC8: Public Pages Updated + +**Given** public pages use old accent colors +**When** I update the following pages +**Then** they use the new olive palette: +- `resources/views/pages/home.blade.php` +- `resources/views/pages/booking.blade.php` +- `resources/views/pages/terms.blade.php` +- `resources/views/pages/privacy.blade.php` +- `resources/views/pages/legal.blade.php` + +### AC9: Post Pages Updated + +**Given** post display pages use old colors +**When** I update the following pages +**Then** they use the new olive palette: +- `resources/views/livewire/pages/posts/index.blade.php` +- `resources/views/livewire/pages/posts/show.blade.php` + +### AC10: Admin Dashboard Components Updated + +**Given** admin dashboard uses accent colors +**When** I update admin components +**Then** they use olive palette: +- Sidebar/navigation accents +- Card highlights +- Button accents +- Table header accents + +### AC11: Client Dashboard Components Updated + +**Given** client dashboard uses accent colors +**When** I update client components +**Then** they use olive palette consistently + +### AC12: Public Layout Updated + +**Given** `resources/views/components/layouts/public.blade.php` uses old colors +**When** I update the layout +**Then** it uses the new olive palette + +### AC13: RTL Layout Integrity + +**Given** the application supports RTL (Arabic) +**When** colors are updated +**Then** RTL layout displays correctly with new olive colors + +### AC14: Responsive Appearance + +**Given** the application is responsive +**When** colors are updated +**Then** all breakpoints display correctly (mobile, tablet, desktop) + +## Technical Notes + +### Files to Modify + +**Components:** +- `resources/views/components/navigation.blade.php` +- `resources/views/components/footer.blade.php` +- `resources/views/components/logo.blade.php` +- `resources/views/components/language-toggle.blade.php` +- `resources/views/components/spinner.blade.php` +- `resources/views/components/toast.blade.php` +- `resources/views/components/ui/card.blade.php` +- `resources/views/components/ui/stat-card.blade.php` +- `resources/views/components/layouts/public.blade.php` + +**Public Pages:** +- `resources/views/pages/home.blade.php` +- `resources/views/pages/booking.blade.php` +- `resources/views/pages/terms.blade.php` +- `resources/views/pages/privacy.blade.php` +- `resources/views/pages/legal.blade.php` + +**Post Pages:** +- `resources/views/livewire/pages/posts/index.blade.php` +- `resources/views/livewire/pages/posts/show.blade.php` + +**Admin Pages (review for color usage):** +- `resources/views/livewire/admin/` directory + +**Client Pages (review for color usage):** +- `resources/views/livewire/client/` directory + +### Color Class Mapping + +| Old Class | New Class | +|-----------|-----------| +| `bg-charcoal` | `bg-primary` (Olive Green) | +| `text-charcoal` | `text-primary` | +| `border-charcoal` | `border-primary` | +| `bg-warm-gray` | `bg-accent` (Light Olive) | +| `text-warm-gray` | `text-accent` | +| `border-warm-gray` | `border-accent` | +| `hover:bg-charcoal` | `hover:bg-primary-hover` | +| `hover:text-charcoal` | `hover:text-primary-hover` | + +### Visual Hierarchy with Olive Green + +**Primary Actions:** +- Background: Olive Green (`#8AB357`) +- Text: Off-White (`#E8E4DC`) or Deep Black depending on contrast + +**Secondary Actions:** +- Border: Light Olive (`#A5C87A`) +- Text: Olive Green or Deep Black + +**Highlights/Accents:** +- Background: Light Olive (`#A5C87A`) or Pale Olive (`#C5D9A5`) +- Text: Deep Black for contrast + +## Dev Checklist + +- [ ] Update `navigation.blade.php` +- [ ] Update `footer.blade.php` +- [ ] Update `language-toggle.blade.php` +- [ ] Update `spinner.blade.php` +- [ ] Update `toast.blade.php` +- [ ] Update `card.blade.php` +- [ ] Update `stat-card.blade.php` +- [ ] Update `public.blade.php` layout +- [ ] Update `home.blade.php` +- [ ] Update `booking.blade.php` +- [ ] Update `terms.blade.php` +- [ ] Update `privacy.blade.php` +- [ ] Update `legal.blade.php` +- [ ] Update `posts/index.blade.php` +- [ ] Update `posts/show.blade.php` +- [ ] Review and update admin dashboard components +- [ ] Review and update client dashboard components +- [ ] Test RTL layout (Arabic) +- [ ] Test responsive breakpoints +- [ ] Visual review all updated pages + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Mostly class name updates with CSS variables doing the heavy lifting + +## Dependencies + +- Story 12.2 (Core CSS Theme Update) must be completed first diff --git a/docs/stories/story-12.4-email-template-color-update.md b/docs/stories/story-12.4-email-template-color-update.md new file mode 100644 index 0000000..1c25914 --- /dev/null +++ b/docs/stories/story-12.4-email-template-color-update.md @@ -0,0 +1,179 @@ +# Story 12.4: Email Template Color and Logo Update + +## Story + +**As a** developer +**I want to** update email templates to use the new olive green colors and square logo +**So that** all email communications reflect the new LIBRA for Rights branding + +## Acceptance Criteria + +### AC1: Email Theme CSS Updated + +**Given** `resources/views/vendor/mail/html/themes/default.css` uses charcoal/warm gray colors +**When** I update the stylesheet +**Then** the following changes are applied: + +| Element | Old Color | New Color | +|---------|-----------|-----------| +| Links (`a`) | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | +| Headings (h1, h2, h3) | `#4A4A42` (Charcoal) | `#6A9337` (Dark Olive) | +| Header background | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | +| Footer links | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) | +| Primary button | `#4A4A42` bg, `#E8E4DC` text | `#8AB357` bg, `#E8E4DC` text | +| Table headers | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | +| Panel border | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) | + +### AC2: Email Header Component Updated + +**Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles +**When** I update the component +**Then**: +- Background color updated to Olive Green (`#8AB357`) +- Logo reference updated to new square logo (`logo-email.png`) +- Logo sizing adjusted for square format + +### AC3: Email Footer Component Updated + +**Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles +**When** I update the component +**Then** any inline color references use olive palette + +### AC4: Button Component Updated + +**Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles +**When** I update the component +**Then** primary buttons use: +- Background: Olive Green (`#8AB357`) +- Text: Off-White (`#E8E4DC`) +- Hover hint: Darker Olive (`#7AA347`) + +### AC5: Panel Component Updated + +**Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles +**When** I update the component +**Then** panel border uses Light Olive (`#A5C87A`) + +### AC6: Email Logo Updated to Square Format + +**Given** email header displays the logo +**When** emails are sent +**Then**: +- Logo uses `logo-email.png` (square format, 60px height) +- Logo is centered or left-aligned appropriately +- Alt text reads "LIBRA for Rights" + +### AC7: All Email Templates Tested + +**Given** the application sends various email types +**When** I test each email template +**Then** colors and logo display correctly: +- Welcome email +- Booking submitted confirmation +- Booking approved/rejected +- Consultation reminders (24h, 2h) +- Timeline update notification +- Password reset +- Guest booking notifications +- Admin notifications + +### AC8: Plain Text Fallback Unaffected + +**Given** plain text email templates exist +**When** colors are updated +**Then** plain text templates continue to work (no color changes needed) + +### AC9: Email Client Compatibility + +**Given** emails are viewed in various clients +**When** I test the templates +**Then** they render correctly in: +- Gmail (web and mobile) +- Outlook (desktop and web) +- Apple Mail +- Mobile email apps + +## Technical Notes + +### Files to Modify + +**Theme CSS:** +- `resources/views/vendor/mail/html/themes/default.css` + +**HTML Components:** +- `resources/views/vendor/mail/html/header.blade.php` +- `resources/views/vendor/mail/html/footer.blade.php` +- `resources/views/vendor/mail/html/button.blade.php` +- `resources/views/vendor/mail/html/panel.blade.php` +- `resources/views/vendor/mail/html/layout.blade.php` (if contains colors) + +### Color Mapping for Email CSS + +```css +/* Old → New */ +#4A4A42 → #8AB357 /* Charcoal → Olive Green */ +#C9C4BA → #A5C87A /* Warm Gray → Light Olive */ +#6A9337 /* Dark Olive - for headings */ +#7AA347 /* Darker Olive - for hover hints */ +``` + +### Email Logo Implementation + +```html + +LIBRA for Rights + + +LIBRA for Rights +``` + +### Email-Safe Colors + +Email clients have limited CSS support. Ensure: +- Use inline styles for critical colors +- Test in major email clients +- Maintain fallback background colors +- Use web-safe colors where possible + +### Testing Emails + +Use Laravel's mail preview or Mailtrap to test: +```bash +# Preview emails in browser (if configured) +php artisan serve +# Visit mail preview routes +``` + +## Dev Checklist + +- [ ] Update `default.css` header background color +- [ ] Update `default.css` link colors +- [ ] Update `default.css` heading colors +- [ ] Update `default.css` button colors (`.button-primary`) +- [ ] Update `default.css` table header colors +- [ ] Update `default.css` panel border color +- [ ] Update `default.css` footer link colors +- [ ] Update `header.blade.php` - inline styles and logo reference +- [ ] Update `footer.blade.php` - inline styles +- [ ] Review `button.blade.php` for inline styles +- [ ] Review `panel.blade.php` for inline styles +- [ ] Test Welcome email appearance +- [ ] Test Booking emails appearance +- [ ] Test Reminder emails appearance +- [ ] Test Timeline update email appearance +- [ ] Test Password reset email +- [ ] Test Guest booking emails +- [ ] Verify RTL email layout (Arabic) +- [ ] Test in Gmail +- [ ] Test in Outlook +- [ ] Test in Apple Mail + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Low - Email styling is isolated from main app + +## Dependencies + +- Story 12.1 (Logo Deployment) must be completed for `logo-email.png` +- Story 12.2 (Core CSS) should be completed for color reference consistency diff --git a/docs/stories/story-12.5-pdf-template-color-update.md b/docs/stories/story-12.5-pdf-template-color-update.md new file mode 100644 index 0000000..4cb4d8b --- /dev/null +++ b/docs/stories/story-12.5-pdf-template-color-update.md @@ -0,0 +1,184 @@ +# Story 12.5: PDF Template Color and Logo Update + +## Story + +**As a** developer +**I want to** update PDF export templates to use the new olive green colors and square logo +**So that** all exported documents reflect the new LIBRA for Rights branding + +## Acceptance Criteria + +### AC1: Users Export PDF Updated + +**Given** `resources/views/pdf/users-export.blade.php` uses charcoal colors +**When** I update the template +**Then** the following changes are applied: +- Header background: Charcoal → Olive Green (`#8AB357`) +- Header text: Off-White (`#E8E4DC`) +- Accent elements: Warm Gray → Light Olive (`#A5C87A`) +- Table headers: Charcoal → Olive Green +- Borders: Updated to olive palette +- Logo: Square format + +### AC2: Consultations Export PDF Updated + +**Given** `resources/views/pdf/consultations-export.blade.php` uses charcoal colors +**When** I update the template +**Then** colors match the new olive green palette: +- Headers: Olive Green background +- Status badges: Appropriate contrast colors +- Table styling: Olive accents + +### AC3: Timelines Export PDF Updated + +**Given** `resources/views/pdf/timelines-export.blade.php` uses charcoal colors +**When** I update the template +**Then** colors match the new olive green palette: +- Timeline markers: Olive Green +- Section headers: Olive Green +- Borders and accents: Light Olive + +### AC4: Monthly Report PDF Updated + +**Given** `resources/views/pdf/monthly-report.blade.php` uses charcoal colors +**When** I update the template +**Then** the following changes are applied: +- Header/footer: Olive Green background +- Accent colors: Light Olive +- Charts/graphs: Updated olive color scheme +- Text: Deep Black for readability +- Logo: Square format + +### AC5: Monthly Report Service Updated + +**Given** `app/Services/MonthlyReportService.php` contains color references for charts +**When** I update the service +**Then** chart colors use olive palette: +- Pie chart colors: Olive Green, Light Olive, Pale Olive +- Line chart border: Olive Green +- Bar chart fills: Olive variations + +### AC6: PDF Logo Updated to Square Format + +**Given** PDF templates include the logo +**When** PDFs are generated +**Then**: +- Logo uses square format +- Logo sized appropriately for PDF context +- Alt text/title reads "LIBRA for Rights" + +### AC7: Print-Friendly Colors + +**Given** PDFs are often printed +**When** colors are updated +**Then** they remain legible when printed: +- Olive Green (`#8AB357`) prints well +- Light Olive (`#A5C87A`) used for accents only (may appear light in grayscale) +- Sufficient contrast for all text +- Consider adding subtle borders for light-colored sections + +### AC8: All PDF Exports Tested + +**Given** the admin can export various data types +**When** I test each PDF export +**Then** colors display correctly and documents are professional: +- Users export +- Consultations export +- Timelines export +- Monthly report + +## Technical Notes + +### Files to Modify + +**PDF Templates:** +- `resources/views/pdf/users-export.blade.php` +- `resources/views/pdf/consultations-export.blade.php` +- `resources/views/pdf/timelines-export.blade.php` +- `resources/views/pdf/monthly-report.blade.php` + +**Services:** +- `app/Services/MonthlyReportService.php` (chart colors) + +**Livewire Components (review for inline PDF styles):** +- `resources/views/livewire/admin/reports/monthly-report.blade.php` + +### Color Mapping for PDFs + +| Element | Old Color | New Color | +|---------|-----------|-----------| +| Primary Background | `#4A4A42` | `#8AB357` | +| Accent/Highlight | `#C9C4BA` | `#A5C87A` | +| Light Background | `#E8E4DC` | `#E8E4DC` (unchanged) | +| Text | `#1A1A1A` | `#1A1A1A` (unchanged) | +| Table Header BG | `#4A4A42` | `#8AB357` | +| Table Header Text | `#E8E4DC` | `#E8E4DC` | +| Borders | `#C9C4BA` | `#A5C87A` | + +### PDF Styling Notes + +PDF templates use inline CSS. Common patterns to update: +```html + +
+ + +
+``` + +### Chart Color Palette for Reports + +```php +// Monthly Report Service chart colors +$chartColors = [ + 'primary' => '#8AB357', // Olive Green + 'secondary' => '#A5C87A', // Light Olive + 'tertiary' => '#C5D9A5', // Pale Olive + 'quaternary' => '#6A9337', // Dark Olive + 'background' => '#E8E4DC', // Off-White +]; +``` + +### Print Considerations + +- Olive Green (`#8AB357`) prints as medium gray - good contrast +- Light Olive (`#A5C87A`) prints as light gray - use for accents only +- Ensure table borders are visible in grayscale +- Test print preview in browser + +### PDF Logo Implementation + +```html + +LIBRA for Rights +``` + +## Dev Checklist + +- [ ] Update `users-export.blade.php` colors +- [ ] Update `users-export.blade.php` logo +- [ ] Update `consultations-export.blade.php` colors +- [ ] Update `consultations-export.blade.php` logo +- [ ] Update `timelines-export.blade.php` colors +- [ ] Update `timelines-export.blade.php` logo +- [ ] Update `monthly-report.blade.php` colors +- [ ] Update `monthly-report.blade.php` logo +- [ ] Update `MonthlyReportService.php` chart colors +- [ ] Review `monthly-report.blade.php` Livewire component +- [ ] Test Users PDF export +- [ ] Test Consultations PDF export +- [ ] Test Timelines PDF export +- [ ] Test Monthly Report PDF generation +- [ ] Verify logo displays correctly in all PDFs +- [ ] Test print preview for readability +- [ ] Test grayscale printing + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Low - PDF templates are isolated + +## Dependencies + +- Story 12.1 (Logo Deployment) must be completed for logo files +- Story 12.2 (Core CSS) should be completed for color reference consistency diff --git a/docs/stories/story-12.6-documentation-update.md b/docs/stories/story-12.6-documentation-update.md new file mode 100644 index 0000000..0099a6e --- /dev/null +++ b/docs/stories/story-12.6-documentation-update.md @@ -0,0 +1,193 @@ +# Story 12.6: Brand Documentation and Cleanup + +## Story + +**As a** developer/designer +**I want to** update brand documentation to reflect the new logo and olive green color scheme +**So that** future development maintains consistent branding + +## Acceptance Criteria + +### AC1: Brand Guide Updated + +**Given** `docs/brand.md` contains old color palette and logo description +**When** I update the document +**Then** it reflects the new branding: + +**Updated Color Palette:** + +| Color | Hex Code | Usage | +|-------|----------|-------| +| Olive Green | `#8AB357` | Primary brand color, backgrounds, accents | +| Darker Olive | `#7AA347` | Hover states | +| Dark Olive | `#6A9337` | Active states, headings | +| Light Olive | `#A5C87A` | Secondary backgrounds, borders | +| Pale Olive | `#C5D9A5` | Subtle backgrounds | +| Off-White | `#E8E4DC` | Light backgrounds | +| Deep Black | `#1A1A1A` | Text, headings | + +**Updated Logo Description:** +- Square format featuring Palestinian tatreez (embroidery) patterns +- Central botanical/olive motif +- "LIBRA FOR RIGHTS" text integrated into design +- Palestinian flag accent +- Cultural heritage elements + +### AC2: Logo Generation Instructions Updated + +**Given** `docs/logo-generation-instructions.md` describes horizontal logo generation +**When** I update the document +**Then** it reflects square logo format: +- Update dimensions to square format +- Update file naming conventions +- Remove references to horizontal aspect ratio +- Update tool instructions for square export + +### AC3: CLAUDE.md Updated + +**Given** `CLAUDE.md` contains color scheme reference +**When** I review and update if needed +**Then** the design requirements section reflects: +- New olive green color palette +- Square logo format +- Palestinian tatreez design elements + +### AC4: Architecture Documentation Updated + +**Given** architecture docs may reference brand colors +**When** I review architecture documentation +**Then** any color references are updated to olive palette + +### AC5: Old Logo Files Archived/Removed + +**Given** old SVG logo files exist in the repository +**When** documentation is complete +**Then** old files are handled appropriately: +- `public/images/logo.svg` - Remove or archive +- `public/images/logo-reversed.svg` - Remove or archive +- `public/images/logo-mono.svg` - Remove or archive +- `public/favicon.svg` - Remove or archive + +**Note:** Keep git history for reference; no need to purge from history + +### AC6: Logo Folder Cleanup + +**Given** logo files were generated in `logo/` folder +**When** deployment is complete +**Then** the `logo/` folder is removed (files moved to `public/`) + +### AC7: README Updated (if applicable) + +**Given** README may contain branding information +**When** I review README.md +**Then** any visual/branding references are current + +### AC8: Test Assertions Updated + +**Given** tests may contain color value assertions +**When** I review test files +**Then** color assertions use new olive palette values: +- `AccessibilityComplianceTest.php` +- Any component tests with color assertions +- Email template tests +- PDF template tests + +## Technical Notes + +### Files to Update + +**Documentation:** +- `docs/brand.md` - Full brand guide update +- `docs/logo-generation-instructions.md` - Update for square format +- `CLAUDE.md` - Update design requirements section + +**Tests to Review:** +- `tests/Feature/AccessibilityComplianceTest.php` +- `tests/Feature/Components/` - Any color assertions +- `tests/Feature/Mail/EmailTemplateColorsTest.php` +- `tests/Feature/Admin/PdfBrandColorsTest.php` + +### New Brand Guide Content + +```markdown +## Color Palette + +| Color | Hex Code | Usage | +|-------|----------|-------| +| Olive Green | `#8AB357` | Primary brand color | +| Darker Olive | `#7AA347` | Hover states | +| Dark Olive | `#6A9337` | Active states | +| Light Olive | `#A5C87A` | Secondary accents | +| Pale Olive | `#C5D9A5` | Subtle backgrounds | +| Off-White | `#E8E4DC` | Light backgrounds | +| Deep Black | `#1A1A1A` | Text, headings | + +## Logo + +### Description +The logo features a square design incorporating Palestinian tatreez (traditional embroidery) +patterns with a central botanical/olive motif. The design represents: +- **Tatreez Patterns:** Palestinian cultural heritage and identity +- **Olive Branch:** Peace, dignity, and connection to the land +- **"LIBRA FOR RIGHTS":** Organization name and mission +- **Palestinian Flag:** National identity accent + +### Logo Style +- Square format +- Traditional embroidery-inspired patterns +- Botanical/organic central element +- Deep black and olive green color scheme +- Cultural authenticity with modern presentation +``` + +### Files to Remove + +```bash +# Old logo files to remove after verification +rm public/images/logo.svg +rm public/images/logo-reversed.svg +rm public/images/logo-mono.svg +rm public/favicon.svg + +# Temporary logo folder to remove +rm -rf logo/ +``` + +### Test Color Value Updates + +```php +// Old assertions +$this->assertStringContainsString('#4A4A42', $content); +$this->assertStringContainsString('#C9C4BA', $content); + +// New assertions +$this->assertStringContainsString('#8AB357', $content); +$this->assertStringContainsString('#A5C87A', $content); +``` + +## Dev Checklist + +- [ ] Update `docs/brand.md` with new color palette +- [ ] Update `docs/brand.md` with new logo description +- [ ] Update `docs/logo-generation-instructions.md` for square format +- [ ] Review and update `CLAUDE.md` design requirements +- [ ] Review architecture documentation for color references +- [ ] Update `AccessibilityComplianceTest.php` color assertions +- [ ] Update `EmailTemplateColorsTest.php` color assertions +- [ ] Update `PdfBrandColorsTest.php` color assertions +- [ ] Review and update any other test color assertions +- [ ] Remove old SVG logo files from `public/images/` +- [ ] Remove old `public/favicon.svg` +- [ ] Remove temporary `logo/` folder +- [ ] Verify all tests pass with new color values +- [ ] Final visual review of documentation + +## Estimation + +**Complexity:** Low +**Risk:** Low - Documentation and cleanup tasks + +## Dependencies + +- All other Epic 12 stories should be completed before final cleanup +- This story should be completed last in the epic diff --git a/logo/android-chrome-192x192.png b/logo/android-chrome-192x192.png new file mode 100644 index 0000000..1218649 Binary files /dev/null and b/logo/android-chrome-192x192.png differ diff --git a/logo/android-chrome-512x512.png b/logo/android-chrome-512x512.png new file mode 100644 index 0000000..0d423f4 Binary files /dev/null and b/logo/android-chrome-512x512.png differ diff --git a/logo/apple-touch-icon.png b/logo/apple-touch-icon.png new file mode 100644 index 0000000..e54a13e Binary files /dev/null and b/logo/apple-touch-icon.png differ diff --git a/logo/favicon-16x16.png b/logo/favicon-16x16.png new file mode 100644 index 0000000..a1b9fa8 Binary files /dev/null and b/logo/favicon-16x16.png differ diff --git a/logo/favicon-32x32.png b/logo/favicon-32x32.png new file mode 100644 index 0000000..6026598 Binary files /dev/null and b/logo/favicon-32x32.png differ diff --git a/logo/favicon-48x48.png b/logo/favicon-48x48.png new file mode 100644 index 0000000..0d0e647 Binary files /dev/null and b/logo/favicon-48x48.png differ diff --git a/logo/favicon.ico b/logo/favicon.ico new file mode 100644 index 0000000..b72a35c Binary files /dev/null and b/logo/favicon.ico differ diff --git a/logo/logo-email.png b/logo/logo-email.png new file mode 100644 index 0000000..b46ea46 Binary files /dev/null and b/logo/logo-email.png differ diff --git a/logo/logo-original.jpeg b/logo/logo-original.jpeg new file mode 100644 index 0000000..50e4005 Binary files /dev/null and b/logo/logo-original.jpeg differ diff --git a/logo/logo-square.png b/logo/logo-square.png new file mode 100644 index 0000000..a035c08 Binary files /dev/null and b/logo/logo-square.png differ diff --git a/logo_new.jpeg b/logo_new.jpeg new file mode 100644 index 0000000..50e4005 Binary files /dev/null and b/logo_new.jpeg differ