diff --git a/docs/epics/epic-10-brand-color-refresh.md b/docs/epics/epic-10-brand-color-refresh.md index 87276cf..d558c83 100644 --- a/docs/epics/epic-10-brand-color-refresh.md +++ b/docs/epics/epic-10-brand-color-refresh.md @@ -29,7 +29,9 @@ Update the application's color system to align with the new LIBRA for Rights bra **How it integrates:** - Update CSS custom properties in `resources/css/app.css` - Update component color references across all Blade views +- Update SVG logo files with new brand design - Update PDF export templates +- Update email templates - Update documentation (PRD, architecture, stories, CLAUDE.md) **Success criteria:** @@ -37,84 +39,41 @@ Update the application's color system to align with the new LIBRA for Rights bra - WCAG AA contrast ratios maintained - Consistent appearance across all areas (public, admin, client) - PDF exports reflect new branding +- Email templates reflect new branding +- Logo displays correctly throughout application - Documentation updated to reflect new colors --- ## Stories -### Story 10.1: Core Color System Update +| Story | Title | Description | Status | +|-------|-------|-------------|--------| +| 10.1 | [Core CSS Theme Update](../stories/story-10.1-core-css-theme-update.md) | Update Tailwind CSS theme variables and semantic aliases | Pending | +| 10.2 | [Blade Component Color Migration](../stories/story-10.2-blade-component-color-migration.md) | Update 16 Blade files with 64 color class occurrences | Pending | +| 10.3 | [Email Template Color Update](../stories/story-10.3-email-template-color-update.md) | Update email theme CSS and template components | Pending | +| 10.4 | [PDF Template Color Update](../stories/story-10.4-pdf-template-color-update.md) | Update 4 PDF export templates | Pending | +| 10.5 | [Logo and SVG Assets Update](../stories/story-10.5-logo-assets-update.md) | Update/replace logo SVG files for new brand | Pending | +| 10.6 | [Documentation Update](../stories/story-10.6-documentation-update.md) | Update PRD, CLAUDE.md, architecture docs, and story files | Pending | -**Description:** Update the Tailwind CSS theme configuration and core color variables. +### Story Dependencies -**Acceptance Criteria:** -- [ ] Update `resources/css/app.css` `@theme` block with new colors: - - `--color-charcoal: #4A4A42` (replaces navy) - - `--color-warm-gray: #C9C4BA` (replaces gold) - - `--color-off-white: #E8E4DC` (replaces cream/gold-light) - - `--color-deep-black: #1A1A1A` (replaces old charcoal) -- [ ] Create semantic aliases for backward compatibility during transition -- [ ] Update `.prose-navy` to `.prose-charcoal` or equivalent -- [ ] Verify WCAG AA contrast ratios for all color combinations -- [ ] Update Flux UI accent color configuration -- [ ] Test dark mode colors if applicable +``` +10.1 (CSS Theme) ──┬──> 10.2 (Blade Components) + ├──> 10.3 (Email Templates) + └──> 10.4 (PDF Templates) -**Technical Notes:** -- Keep status colors (success, danger, warning) unchanged -- Consider creating aliases like `--color-primary` → `--color-charcoal` for semantic usage -- Run contrast checker on all text/background combinations +10.5 (Logo Assets) ──> Can run in parallel with 10.1 ---- +10.6 (Documentation) ──> Should run last, after 10.1-10.5 +``` -### Story 10.2: Component & Page Color Migration +### Recommended Implementation Order -**Description:** Update all components and pages to use the new color palette. - -**Acceptance Criteria:** -- [ ] **Navigation & Footer:** - - Update background from navy to charcoal - - Update text/links from gold to warm-gray/off-white - - Update logo component colors -- [ ] **Buttons:** - - Primary: Charcoal background, off-white text - - Secondary: Warm-gray border, charcoal text - - Hover states updated accordingly -- [ ] **Forms:** - - Focus ring: warm-gray instead of gold - - Border colors updated -- [ ] **Cards & Containers:** - - Background: off-white - - Borders/accents: warm-gray -- [ ] **Public Pages:** Home, booking, posts -- [ ] **Admin Dashboard:** All admin pages and charts -- [ ] **Client Portal:** All client pages -- [ ] **PDF Exports:** Users, consultations, timelines, monthly report -- [ ] All hardcoded hex values replaced with CSS variables - -**Technical Notes:** -- Use find/replace carefully for hex values -- Test RTL layout after changes -- Verify responsive appearance on all breakpoints - ---- - -### Story 10.3: Documentation & Asset Update - -**Description:** Update all documentation and static assets to reflect new brand colors. - -**Acceptance Criteria:** -- [ ] Update `docs/prd.md` color specifications -- [ ] Update `docs/architecture.md` design references -- [ ] Update `CLAUDE.md` color guidance -- [ ] Update Epic 9 story references (mark as superseded or update) -- [ ] Update any remaining story files with old color references -- [ ] Ensure logo files are current (reference `docs/brand.md` guidelines) -- [ ] Update `resources/views/components/app-logo.blade.php` if needed -- [ ] Verify favicon/app icons align with new branding - -**Technical Notes:** -- Use grep to find all documentation references to old hex values -- Consider adding note in Epic 9 that colors were updated in Epic 10 +1. **Story 10.5** - Logo Assets (can start immediately if assets available) +2. **Story 10.1** - Core CSS Theme (foundation for other stories) +3. **Stories 10.2, 10.3, 10.4** - Can run in parallel after 10.1 +4. **Story 10.6** - Documentation (final step) --- @@ -127,32 +86,93 @@ Update the application's color system to align with the new LIBRA for Rights bra ## Risk Mitigation -- **Primary Risk:** Missing color references causing inconsistent appearance -- **Mitigation:** Comprehensive grep search for all hex values; systematic testing of each area -- **Rollback Plan:** Git revert to pre-epic commit; CSS variables make rollback straightforward +| Risk | Likelihood | Impact | Mitigation | +|------|------------|--------|------------| +| Missing color references causing inconsistent appearance | Medium | Medium | Comprehensive grep search for all hex values; systematic testing of each area | +| Logo assets not available | Medium | High | Coordinate with client early; can update colors first and logo later | +| Contrast issues with new palette | Low | Medium | Verify WCAG AA compliance in Story 10.1 before proceeding | +| RTL layout breaks | Low | Medium | Test Arabic layout after each story | + +**Rollback Plan:** Git revert to pre-epic commit; CSS variables make rollback straightforward ## Definition of Done -- [ ] All stories completed with acceptance criteria met -- [ ] Existing functionality verified through visual testing +- [ ] Story 10.1: Core CSS theme updated with new colors +- [ ] Story 10.2: All Blade components using new palette +- [ ] Story 10.3: Email templates updated +- [ ] Story 10.4: PDF templates updated +- [ ] Story 10.5: Logo files updated/replaced +- [ ] Story 10.6: All documentation updated - [ ] All pages render correctly with new colors +- [ ] WCAG AA contrast compliance verified +- [ ] RTL layout displays correctly +- [ ] Responsive design intact across breakpoints - [ ] PDF exports display new branding -- [ ] Documentation reflects new color palette -- [ ] No regression in existing features +- [ ] Email templates display new branding - [ ] Code formatted with Pint -- [ ] All tests passing +- [ ] All existing tests passing +- [ ] Visual QA completed on all major pages --- -## Story Manager Handoff +## Affected Files Summary -"Please develop detailed user stories for this brownfield epic. Key considerations: +| Category | File Count | Notes | +|----------|------------|-------| +| CSS Theme | 1 | `resources/css/app.css` | +| Blade Components | 16 | 64 color class occurrences | +| Email Templates | 6+ | Theme CSS + components | +| PDF Templates | 4 | Export templates | +| Logo/SVG Assets | 4 | SVG + PNG files | +| Documentation | 44+ | PRD, CLAUDE.md, stories | -- This is a brand color refresh for an existing Laravel 12 + Tailwind CSS 4 + Livewire 3 application -- Integration points: CSS `@theme` variables, 58+ Blade/Volt files, PDF templates, documentation -- Existing patterns to follow: Current Tailwind CSS variable approach in `resources/css/app.css` -- Critical compatibility requirements: WCAG AA contrast ratios, RTL layout integrity, responsive design -- Each story must include verification that existing functionality remains intact -- Reference `docs/brand.md` for authoritative color values +**Total estimated files to modify:** ~70 files -The epic should maintain system integrity while delivering the updated LIBRA for Rights brand identity." +--- + +## Testing Checklist + +### Visual Testing +- [ ] Home page +- [ ] Booking page +- [ ] Posts listing and detail +- [ ] Login/Auth pages +- [ ] Admin dashboard +- [ ] Admin user management +- [ ] Admin booking management +- [ ] Admin timeline management +- [ ] Client dashboard +- [ ] Client consultations view +- [ ] Client timelines view +- [ ] Settings pages + +### Export Testing +- [ ] Users PDF export +- [ ] Consultations PDF export +- [ ] Timelines PDF export +- [ ] Monthly report PDF + +### Email Testing +- [ ] Welcome email +- [ ] Booking submitted email +- [ ] Booking approved email +- [ ] Booking rejected email +- [ ] Consultation reminders +- [ ] Timeline update email + +### Cross-Browser Testing +- [ ] Chrome +- [ ] Firefox +- [ ] Safari +- [ ] Edge + +### Responsive Testing +- [ ] Mobile (< 576px) +- [ ] Tablet (576px - 991px) +- [ ] Desktop (992px+) + +### RTL Testing +- [ ] Arabic language layout +- [ ] Navigation RTL +- [ ] Forms RTL +- [ ] Tables RTL diff --git a/docs/stories/story-10.1-core-css-theme-update.md b/docs/stories/story-10.1-core-css-theme-update.md new file mode 100644 index 0000000..8474716 --- /dev/null +++ b/docs/stories/story-10.1-core-css-theme-update.md @@ -0,0 +1,131 @@ +# Story 10.1: Core CSS Theme Update + +## Story + +**As a** developer +**I want to** update the Tailwind CSS theme color variables +**So that** the application uses the new LIBRA for Rights brand palette + +## Acceptance Criteria + +### AC1: Update Color Variables in `resources/css/app.css` + +**Given** the current theme uses Navy Blue + Gold palette +**When** I update the `@theme` block +**Then** the following color mappings are applied: + +| Old Variable | Old Hex | New Variable | New Hex | +|--------------|---------|--------------|---------| +| `--color-navy` | `#0A1F44` | `--color-primary` | `#4A4A42` (Charcoal) | +| `--color-gold` | `#D4AF37` | `--color-accent` | `#C9C4BA` (Warm Gray) | +| `--color-gold-light` | `#F4E4B8` | `--color-accent-light` | `#E8E4DC` (Off-White) | +| `--color-cream` | `#F9F7F4` | `--color-background` | `#E8E4DC` (Off-White) | +| `--color-charcoal` | `#2C3E50` | `--color-text` | `#1A1A1A` (Deep Black) | + +### AC2: Maintain Backward Compatibility Aliases + +**Given** existing components use `navy`, `gold`, `cream` class names +**When** the theme is updated +**Then** aliases are created so existing classes continue to work: +- `--color-navy` → points to `--color-primary` (Charcoal) +- `--color-gold` → points to `--color-accent` (Warm Gray) +- `--color-gold-light` → points to `--color-accent-light` (Off-White) +- `--color-cream` → points to `--color-background` (Off-White) +- `--color-charcoal` → points to `--color-text` (Deep Black) + +### AC3: Update Semantic Aliases + +**Given** semantic aliases exist for components +**When** theme is updated +**Then** these mappings are correct: +- `--color-primary` → `#4A4A42` (Charcoal) +- `--color-accent` → `#C9C4BA` (Warm Gray) +- `--color-accent-content` → `#C9C4BA` (Warm Gray) +- `--color-accent-foreground` → `#4A4A42` (Charcoal) +- `--color-background` → `#E8E4DC` (Off-White) +- `--color-text` → `#1A1A1A` (Deep Black) + +### AC4: Update Button Styles + +**Given** button classes use gold/navy colors +**When** theme is updated +**Then** `.btn-primary` and `.btn-secondary` use new palette: +- Primary: Charcoal background, Off-White text +- Secondary: Warm Gray border, Charcoal text +- Hover states updated accordingly + +### AC5: Update Form Focus States + +**Given** form inputs have gold focus rings +**When** theme is updated +**Then** focus states use Warm Gray: +- `focus:border-gold` → Warm Gray border +- `focus:ring-gold` → Warm Gray ring + +### AC6: Update Prose Class + +**Given** `.prose-navy` class exists for blog content +**When** theme is updated +**Then** rename to `.prose-brand` or update colors: +- Headings: Charcoal +- Links: Warm Gray +- Body: Deep Black + +### 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 Charcoal (`#4A4A42`): ≥4.5:1 for body text +- Warm Gray (`#C9C4BA`) usage verified for sufficient contrast + +## Technical Notes + +### Files to Modify +- `resources/css/app.css` - Main theme file + +### Color Reference (from `docs/brand.md`) +| Color | Hex | Usage | +|-------|-----|-------| +| Charcoal | `#4A4A42` | Primary backgrounds, text | +| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents | +| Off-White | `#E8E4DC` | Light backgrounds | +| Deep Black | `#1A1A1A` | Logo artwork, headlines | + +### Contrast Verification +Use WebAIM Contrast Checker or similar tool to verify: +- Deep Black on Off-White: ~12.5:1 (passes AAA) +- Off-White on Charcoal: ~4.8:1 (passes AA) +- Charcoal on Off-White: ~4.8:1 (passes AA) + +## Dev Checklist + +- [ ] Update `@theme` block with new color values +- [ ] Create backward-compatible aliases +- [ ] Update semantic aliases +- [ ] Update `.btn-primary` styles +- [ ] Update `.btn-secondary` styles +- [ ] Update form focus states (input, textarea, select, checkbox, radio) +- [ ] Update `.prose-navy` → `.prose-brand` +- [ ] 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 (both light and dark mode if applicable) + +## Estimation + +**Complexity:** Low +**Risk:** Low - CSS-only changes with aliases for backward compatibility diff --git a/docs/stories/story-10.2-blade-component-color-migration.md b/docs/stories/story-10.2-blade-component-color-migration.md new file mode 100644 index 0000000..a2fed7e --- /dev/null +++ b/docs/stories/story-10.2-blade-component-color-migration.md @@ -0,0 +1,179 @@ +# Story 10.2: Blade Component Color Migration + +## Story + +**As a** developer +**I want to** update all Blade components and pages to use the new color palette +**So that** the entire application has consistent branding + +## Acceptance Criteria + +### AC1: Navigation Component Updated + +**Given** `resources/views/components/navigation.blade.php` uses old colors +**When** I update the component +**Then** the following changes are applied: +- Background: Navy → Charcoal (`bg-navy` → `bg-charcoal` or use CSS variable) +- Text/Links: Gold → Warm Gray/Off-White +- Active states updated accordingly +- Mobile menu uses new colors + +### AC2: Footer Component Updated + +**Given** `resources/views/components/footer.blade.php` uses old colors +**When** I update the component +**Then** the following changes are applied: +- Background: Navy → Charcoal +- Text: Appropriate contrast colors +- Links: Gold → Warm Gray + +### AC3: Logo Component Updated + +**Given** `resources/views/components/logo.blade.php` references logo files +**When** I update the component +**Then** it references the correct logo variant for the background + +### AC4: Language Toggle Updated + +**Given** `resources/views/components/language-toggle.blade.php` uses old colors +**When** I update the component +**Then** colors match new palette + +### AC5: Card Components Updated + +**Given** card components use old colors +**When** I update `resources/views/components/ui/card.blade.php` +**Then** the following changes are applied: +- Background: Off-White +- Borders/accents: Warm Gray +- Text: Deep Black + +### AC6: Stat Card Component Updated + +**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors +**When** I update the component +**Then** colors match new palette + +### AC7: Spinner Component Updated + +**Given** `resources/views/components/spinner.blade.php` uses old colors +**When** I update the component +**Then** spinner uses Charcoal or Warm Gray + +### AC8: Toast Component Updated + +**Given** `resources/views/components/toast.blade.php` uses old colors +**When** I update the component +**Then** colors match new palette (status colors remain unchanged) + +### AC9: Public Pages Updated + +**Given** public pages use old colors +**When** I update the following pages +**Then** they use the new 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` + +### AC10: Post Pages Updated + +**Given** post display pages use old colors +**When** I update the following pages +**Then** they use the new palette: +- `resources/views/livewire/pages/posts/index.blade.php` +- `resources/views/livewire/pages/posts/show.blade.php` + +### AC11: Public Layout Updated + +**Given** `resources/views/components/layouts/public.blade.php` uses old colors +**When** I update the layout +**Then** it uses the new palette + +### AC12: RTL Layout Integrity + +**Given** the application supports RTL (Arabic) +**When** colors are updated +**Then** RTL layout displays correctly with new colors + +### AC13: Responsive Appearance + +**Given** the application is responsive +**When** colors are updated +**Then** all breakpoints display correctly (mobile, tablet, desktop) + +## Technical Notes + +### Files to Modify (16 files with 64 occurrences) + +**Components:** +- `resources/views/components/navigation.blade.php` (25 occurrences) +- `resources/views/components/footer.blade.php` (9 occurrences) +- `resources/views/components/logo.blade.php` (1 occurrence) +- `resources/views/components/language-toggle.blade.php` (5 occurrences) +- `resources/views/components/spinner.blade.php` (1 occurrence) +- `resources/views/components/toast.blade.php` (2 occurrences) +- `resources/views/components/ui/card.blade.php` (2 occurrences) +- `resources/views/components/ui/stat-card.blade.php` (3 occurrences) +- `resources/views/components/layouts/public.blade.php` (1 occurrence) + +**Pages:** +- `resources/views/pages/home.blade.php` (4 occurrences) +- `resources/views/pages/booking.blade.php` (1 occurrence) +- `resources/views/pages/terms.blade.php` (1 occurrence) +- `resources/views/pages/privacy.blade.php` (1 occurrence) +- `resources/views/pages/legal.blade.php` (1 occurrence) +- `resources/views/livewire/pages/posts/index.blade.php` (5 occurrences) +- `resources/views/livewire/pages/posts/show.blade.php` (2 occurrences) + +### Color Class Mapping + +| Old Class | New Approach | +|-----------|--------------| +| `bg-navy` | `bg-primary` or `bg-charcoal` | +| `text-navy` | `text-primary` or `text-charcoal` | +| `border-navy` | `border-primary` or `border-charcoal` | +| `bg-gold` | `bg-accent` or `bg-warm-gray` | +| `text-gold` | `text-accent` or `text-warm-gray` | +| `border-gold` | `border-accent` or `border-warm-gray` | +| `bg-cream` | `bg-background` or `bg-off-white` | +| `text-cream` | `text-background` or `text-off-white` | + +### Recommended Approach + +Since Story 10.1 creates backward-compatible aliases, the Tailwind classes should continue to work. However, verify each component visually to ensure: +1. Contrast is sufficient +2. Visual hierarchy is maintained +3. Interactive states (hover, focus, active) work correctly + +## Dev Checklist + +- [ ] Update `navigation.blade.php` +- [ ] Update `footer.blade.php` +- [ ] Update `logo.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` +- [ ] 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 10.1 (Core CSS Theme Update) must be completed first diff --git a/docs/stories/story-10.3-email-template-color-update.md b/docs/stories/story-10.3-email-template-color-update.md new file mode 100644 index 0000000..f950fa8 --- /dev/null +++ b/docs/stories/story-10.3-email-template-color-update.md @@ -0,0 +1,140 @@ +# Story 10.3: Email Template Color Update + +## Story + +**As a** developer +**I want to** update email templates to use the new brand colors +**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 old colors +**When** I update the stylesheet +**Then** the following changes are applied: + +| Element | Old Color | New Color | +|---------|-----------|-----------| +| Links (`a`) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) | +| Headings (h1, h2, h3) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) | +| Header background | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) | +| Footer links | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) | +| Primary button | `#D4AF37` bg, `#0A1F44` text | `#4A4A42` bg, `#E8E4DC` text | +| Table headers | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) | +| Panel border | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) | + +### AC2: Email Header Component Updated + +**Given** `resources/views/vendor/mail/html/header.blade.php` may have inline styles +**When** I update the component +**Then** any inline color references use new palette + +### AC3: Email Footer Component Updated + +**Given** `resources/views/vendor/mail/html/footer.blade.php` may have inline styles +**When** I update the component +**Then** any inline color references use new 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: Charcoal (`#4A4A42`) +- Text: Off-White (`#E8E4DC`) + +### 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 Warm Gray (`#C9C4BA`) + +### AC6: Email Logo Updated + +**Given** email header displays the logo +**When** emails are sent +**Then** the logo matches the new brand identity + +### AC7: All Email Templates Tested + +**Given** the application sends various email types +**When** I test each email template +**Then** colors display correctly: +- Welcome email +- Booking submitted confirmation +- Booking approved/rejected +- Consultation reminders (24h, 2h) +- Timeline update notification +- 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) + +## 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 */ +#0A1F44 → #4A4A42 /* Navy → Charcoal */ +#D4AF37 → #C9C4BA /* Gold → Warm Gray */ +``` + +### Email-Safe Colors + +Email clients have limited CSS support. Ensure: +- Use inline styles for critical colors +- Test in major email clients (Gmail, Outlook, Apple Mail) +- Maintain fallback background colors + +### Testing Emails + +Use Laravel's mail preview or Mailtrap to test: +```bash +# Preview emails in browser +php artisan make:mail TestEmail --markdown=emails.test +``` + +## 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 +- [ ] Review `header.blade.php` for inline styles +- [ ] Review `footer.blade.php` for 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 +- [ ] Verify RTL email layout (Arabic) + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Low - Email styling is isolated from main app + +## Dependencies + +- Story 10.5 (Logo Update) should be completed for email logo consistency diff --git a/docs/stories/story-10.4-pdf-template-color-update.md b/docs/stories/story-10.4-pdf-template-color-update.md new file mode 100644 index 0000000..f2c970d --- /dev/null +++ b/docs/stories/story-10.4-pdf-template-color-update.md @@ -0,0 +1,132 @@ +# Story 10.4: PDF Template Color Update + +## Story + +**As a** developer +**I want to** update PDF export templates to use the new brand colors +**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 old colors +**When** I update the template +**Then** the following changes are applied: +- Header background: Navy → Charcoal (`#4A4A42`) +- Header text: appropriate contrast color +- Accent elements: Gold → Warm Gray (`#C9C4BA`) +- Table headers: Navy → Charcoal +- Borders: updated to new palette + +### AC2: Consultations Export PDF Updated + +**Given** `resources/views/pdf/consultations-export.blade.php` uses old colors +**When** I update the template +**Then** colors match the new brand palette + +### AC3: Timelines Export PDF Updated + +**Given** `resources/views/pdf/timelines-export.blade.php` uses old colors +**When** I update the template +**Then** colors match the new brand palette + +### AC4: Monthly Report PDF Updated + +**Given** `resources/views/pdf/monthly-report.blade.php` uses old colors +**When** I update the template +**Then** the following changes are applied: +- Header/footer: Charcoal background +- Accent colors: Warm Gray +- Charts/graphs: updated color scheme +- Text: Deep Black for readability + +### AC5: Monthly Report Service Updated + +**Given** `app/Services/MonthlyReportService.php` may contain color references +**When** I review the service +**Then** any hardcoded colors are updated to new palette + +### AC6: PDF Logo Updated + +**Given** PDF templates include the logo +**When** PDFs are generated +**Then** the logo matches the new brand identity + +### AC7: Print-Friendly Colors + +**Given** PDFs are often printed +**When** colors are updated +**Then** they remain legible when printed in grayscale + +### 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 + +## 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 (review for color references):** +- `app/Services/MonthlyReportService.php` + +**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 | `#0A1F44` | `#4A4A42` | +| Accent/Highlight | `#D4AF37` | `#C9C4BA` | +| Light Background | `#F9F7F4` | `#E8E4DC` | +| Text | `#2C3E50` | `#1A1A1A` | + +### PDF Styling Notes + +PDF templates use inline CSS. Common patterns to update: +```html + +
+ + +
+``` + +### Print Considerations + +- Charcoal (`#4A4A42`) prints well in grayscale +- Warm Gray (`#C9C4BA`) may appear light when printed - consider using for accents only +- Ensure sufficient contrast for all text + +## Dev Checklist + +- [ ] Update `users-export.blade.php` colors +- [ ] Update `consultations-export.blade.php` colors +- [ ] Update `timelines-export.blade.php` colors +- [ ] Update `monthly-report.blade.php` colors +- [ ] Review `MonthlyReportService.php` for color references +- [ ] 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 PDFs +- [ ] Test print preview for readability + +## Estimation + +**Complexity:** Low +**Risk:** Low - PDF templates are isolated + +## Dependencies + +- Story 10.5 (Logo Update) should be completed for PDF logo consistency diff --git a/docs/stories/story-10.5-logo-assets-update.md b/docs/stories/story-10.5-logo-assets-update.md new file mode 100644 index 0000000..2c53b52 --- /dev/null +++ b/docs/stories/story-10.5-logo-assets-update.md @@ -0,0 +1,151 @@ +# Story 10.5: Logo and SVG Assets Update + +## Story + +**As a** developer +**I want to** update all logo files and SVG assets to match the new brand +**So that** the application displays the correct LIBRA for Rights logo everywhere + +## Acceptance Criteria + +### AC1: Primary Logo Updated + +**Given** `public/images/logo.svg` contains the old Scales of Justice logo with gold colors +**When** I update or replace the logo +**Then** the new botanical/wheat logo is displayed with correct colors: +- Primary artwork: Deep Black (`#1A1A1A`) or Charcoal (`#4A4A42`) +- For use on light backgrounds + +### AC2: Reversed Logo Updated + +**Given** `public/images/logo-reversed.svg` is for dark backgrounds +**When** I update or replace the logo +**Then** the logo displays correctly on Charcoal backgrounds: +- Artwork: Off-White (`#E8E4DC`) or Warm Gray (`#C9C4BA`) + +### AC3: Monochrome Logo Updated + +**Given** `public/images/logo-mono.svg` exists for single-color applications +**When** I update or replace the logo +**Then** the logo uses appropriate single color from new palette + +### AC4: PNG Logo Updated + +**Given** `public/images/logo.png` is used in some contexts +**When** I update or replace the logo +**Then** the PNG matches the new SVG logo + +### AC5: Favicon Updated + +**Given** the application has a favicon +**When** I review favicon files +**Then** they are updated to match new brand (if applicable) + +### AC6: Logo Component References Correct Files + +**Given** `resources/views/components/logo.blade.php` references logo files +**When** I review the component +**Then** it uses the correct logo variant based on context (light/dark background) + +### AC7: Logo Displays Correctly Throughout App + +**Given** the logo appears in multiple locations +**When** logos are updated +**Then** they display correctly in: +- Navigation header +- Footer +- Auth pages (login, password reset, etc.) +- Email headers +- PDF exports +- Mobile views + +### AC8: Logo Clear Space Maintained + +**Given** brand guidelines specify clear space around logo +**When** logo is displayed +**Then** minimum padding/margin is maintained as per `docs/brand.md` + +## Technical Notes + +### Files to Update/Replace + +**Logo Files:** +- `public/images/logo.svg` - Primary full-color logo +- `public/images/logo-reversed.svg` - For dark backgrounds +- `public/images/logo-mono.svg` - Single-color version +- `public/images/logo.png` - PNG fallback + +**Favicon (if exists):** +- `public/favicon.ico` +- `public/favicon.svg` +- Any other favicon variants + +**Component:** +- `resources/views/components/logo.blade.php` + +### New Logo Requirements (from `docs/brand.md`) + +The new logo features: +- Stylized botanical illustration +- Central plant with symmetrical leaves +- Wheat stalks and water droplets +- Decorative border with traditional patterns +- Woodcut/linocut aesthetic +- High contrast black on neutral background + +### Logo Color Variants + +| Variant | Background | Logo Color | +|---------|------------|------------| +| Primary | Light (Off-White) | Deep Black (`#1A1A1A`) | +| Reversed | Dark (Charcoal) | Off-White (`#E8E4DC`) | +| Monochrome | Any | Single color from palette | + +### Implementation Options + +**Option A: Replace SVG files entirely** +- Obtain new SVG logo files from brand assets +- Replace existing files with same names + +**Option B: Update existing SVG colors** +- If logo shape remains similar, update color values in SVG +- Change gradients from gold/navy to new palette + +### Logo Sizing + +Per `docs/brand.md`: +- Minimum size: 40px height (digital), 15mm (print) +- Clear space: Equal to height of one water droplet element + +## Dev Checklist + +- [ ] Obtain or create new logo SVG files +- [ ] Update/replace `logo.svg` +- [ ] Update/replace `logo-reversed.svg` +- [ ] Update/replace `logo-mono.svg` +- [ ] Update/replace `logo.png` +- [ ] Review and update favicon files +- [ ] Update `logo.blade.php` component if needed +- [ ] Verify logo in navigation header +- [ ] Verify logo in footer +- [ ] Verify logo on auth pages +- [ ] Verify logo in emails +- [ ] Verify logo in PDF exports +- [ ] Test logo on mobile views +- [ ] Verify clear space is maintained + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Medium - Logo files may need to be provided by client/designer + +## Dependencies + +- New logo asset files should be provided or approved +- Coordinate with client on final logo design + +## Open Questions + +1. Are new logo SVG files available, or should existing SVGs be color-updated? +2. Should the tagline text ("LAW FIRM") be updated or removed? +3. Are favicon updates required? diff --git a/docs/stories/story-10.6-documentation-update.md b/docs/stories/story-10.6-documentation-update.md new file mode 100644 index 0000000..fe01733 --- /dev/null +++ b/docs/stories/story-10.6-documentation-update.md @@ -0,0 +1,150 @@ +# Story 10.6: Documentation Update + +## Story + +**As a** developer +**I want to** update all documentation to reflect the new brand colors +**So that** future development references accurate color information + +## Acceptance Criteria + +### AC1: CLAUDE.md Updated + +**Given** `CLAUDE.md` contains color guidance +**When** I update the file +**Then** the following sections are updated: +- Design Requirements section +- Color scheme references (Navy → Charcoal, Gold → Warm Gray) +- Any hex value references + +### AC2: PRD Updated + +**Given** `docs/prd.md` contains detailed color specifications +**When** I update the document +**Then** the following sections are updated: +- Section 7.1 Brand Identity & Visual Guidelines +- Color Palette table +- All hex value references +- Button styling specifications +- Any Navy/Gold color mentions + +### AC3: Architecture Document Updated + +**Given** `docs/architecture.md` may contain color references +**When** I review and update the document +**Then** any color references are updated to new palette + +### AC4: Epic 9 Stories Referenced as Superseded + +**Given** Epic 9 stories implemented the original Navy+Gold palette +**When** I review Epic 9 story files +**Then** a note is added indicating colors were updated in Epic 10: +- `story-9.1-color-system-implementation.md` +- `story-9.4-component-styling-buttons.md` +- `story-9.5-component-styling-forms.md` +- Other affected stories + +### AC5: Epic 10 Document Updated + +**Given** `docs/epics/epic-10-brand-color-refresh.md` exists +**When** all stories are complete +**Then** the epic document is updated with completion status + +### AC6: brand.md Verified Accurate + +**Given** `docs/brand.md` defines the new brand +**When** I review the document +**Then** it accurately describes: +- The botanical/wheat logo +- Correct color palette (Charcoal, Warm Gray, Off-White, Deep Black) +- Typography guidelines +- Usage guidelines + +### AC7: No Stale Color References + +**Given** documentation should be accurate +**When** I search all markdown files for old hex values +**Then** no references to old colors remain: +- `#0A1F44` (old Navy) - replaced or removed +- `#D4AF37` (old Gold) - replaced or removed +- `#F4E4B8` (old Gold Light) - replaced or removed +- `#F9F7F4` (old Cream) - replaced or removed +- `#2C3E50` (old Charcoal) - replaced or removed + +## Technical Notes + +### Files to Update + +**Core Documentation:** +- `CLAUDE.md` +- `docs/prd.md` +- `docs/architecture.md` +- `docs/brand.md` (verify accuracy) + +**Epic Files:** +- `docs/epics/epic-10-brand-color-refresh.md` +- `docs/epics/epic-9-design-branding.md` (add supersession note) + +**Story Files (44 files contain old hex values):** +- `docs/stories/story-9.1-color-system-implementation.md` +- `docs/stories/story-9.4-component-styling-buttons.md` +- `docs/stories/story-9.5-component-styling-forms.md` +- `docs/stories/story-9.6-component-styling-cards-containers.md` +- `docs/stories/story-9.7-navigation-footer-styling.md` +- `docs/stories/story-9.10-accessibility-compliance.md` +- And others found via grep + +### Color Replacement Reference + +| Old Color | Old Hex | New Color | New Hex | +|-----------|---------|-----------|---------| +| Navy Blue | `#0A1F44` | Charcoal | `#4A4A42` | +| Gold | `#D4AF37` | Warm Gray | `#C9C4BA` | +| Gold Light | `#F4E4B8` | Off-White | `#E8E4DC` | +| Cream | `#F9F7F4` | Off-White | `#E8E4DC` | +| Charcoal | `#2C3E50` | Deep Black | `#1A1A1A` | + +### Search Commands + +To find all old color references: +```bash +# Find files with old hex values +grep -r "#0A1F44\|#D4AF37\|#F4E4B8\|#F9F7F4\|#2C3E50" docs/ + +# Find Navy/Gold word references +grep -ri "navy\|gold" docs/*.md +``` + +### Documentation Update Pattern + +For Epic 9 stories, add a note at the top: +```markdown +> **Note:** The color values in this story were implemented with the original Navy+Gold palette. +> These colors were updated in Epic 10 (Brand Color Refresh) to the new Charcoal+Warm Gray palette. +> See `docs/brand.md` for current color specifications. +``` + +## Dev Checklist + +- [ ] Update `CLAUDE.md` color references +- [ ] Update `docs/prd.md` Section 7.1 Color Palette +- [ ] Update `docs/prd.md` all other color references +- [ ] Review and update `docs/architecture.md` +- [ ] Verify `docs/brand.md` is accurate +- [ ] Add supersession note to `story-9.1-color-system-implementation.md` +- [ ] Add supersession note to `story-9.4-component-styling-buttons.md` +- [ ] Add supersession note to `story-9.5-component-styling-forms.md` +- [ ] Add supersession note to other affected Epic 9 stories +- [ ] Update `epic-10-brand-color-refresh.md` with completion status +- [ ] Run grep to verify no old hex values remain +- [ ] Review all documentation for consistency + +## Estimation + +**Complexity:** Low +**Risk:** Low - Documentation only, no code impact + +## Dependencies + +- Should be completed last, after Stories 10.1-10.5 are done +- Ensures documentation reflects actual implemented state