generated stories for changing the colors after the client changed his logo
This commit is contained in:
Naser Mansour
parent
5a19903e30
commit
19f6386532
|
|
@ -29,7 +29,9 @@ Update the application's color system to align with the new LIBRA for Rights bra
|
||||||
**How it integrates:**
|
**How it integrates:**
|
||||||
- Update CSS custom properties in `resources/css/app.css`
|
- Update CSS custom properties in `resources/css/app.css`
|
||||||
- Update component color references across all Blade views
|
- Update component color references across all Blade views
|
||||||
|
- Update SVG logo files with new brand design
|
||||||
- Update PDF export templates
|
- Update PDF export templates
|
||||||
|
- Update email templates
|
||||||
- Update documentation (PRD, architecture, stories, CLAUDE.md)
|
- Update documentation (PRD, architecture, stories, CLAUDE.md)
|
||||||
|
|
||||||
**Success criteria:**
|
**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
|
- WCAG AA contrast ratios maintained
|
||||||
- Consistent appearance across all areas (public, admin, client)
|
- Consistent appearance across all areas (public, admin, client)
|
||||||
- PDF exports reflect new branding
|
- PDF exports reflect new branding
|
||||||
|
- Email templates reflect new branding
|
||||||
|
- Logo displays correctly throughout application
|
||||||
- Documentation updated to reflect new colors
|
- Documentation updated to reflect new colors
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Stories
|
## 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:
|
10.1 (CSS Theme) ──┬──> 10.2 (Blade Components)
|
||||||
- `--color-charcoal: #4A4A42` (replaces navy)
|
├──> 10.3 (Email Templates)
|
||||||
- `--color-warm-gray: #C9C4BA` (replaces gold)
|
└──> 10.4 (PDF Templates)
|
||||||
- `--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
|
|
||||||
|
|
||||||
**Technical Notes:**
|
10.5 (Logo Assets) ──> Can run in parallel with 10.1
|
||||||
- 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.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.
|
1. **Story 10.5** - Logo Assets (can start immediately if assets available)
|
||||||
|
2. **Story 10.1** - Core CSS Theme (foundation for other stories)
|
||||||
**Acceptance Criteria:**
|
3. **Stories 10.2, 10.3, 10.4** - Can run in parallel after 10.1
|
||||||
- [ ] **Navigation & Footer:**
|
4. **Story 10.6** - Documentation (final step)
|
||||||
- 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
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -127,32 +86,93 @@ Update the application's color system to align with the new LIBRA for Rights bra
|
||||||
|
|
||||||
## Risk Mitigation
|
## Risk Mitigation
|
||||||
|
|
||||||
- **Primary Risk:** Missing color references causing inconsistent appearance
|
| Risk | Likelihood | Impact | Mitigation |
|
||||||
- **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
|
| 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
|
## Definition of Done
|
||||||
|
|
||||||
- [ ] All stories completed with acceptance criteria met
|
- [ ] Story 10.1: Core CSS theme updated with new colors
|
||||||
- [ ] Existing functionality verified through visual testing
|
- [ ] 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
|
- [ ] 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
|
- [ ] PDF exports display new branding
|
||||||
- [ ] Documentation reflects new color palette
|
- [ ] Email templates display new branding
|
||||||
- [ ] No regression in existing features
|
|
||||||
- [ ] Code formatted with Pint
|
- [ ] 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
|
**Total estimated files to modify:** ~70 files
|
||||||
- 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
|
|
||||||
|
|
||||||
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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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?
|
||||||
|
|
@ -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
|
||||||
Loading…
Reference in New Issue