naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

generated stories for changing the colors after the client changed his logo

This commit is contained in:
Naser Mansour 2026-01-03 03:10:49 +02:00
parent 5a19903e30
commit 19f6386532
7 changed files with 986 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
docs/epics/epic-10-brand-color-refresh.md
View File

@ -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

131
docs/stories/story-10.1-core-css-theme-update.md Normal file
View File

@ -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

179
docs/stories/story-10.2-blade-component-color-migration.md Normal file
View File

@ -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

140
docs/stories/story-10.3-email-template-color-update.md Normal file
View File

@ -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

132
docs/stories/story-10.4-pdf-template-color-update.md Normal file
View File

@ -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
<!-- Old -->
<div style="background-color: #0A1F44; color: #D4AF37;">
<!-- New -->
<div style="background-color: #4A4A42; color: #E8E4DC;">
```
### 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

151
docs/stories/story-10.5-logo-assets-update.md Normal file
View File

@ -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?

150
docs/stories/story-10.6-documentation-update.md Normal file
View File

@ -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