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

updates storys 12.2-12.6 for reimplimintation

This commit is contained in:
Naser Mansour 2026-01-04 01:39:38 +02:00
parent 61068e7eee
commit b2ff6df18e
6 changed files with 592 additions and 690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
docs/stories/epic-12-branding-refresh.md
View File

@ -2,13 +2,13 @@
## Epic Goal ## Epic Goal
Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme from charcoal/warm gray to an olive green palette that aligns with the new botanical logo design. Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme to a refined dark charcoal and warm gold palette that creates an elegant, professional aesthetic.
## Epic Description ## Epic Description
### Existing System Context ### Existing System Context
- **Current relevant functionality:** The application uses a horizontal SVG logo (240×60px) in navbar and footer, with a color scheme based on Charcoal (#4A4A42) and Warm Gray (#C9C4BA) - **Current relevant functionality:** The application uses a square PNG logo in navbar and footer, with a color scheme that needs updating
- **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components - **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components
- **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components. - **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components.
@ -16,64 +16,78 @@ Update the LIBRA for Rights brand identity by implementing the new square logo w
**What's being added/changed:** **What's being added/changed:**
1. Replace horizontal SVG logo with new square logo featuring Palestinian tatreez (embroidery) patterns 1. Update color palette to dark charcoal and warm gold theme
2. Update color palette from charcoal/warm gray to olive green theme 2. Adjust CSS for new color scheme
3. Adjust CSS/layouts to accommodate square logo dimensions 3. Update all brand assets colors (emails, PDFs)
4. Update all brand assets (favicon, mobile icons, email logo)
**New Color Palette:** **New Color Palette:**
| Color | Old Hex | New Hex | Usage | | Color Name | Hex | Usage |
|-------|---------|---------|-------| |------------|-----|-------|
| Primary | #4A4A42 (Charcoal) | #8AB357 (Olive Green) | Primary backgrounds, accents | | Primary (Dark Charcoal) | `#1B1D1A` | Header/Footer backgrounds |
| Secondary | #C9C4BA (Warm Gray) | #A5C87A (Light Olive) | Secondary backgrounds, borders | | CTA (Warm Gold) | `#A68966` | Buttons, links, accents |
| Background | #E8E4DC (Off-White) | #E8E4DC (Off-White) | Light backgrounds (unchanged) | | Background (Warm Cream) | `#F4F1EA` | Main page background |
| Text | #1A1A1A (Deep Black) | #1A1A1A (Deep Black) | Text, headings (unchanged) | | Text (Forest Green) | `#2D322A` | Headings, body text |
| Card (Pure White) | `#FFFFFF` | Card backgrounds |
| Active (Olive Green) | `#4A5D23` | Active states, language toggle |
**Color Variants (for hover/active states):**
| Variant | Hex | Usage |
|---------|-----|-------|
| Primary Light | `#2D322A` | Primary hover state |
| CTA Hover | `#8A7555` | Button hover state |
| CTA Light | `#C4A882` | Light accent |
| Active Hover | `#5A7030` | Active state hover |
**How it integrates:** **How it integrates:**
- Logo files will be placed in `public/images/` replacing existing SVG files
- Tailwind CSS color configuration will be updated - Tailwind CSS color configuration will be updated
- Existing Blade components will automatically use new colors via CSS variables - Existing Blade components will automatically use new colors via CSS variables
**Success criteria:** **Success criteria:**
- New square logo displays correctly in navbar and footer - Color scheme consistently uses new palette across all pages
- Color scheme consistently uses olive green palette across all pages - Professional, elegant appearance maintained
- All favicon and mobile app icons updated
- No visual regressions in existing UI components - No visual regressions in existing UI components
## Stories ## Stories
### Story 12.1: Logo Asset Deployment and CSS Layout Updates ### Story 12.1: Logo Asset Deployment and CSS Layout Updates
**File:** `story-12.1-logo-asset-deployment.md` **File:** `story-12.1-logo-asset-deployment.md`
**Status:** ✅ Completed (no changes needed - logo already deployed)
Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment. Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment.
### Story 12.2: Core CSS Theme Update - Olive Green Palette ### Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
**File:** `story-12.2-core-css-theme-update.md` **File:** `story-12.2-core-css-theme-update.md`
**Status:** 🔄 Needs Reimplementation
Update Tailwind CSS theme variables from charcoal/warm gray to olive green palette. Add color variants for hover, active, and light states. Maintain backward compatibility aliases. Update Tailwind CSS theme variables to new dark charcoal and warm gold palette. Add color variants for hover, active, and light states.
### Story 12.3: Blade Component Color Migration ### Story 12.3: Blade Component Color Migration
**File:** `story-12.3-blade-component-color-migration.md` **File:** `story-12.3-blade-component-color-migration.md`
**Status:** 🔄 Needs Reimplementation
Update all Blade components and pages to use the new olive green palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components. Update all Blade components and pages to use the new color palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.
### Story 12.4: Email Template Color and Logo Update ### Story 12.4: Email Template Color Update
**File:** `story-12.4-email-template-color-update.md` **File:** `story-12.4-email-template-color-update.md`
**Status:** 🔄 Needs Reimplementation
Update email templates to use new olive green colors and square logo. Includes theme CSS, header/footer components, button styles, and all notification emails. Update email templates to use new colors. Includes theme CSS, header/footer components, button styles, and all notification emails.
### Story 12.5: PDF Template Color and Logo Update ### Story 12.5: PDF Template Color Update
**File:** `story-12.5-pdf-template-color-update.md` **File:** `story-12.5-pdf-template-color-update.md`
**Status:** 🔄 Needs Reimplementation
Update PDF export templates to use new olive green colors and square logo. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService. Update PDF export templates to use new colors. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.
### Story 12.6: Brand Documentation and Cleanup ### Story 12.6: Brand Documentation Update
**File:** `story-12.6-documentation-update.md` **File:** `story-12.6-documentation-update.md`
**Status:** ⏳ Blocked (after 12.2-12.5)
Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.md`, `CLAUDE.md`) to reflect new branding. Update test color assertions. Remove old logo files and cleanup. Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new color palette. Update test color assertions. Final cleanup and verification.
## Compatibility Requirements ## Compatibility Requirements
@ -99,37 +113,39 @@ Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.
## Technical Notes ## Technical Notes
### Logo Files Generated
Located in `logo/` folder, ready for deployment:
| File | Dimensions | Target Location |
|------|------------|-----------------|
| `favicon.ico` | 16/32/48px | `public/favicon.ico` |
| `favicon-16x16.png` | 16×16 | `public/favicon-16x16.png` |
| `favicon-32x32.png` | 32×32 | `public/favicon-32x32.png` |
| `apple-touch-icon.png` | 180×180 | `public/apple-touch-icon.png` |
| `android-chrome-192x192.png` | 192×192 | `public/android-chrome-192x192.png` |
| `android-chrome-512x512.png` | 512×512 | `public/android-chrome-512x512.png` |
| `logo-square.png` | 623×628 | `public/images/logo.png` |
| `logo-email.png` | 200×200 | `public/images/logo-email.png` |
### Color Values for Implementation ### Color Values for Implementation
```css ```css
/* New Olive Green Palette */ /* New Dark Charcoal & Warm Gold Palette */
--color-primary: #8AB357; /* Olive Green - replaces Charcoal */ --color-primary: #1B1D1A; /* Dark Charcoal - Header/Footer backgrounds */
--color-secondary: #A5C87A; /* Light Olive - replaces Warm Gray */ --color-cta: #A68966; /* Warm Gold - Buttons, links, accents */
--color-background: #E8E4DC; /* Off-White - unchanged */ --color-background: #F4F1EA; /* Warm Cream - Main page background */
--color-text: #1A1A1A; /* Deep Black - unchanged */ --color-text: #2D322A; /* Forest Green - Headings, body text */
--color-card: #FFFFFF; /* Pure White - Card backgrounds */
--color-active: #4A5D23; /* Olive Green - Active states */
/* Additional olive variants for UI states */ /* Color variants for UI states */
--color-primary-hover: #7AA347; /* Darker olive for hover states */ --color-primary-light: #2D322A; /* Primary hover state */
--color-primary-dark: #6A9337; /* Dark olive for active/pressed */ --color-cta-hover: #8A7555; /* Button hover state */
--color-primary-light: #B5D88A; /* Light olive for highlights */ --color-cta-light: #C4A882; /* Light accent */
--color-active-hover: #5A7030; /* Active state hover */
``` ```
### Color Usage Guidelines
| Element | Color | Hex |
|---------|-------|-----|
| Header/Footer Background | Primary | `#1B1D1A` |
| Main Page Background | Background | `#F4F1EA` |
| Card Backgrounds | Card | `#FFFFFF` |
| CTA Buttons | CTA | `#A68966` |
| Button Hover | CTA Hover | `#8A7555` |
| Headings & Text | Text | `#2D322A` |
| Active Language Toggle | Active | `#4A5D23` |
| Links | CTA | `#A68966` |
| Link Hover | CTA Hover | `#8A7555` |
## Dependencies ## Dependencies
- Logo files already generated in `logo/` folder - Logo files already deployed
- No external dependencies required - No external dependencies required

234
docs/stories/story-12.2-core-css-theme-update.md
View File

@ -1,28 +1,29 @@
# Story 12.2: Core CSS Theme Update - Olive Green Palette # Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
## Story ## Story
**As a** developer **As a** developer
**I want to** update the Tailwind CSS theme to use the new olive green color palette **I want to** update the Tailwind CSS theme to use the new dark charcoal and warm gold color palette
**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo **So that** the application reflects the refined LIBRA for Rights brand colors
## Acceptance Criteria ## Acceptance Criteria
### AC1: Update Color Variables in `resources/css/app.css` ### AC1: Update Color Variables in `resources/css/app.css`
**Given** the current theme uses Charcoal/Warm Gray palette **Given** the current theme uses Olive Green palette
**When** I update the `@theme` block **When** I update the `@theme` block
**Then** the following color mappings are applied: **Then** the following color mappings are applied:
| Old Variable | Old Hex | New Variable | New Hex | | Variable | New Hex | Usage |
|--------------|---------|--------------|---------| |----------|---------|-------|
| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) | | `--color-primary` | `#1B1D1A` | Header/Footer backgrounds |
| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) | | `--color-cta` | `#A68966` | CTA buttons, links, accents |
| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) | | `--color-background` | `#F4F1EA` | Main page background |
| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged | | `--color-text` | `#2D322A` | Headings, body text |
| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged | | `--color-card` | `#FFFFFF` | Card backgrounds |
| `--color-active` | `#4A5D23` | Active states, language toggle |
### AC2: Add Olive Green Color Variants ### AC2: Add Color Variants for UI States
**Given** the new palette needs hover and active states **Given** the new palette needs hover and active states
**When** I update the theme **When** I update the theme
@ -30,63 +31,38 @@
| Variable | Hex | Usage | | Variable | Hex | Usage |
|----------|-----|-------| |----------|-----|-------|
| `--color-primary` | `#8AB357` | Primary olive green | | `--color-primary-light` | `#2D322A` | Primary hover state |
| `--color-primary-hover` | `#7AA347` | Darker olive for hover | | `--color-cta-hover` | `#8A7555` | Button hover state |
| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed | | `--color-cta-light` | `#C4A882` | Light CTA accent |
| `--color-primary-light` | `#B5D88A` | Light olive for highlights | | `--color-active-hover` | `#5A7030` | Active state hover |
| `--color-accent` | `#A5C87A` | Secondary light olive |
| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
### AC2.1: Logo Badge Styling ### AC3: Update Button Styles
**Given** the logo has a beige background that contrasts with olive green headers/footers **Given** button classes use the primary/accent colors
**When** I add the logo badge styling
**Then** the following CSS class is defined:
| Class | Properties |
|-------|------------|
| `.logo-badge` | `border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);` |
This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.
### AC3: Maintain Backward Compatibility Aliases
**Given** existing components may use old color names
**When** the theme is updated
**Then** aliases are updated so existing classes continue to work:
- `--color-charcoal` → points to `--color-primary` (Olive Green)
- `--color-warm-gray` → points to `--color-accent` (Light Olive)
- Legacy navy/gold aliases remain for any residual references
### AC4: Update Button Styles
**Given** button classes use the primary color
**When** theme is updated **When** theme is updated
**Then** `.btn-primary` and `.btn-secondary` use new olive palette: **Then** `.btn-primary` and `.btn-secondary` use new palette:
- Primary: Olive Green background (`#8AB357`), Off-White text - Primary: Warm Gold background (`#A68966`), White text
- Primary Hover: Darker Olive (`#7AA347`) - Primary Hover: Darker Gold (`#8A7555`)
- Secondary: Light Olive border, Deep Black text - Secondary: Dark Charcoal border, Dark text
- Hover states updated accordingly - Hover states updated accordingly
### AC5: Update Form Focus States ### AC4: Update Form Focus States
**Given** form inputs have focus rings **Given** form inputs have focus rings
**When** theme is updated **When** theme is updated
**Then** focus states use Olive Green: **Then** focus states use Warm Gold:
- `focus:border-accent` → Light Olive border - `focus:border-cta` → Warm Gold border
- `focus:ring-accent` → Light Olive ring - `focus:ring-cta` → Warm Gold ring
- `focus:ring-primary` → Olive Green ring
### AC6: Update Link Colors ### AC5: Update Link Colors
**Given** links use accent colors **Given** links use accent colors
**When** theme is updated **When** theme is updated
**Then** link colors use olive palette: **Then** link colors use warm gold:
- Default: Olive Green (`#8AB357`) - Default: Warm Gold (`#A68966`)
- Hover: Darker Olive (`#7AA347`) - Hover: Darker Gold (`#8A7555`)
- Visited: Primary Olive (unchanged)
### AC7: Status Colors Unchanged ### AC6: Status Colors Unchanged
**Given** status colors serve functional purposes **Given** status colors serve functional purposes
**When** theme is updated **When** theme is updated
@ -95,25 +71,25 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
- `--color-danger: #E74C3C` - `--color-danger: #E74C3C`
- `--color-warning: #F39C12` - `--color-warning: #F39C12`
### AC8: WCAG AA Contrast Compliance ### AC7: WCAG AA Contrast Compliance
**Given** accessibility requirements **Given** accessibility requirements
**When** new colors are applied **When** new colors are applied
**Then** all text/background combinations meet WCAG AA: **Then** all text/background combinations meet WCAG AA:
- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text - Text (`#2D322A`) on Warm Cream (`#F4F1EA`): ≥4.5:1 for body text
- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text - White text on Dark Charcoal (`#1B1D1A`): ≥4.5:1 for body text
- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio - White text on Warm Gold (`#A68966`): Verify contrast ratio
### AC9: Update Prose Class ### AC8: Update Prose Class
**Given** `.prose-brand` class exists for blog content **Given** `.prose-brand` class exists for blog content
**When** theme is updated **When** theme is updated
**Then** prose colors use olive palette: **Then** prose colors use new palette:
- Headings: Deep Black - Headings: Forest Green (`#2D322A`)
- Links: Olive Green - Links: Warm Gold (`#A68966`)
- Body: Deep Black - Body: Forest Green (`#2D322A`)
### AC10: Build Succeeds ### AC9: Build Succeeds
**Given** CSS changes are made **Given** CSS changes are made
**When** I run `npm run build` **When** I run `npm run build`
@ -126,60 +102,51 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
### New Color Palette Reference ### New Color Palette Reference
| Color | Hex | RGB | Usage | | Color Name | Hex | RGB | Usage |
|-------|-----|-----|-------| |------------|-----|-----|-------|
| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color | | Dark Charcoal | `#1B1D1A` | rgb(27, 29, 26) | Header/Footer backgrounds |
| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states | | Warm Gold | `#A68966` | rgb(166, 137, 102) | CTA buttons, links |
| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states | | Warm Cream | `#F4F1EA` | rgb(244, 241, 234) | Main page background |
| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent | | Forest Green | `#2D322A` | rgb(45, 50, 42) | Text color |
| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds | | Pure White | `#FFFFFF` | rgb(255, 255, 255) | Card backgrounds |
| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights | | Olive Green | `#4A5D23` | rgb(74, 93, 35) | Active states |
| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) | | Gold Hover | `#8A7555` | rgb(138, 117, 85) | Button hover |
| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) | | Gold Light | `#C4A882` | rgb(196, 168, 130) | Light accents |
| Olive Hover | `#5A7030` | rgb(90, 112, 48) | Active hover |
### Contrast Verification ### Contrast Verification
Use WebAIM Contrast Checker to verify: Use WebAIM Contrast Checker to verify:
- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA) - Forest Green (#2D322A) on Warm Cream (#F4F1EA): ~10:1 (passes AAA)
- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes) - White (#FFFFFF) on Dark Charcoal (#1B1D1A): ~17:1 (passes AAA)
- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA) - White (#FFFFFF) on Warm Gold (#A68966): ~3.5:1 (passes AA for large text)
**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead. **Note:** For small text on Warm Gold buttons, use white text as it provides sufficient contrast for button contexts.
### Logo Badge Styling
```css
/* Badge styling for logo on olive backgrounds */
.logo-badge {
border: 2px solid var(--color-text);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
}
```
### CSS Theme Block Example ### CSS Theme Block Example
```css ```css
@theme { @theme {
/* Primary Olive Green Palette */ /* Primary Dark Charcoal Palette */
--color-primary: #8AB357; --color-primary: #1B1D1A;
--color-primary-hover: #7AA347; --color-primary-light: #2D322A;
--color-primary-dark: #6A9337;
--color-primary-light: #B5D88A;
/* Secondary/Accent */ /* CTA Warm Gold */
--color-accent: #A5C87A; --color-cta: #A68966;
--color-accent-light: #C5D9A5; --color-cta-hover: #8A7555;
--color-accent-content: #A5C87A; --color-cta-light: #C4A882;
--color-accent-foreground: #1A1A1A;
/* Neutrals (unchanged) */ /* Active Olive Green */
--color-background: #E8E4DC; --color-active: #4A5D23;
--color-text: #1A1A1A; --color-active-hover: #5A7030;
/* Backward compatibility */ /* Neutrals */
--color-charcoal: var(--color-primary); --color-background: #F4F1EA;
--color-warm-gray: var(--color-accent); --color-text: #2D322A;
--color-off-white: var(--color-background); --color-card: #FFFFFF;
/* For text on dark backgrounds */
--color-off-white: #F4F1EA;
/* Status colors (unchanged) */ /* Status colors (unchanged) */
--color-success: #27AE60; --color-success: #27AE60;
@ -190,66 +157,47 @@ Use WebAIM Contrast Checker to verify:
## Dev Checklist ## Dev Checklist
- [x] Update `@theme` block with new olive green values - [ ] Update `@theme` block with new color values
- [x] Add olive green variants (hover, dark, light) - [ ] Add color variants (hover, light)
- [x] Add `.logo-badge` class with border and shadow - [ ] Update `.btn-primary` styles to use CTA colors
- [x] Update backward-compatible aliases - [ ] Update `.btn-secondary` styles
- [x] Update `.btn-primary` styles - [ ] Update form focus states
- [x] Update `.btn-secondary` styles - [ ] Update link colors
- [x] Update form focus states - [ ] Update `.prose-brand` class
- [x] Update link colors - [ ] Update skip-link focus styles
- [x] Update `.prose-brand` class - [ ] Verify status colors unchanged
- [x] Update skip-link focus styles
- [x] Update timeline-dot color
- [x] Update skeleton loader color
- [x] Verify status colors unchanged
- [ ] Run contrast checker on all combinations - [ ] Run contrast checker on all combinations
- [x] Run `npm run build` successfully - [ ] Run `npm run build` successfully
- [ ] Visual test in browser - [ ] Visual test in browser
## Estimation ## Estimation
**Complexity:** Low-Medium **Complexity:** Low-Medium
**Risk:** Low - CSS-only changes with aliases for backward compatibility **Risk:** Low - CSS-only changes
## Dependencies ## Dependencies
- Can run in parallel with Story 12.1 (Logo Deployment) - Story 12.1 (Logo Deployment) - Completed
--- ---
## Dev Agent Record ## Dev Agent Record
### Agent Model Used ### Agent Model Used
Claude Opus 4.5 (To be filled during implementation)
### Status ### Status
In Progress - Pending Visual Test & Contrast Check Not Started - Ready for Implementation
### File List ### File List
| File | Action | | File | Action |
|------|--------| |------|--------|
| `resources/css/app.css` | Modified | | `resources/css/app.css` | To be modified |
### Change Log ### Change Log
| Date | Change | | Date | Change |
|------|--------| |------|--------|
| 2026-01-04 | Updated @theme block with olive green palette (AC1, AC2) | | 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
| 2026-01-04 | Added .logo-badge class for seal/stamp effect (AC2.1) |
| 2026-01-04 | Updated backward compatibility aliases (AC3) |
| 2026-01-04 | Updated .btn-primary and .btn-secondary styles (AC4) |
| 2026-01-04 | Form focus states auto-updated via CSS variables (AC5) |
| 2026-01-04 | Updated .prose-brand link colors (AC6, AC9) |
| 2026-01-04 | Verified status colors unchanged (AC7) |
| 2026-01-04 | Updated skip-link focus styles for olive palette |
| 2026-01-04 | Timeline-dot and skeleton loader auto-updated via CSS variables |
### Completion Notes ### Completion Notes
- All CSS changes implemented in `resources/css/app.css` (To be filled during implementation)
- Colors use CSS variables for consistency across components
- Backward compatibility maintained via aliases (--color-charcoal, --color-warm-gray, --color-navy, --color-gold)
- Skip-link updated to use `bg-primary text-off-white` for better visibility
- Build successful: `npm run build` completed without errors (258.29 kB CSS output)
### Debug Log References
None

238
docs/stories/story-12.3-blade-component-color-migration.md
View File

@ -1,89 +1,96 @@
# Story 12.3: Blade Component Color Migration - Olive Green # Story 12.3: Blade Component Color Migration - Dark Charcoal & Warm Gold
## Story ## Story
**As a** developer **As a** developer
**I want to** update all Blade components and pages to use the new olive green palette **I want to** update all Blade components and pages to use the new dark charcoal and warm gold palette
**So that** the entire application has consistent branding with the new botanical logo **So that** the entire application has consistent branding
## Acceptance Criteria ## Acceptance Criteria
### AC1: Navigation Component Updated ### AC1: Navigation Component Updated
**Given** `resources/views/components/navigation.blade.php` uses charcoal colors **Given** `resources/views/components/navigation.blade.php` uses current colors
**When** I update the component **When** I update the component
**Then** the following changes are applied: **Then** the following changes are applied:
- Background: Charcoal → Olive Green (`bg-charcoal` → `bg-primary`) - Background: Dark Charcoal (`#1B1D1A` / `bg-primary`)
- Text/Links: Off-White for contrast on olive background - Text/Links: Warm Cream (`#F4F1EA` / `text-off-white`) for contrast
- Hover states: Use darker olive (`hover:bg-primary-hover`) - Hover states: Use `hover:bg-primary-light`
- Mobile menu uses new olive colors - Mobile menu uses new colors
- Active states updated accordingly - Active states use Olive Green (`#4A5D23`)
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
### AC2: Footer Component Updated ### AC2: Footer Component Updated
**Given** `resources/views/components/footer.blade.php` uses charcoal colors **Given** `resources/views/components/footer.blade.php` uses current colors
**When** I update the component **When** I update the component
**Then** the following changes are applied: **Then** the following changes are applied:
- Background: Charcoal → Olive Green - Background: Dark Charcoal (`#1B1D1A`)
- Text: Off-White for contrast - Text: Warm Cream for contrast
- Links: Light Olive with hover states - Links: Warm Gold (`#A68966`) with hover states
- Social icons: Appropriate contrast colors - Social icons: Appropriate contrast colors
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
### AC3: Card Components Updated ### AC3: Card Components Updated
**Given** card components use old accent colors **Given** card components use accent colors
**When** I update `resources/views/components/ui/card.blade.php` **When** I update `resources/views/components/ui/card.blade.php`
**Then** the following changes are applied: **Then** the following changes are applied:
- Background: Off-White (unchanged) - Background: Pure White (`#FFFFFF` / `bg-card`)
- Borders/accents: Light Olive (`border-accent`) - Borders/accents: Gold Light (`#C4A882`)
- Text: Deep Black (unchanged) - Text: Forest Green (`#2D322A`)
- Hover states: Subtle olive highlight - Hover states: Subtle highlight
### AC4: Stat Card Component Updated ### AC4: Stat Card Component Updated
**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors **Given** `resources/views/components/ui/stat-card.blade.php` uses colors
**When** I update the component **When** I update the component
**Then** accent colors use olive palette: **Then** accent colors use new palette:
- Icon backgrounds: Light Olive - Icon backgrounds: Gold Light (`#C4A882`)
- Value highlights: Olive Green - Value highlights: Warm Gold (`#A68966`)
- Borders: Light Olive - Borders: Gold Light
### AC5: Spinner Component Updated ### AC5: Spinner Component Updated
**Given** `resources/views/components/spinner.blade.php` uses old colors **Given** `resources/views/components/spinner.blade.php` uses colors
**When** I update the component **When** I update the component
**Then** spinner uses Olive Green **Then** spinner uses Warm Gold (`#A68966`)
### AC6: Toast Component Updated ### AC6: Toast Component Updated
**Given** `resources/views/components/toast.blade.php` uses old colors **Given** `resources/views/components/toast.blade.php` uses colors
**When** I update the component **When** I update the component
**Then** default toast uses olive palette (status colors remain unchanged) **Then** default/info toast uses Warm Gold (status colors remain unchanged)
### AC7: Language Toggle Updated ### AC7: Language Toggle Updated
**Given** `resources/views/components/language-toggle.blade.php` uses old colors **Given** `resources/views/components/language-toggle.blade.php` uses colors
**When** I update the component **When** I update the component
**Then** active/inactive states use olive colors **Then**:
- Active state: Olive Green background (`#4A5D23`)
- Inactive state: Transparent or subtle
- Hover: Olive Hover (`#5A7030`)
### AC8: Public Pages Updated ### AC8: Public Pages Updated
**Given** public pages use old accent colors **Given** public pages use accent colors
**When** I update the following pages **When** I update the following pages
**Then** they use the new olive palette: **Then** they use the new palette:
- `resources/views/pages/home.blade.php` - `resources/views/pages/home.blade.php`
- `resources/views/pages/booking.blade.php` - `resources/views/pages/booking.blade.php`
- `resources/views/pages/terms.blade.php` - `resources/views/pages/terms.blade.php`
- `resources/views/pages/privacy.blade.php` - `resources/views/pages/privacy.blade.php`
- `resources/views/pages/legal.blade.php` - `resources/views/pages/legal.blade.php`
Key updates:
- Headings: Forest Green (`#2D322A`)
- CTA buttons: Warm Gold (`#A68966`)
- Links: Warm Gold with hover
- Backgrounds: Warm Cream (`#F4F1EA`)
### AC9: Post Pages Updated ### AC9: Post Pages Updated
**Given** post display pages use old colors **Given** post display pages use colors
**When** I update the following pages **When** I update the following pages
**Then** they use the new olive palette: **Then** they use the new palette:
- `resources/views/livewire/pages/posts/index.blade.php` - `resources/views/livewire/pages/posts/index.blade.php`
- `resources/views/livewire/pages/posts/show.blade.php` - `resources/views/livewire/pages/posts/show.blade.php`
@ -91,29 +98,30 @@
**Given** admin dashboard uses accent colors **Given** admin dashboard uses accent colors
**When** I update admin components **When** I update admin components
**Then** they use olive palette: **Then** they use new palette:
- Sidebar/navigation accents - Sidebar/navigation accents: Warm Gold
- Card highlights - Card highlights: Gold Light
- Button accents - Button accents: Warm Gold
- Table header accents - Table header accents: Dark Charcoal background
### AC11: Client Dashboard Components Updated ### AC11: Client Dashboard Components Updated
**Given** client dashboard uses accent colors **Given** client dashboard uses accent colors
**When** I update client components **When** I update client components
**Then** they use olive palette consistently **Then** they use new palette consistently
### AC12: Public Layout Updated ### AC12: Public Layout Updated
**Given** `resources/views/components/layouts/public.blade.php` uses old colors **Given** `resources/views/components/layouts/public.blade.php` uses colors
**When** I update the layout **When** I update the layout
**Then** it uses the new olive palette **Then** it uses the new palette:
- Body background: Warm Cream (`#F4F1EA`)
### AC13: RTL Layout Integrity ### AC13: RTL Layout Integrity
**Given** the application supports RTL (Arabic) **Given** the application supports RTL (Arabic)
**When** colors are updated **When** colors are updated
**Then** RTL layout displays correctly with new olive colors **Then** RTL layout displays correctly with new colors
### AC14: Responsive Appearance ### AC14: Responsive Appearance
@ -128,7 +136,6 @@
**Components:** **Components:**
- `resources/views/components/navigation.blade.php` - `resources/views/components/navigation.blade.php`
- `resources/views/components/footer.blade.php` - `resources/views/components/footer.blade.php`
- `resources/views/components/logo.blade.php` - Add `logo-badge` class for badge/seal effect
- `resources/views/components/language-toggle.blade.php` - `resources/views/components/language-toggle.blade.php`
- `resources/views/components/spinner.blade.php` - `resources/views/components/spinner.blade.php`
- `resources/views/components/toast.blade.php` - `resources/views/components/toast.blade.php`
@ -155,60 +162,72 @@
### Color Class Mapping ### Color Class Mapping
| Old Class | New Class | | Old Class | New Class | Color |
|-----------|-----------| |-----------|-----------|-------|
| `bg-charcoal` | `bg-primary` (Olive Green) | | `bg-primary` (olive) | `bg-primary` | Dark Charcoal `#1B1D1A` |
| `text-charcoal` | `text-primary` | | `bg-accent` | `bg-cta` or `bg-cta-light` | Warm Gold / Gold Light |
| `border-charcoal` | `border-primary` | | `text-primary` | `text-cta` | Warm Gold for links |
| `bg-warm-gray` | `bg-accent` (Light Olive) | | `text-text` | `text-text` | Forest Green `#2D322A` |
| `text-warm-gray` | `text-accent` | | `bg-background` | `bg-background` | Warm Cream `#F4F1EA` |
| `border-warm-gray` | `border-accent` | | `bg-white` | `bg-card` | Pure White `#FFFFFF` |
| `hover:bg-charcoal` | `hover:bg-primary-hover` | | `hover:bg-primary-hover` | `hover:bg-primary-light` | `#2D322A` |
| `hover:text-charcoal` | `hover:text-primary-hover` |
### Visual Hierarchy with Olive Green ### Visual Hierarchy with New Palette
**Primary Actions:** **Header/Footer:**
- Background: Olive Green (`#8AB357`) - Background: Dark Charcoal (`#1B1D1A`)
- Text: Off-White (`#E8E4DC`) or Deep Black depending on contrast - Text: Warm Cream (`#F4F1EA`)
- Links: Warm Cream, hover to Warm Gold
**Primary Actions (CTA Buttons):**
- Background: Warm Gold (`#A68966`)
- Text: White (`#FFFFFF`)
- Hover: Gold Hover (`#8A7555`)
**Secondary Actions:** **Secondary Actions:**
- Border: Light Olive (`#A5C87A`) - Border: Dark Charcoal or Warm Gold
- Text: Olive Green or Deep Black - Text: Forest Green or Warm Gold
**Highlights/Accents:** **Active States (Language Toggle):**
- Background: Light Olive (`#A5C87A`) or Pale Olive (`#C5D9A5`) - Background: Olive Green (`#4A5D23`)
- Text: Deep Black for contrast - Text: White
- Hover: Olive Hover (`#5A7030`)
**Cards:**
- Background: Pure White (`#FFFFFF`)
- Border: Gold Light (`#C4A882`) or subtle gray
- Text: Forest Green (`#2D322A`)
**Page Background:**
- Main: Warm Cream (`#F4F1EA`)
## Dev Checklist ## Dev Checklist
- [x] Update `navigation.blade.php` - [ ] Update `navigation.blade.php` - Dark Charcoal bg, Warm Cream text
- [x] Update `footer.blade.php` - [ ] Update `footer.blade.php` - Dark Charcoal bg, Warm Cream text
- [x] Apply `.logo-badge` class to logo in navigation - [ ] Update `language-toggle.blade.php` - Olive Green active state
- [x] Apply `.logo-badge` class to logo in footer - [ ] Update `spinner.blade.php` - Warm Gold color
- [x] Update `language-toggle.blade.php` - [ ] Update `toast.blade.php` - Warm Gold for info
- [x] Update `spinner.blade.php` - [ ] Update `card.blade.php` - White bg, Gold Light accents
- [x] Update `toast.blade.php` - [ ] Update `stat-card.blade.php` - Gold accents
- [x] Update `card.blade.php` - [ ] Update `public.blade.php` layout - Warm Cream body bg
- [x] Update `stat-card.blade.php` - [ ] Update `home.blade.php` - New palette
- [x] Update `public.blade.php` layout - [ ] Update `booking.blade.php` - New palette
- [x] Update `home.blade.php` - [ ] Update `terms.blade.php` - New palette
- [x] Update `booking.blade.php` - [ ] Update `privacy.blade.php` - New palette
- [x] Update `terms.blade.php` - [ ] Update `legal.blade.php` - New palette
- [x] Update `privacy.blade.php` - [ ] Update `posts/index.blade.php` - New palette
- [x] Update `legal.blade.php` - [ ] Update `posts/show.blade.php` - New palette
- [x] Update `posts/index.blade.php` - [ ] Review and update admin dashboard components
- [x] Update `posts/show.blade.php` - [ ] Review and update client dashboard components
- [x] Review and update admin dashboard components - [ ] Test RTL layout (Arabic)
- [x] Review and update client dashboard components - [ ] Test responsive breakpoints
- [x] Test RTL layout (Arabic) - [ ] Visual review all updated pages
- [x] Test responsive breakpoints
- [x] Visual review all updated pages
## Estimation ## Estimation
**Complexity:** Medium **Complexity:** Medium
**Risk:** Low - Mostly class name updates with CSS variables doing the heavy lifting **Risk:** Low - Mostly class name updates with CSS variables
## Dependencies ## Dependencies
@ -218,46 +237,19 @@
## Dev Agent Record ## Dev Agent Record
### Status: Ready for Review ### Status
Not Started - Ready for Implementation
### Agent Model Used ### Agent Model Used
Claude Opus 4.5 (To be filled during implementation)
### File List ### File List
(To be filled during implementation)
**Modified Files:**
- `resources/views/components/navigation.blade.php` - Updated colors to olive palette, added logo-badge class
- `resources/views/components/footer.blade.php` - Updated colors to olive palette, added logo-badge class
- `resources/views/components/language-toggle.blade.php` - Updated active/inactive states to olive colors
- `resources/views/components/spinner.blade.php` - Changed spinner color to primary (olive green)
- `resources/views/components/toast.blade.php` - Updated info toast to primary color
- `resources/views/components/ui/card.blade.php` - Updated highlight border to accent
- `resources/views/components/ui/stat-card.blade.php` - Updated icon colors to primary/accent
- `resources/views/pages/home.blade.php` - Updated text colors to text (Deep Black)
- `resources/views/pages/booking.blade.php` - Updated text colors to text
- `resources/views/pages/terms.blade.php` - Updated text colors to text
- `resources/views/pages/privacy.blade.php` - Updated text colors to text
- `resources/views/pages/legal.blade.php` - Updated text colors to text
- `resources/views/livewire/pages/posts/index.blade.php` - Updated colors to olive palette
- `resources/views/livewire/pages/posts/show.blade.php` - Updated colors to olive palette, changed prose-navy to prose-brand
- `resources/css/app.css` - Updated form component styling to use text/accent colors
### Completion Notes
1. **Color Migration Complete**: All Blade components and pages have been updated from charcoal/warm-gray to the new olive green palette (primary/accent/text).
2. **Logo Badge Applied**: The `.logo-badge` class has been applied to the logo component in both navigation and footer for the seal/stamp effect on olive backgrounds.
3. **Admin/Client Dashboard**: No old color classes found in admin or client dashboard directories - they were either already using semantic colors or don't exist yet.
4. **CSS Updates**: Form styling classes in app.css were also updated to use semantic color tokens (text/30 borders, text labels) for consistency.
5. **All Tests Passing**: PHP tests completed successfully (memory exhaustion at end of test suite is unrelated to changes).
### Change Log ### Change Log
| Date | Change |
|------|--------|
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
| Date | Change | Author | ### Completion Notes
|------|--------|--------| (To be filled during implementation)
| 2026-01-04 | Migrated all Blade components to olive green palette | Dev Agent |
| 2026-01-04 | Applied logo-badge class to navigation and footer logos | Dev Agent |
| 2026-01-04 | Updated CSS form styling to use semantic color tokens | Dev Agent |

207
docs/stories/story-12.4-email-template-color-update.md
View File

@ -1,73 +1,68 @@
# Story 12.4: Email Template Color and Logo Update # Story 12.4: Email Template Color Update - Dark Charcoal & Warm Gold
## Story ## Story
**As a** developer **As a** developer
**I want to** update email templates to use the new olive green colors and square logo **I want to** update email templates to use the new dark charcoal and warm gold colors
**So that** all email communications reflect the new LIBRA for Rights branding **So that** all email communications reflect the refined LIBRA for Rights branding
## Acceptance Criteria ## Acceptance Criteria
### AC1: Email Theme CSS Updated ### AC1: Email Theme CSS Updated
**Given** `resources/views/vendor/mail/html/themes/default.css` uses charcoal/warm gray colors **Given** `resources/views/vendor/mail/html/themes/default.css` uses current colors
**When** I update the stylesheet **When** I update the stylesheet
**Then** the following changes are applied: **Then** the following changes are applied:
| Element | Old Color | New Color | | Element | New Color | Hex |
|---------|-----------|-----------| |---------|-----------|-----|
| Links (`a`) | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | | Links (`a`) | Warm Gold | `#A68966` |
| Headings (h1, h2, h3) | `#4A4A42` (Charcoal) | `#6A9337` (Dark Olive) | | Headings (h1, h2, h3) | Forest Green | `#2D322A` |
| Header background | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | | Header background | Dark Charcoal | `#1B1D1A` |
| Footer links | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) | | Footer links | Warm Gold | `#A68966` |
| Primary button | `#4A4A42` bg, `#E8E4DC` text | `#8AB357` bg, `#E8E4DC` text | | Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` |
| Table headers | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) | | Table headers | Dark Charcoal bg, White text | `#1B1D1A` |
| Panel border | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) | | Panel border | Gold Light | `#C4A882` |
| Body text | Forest Green | `#2D322A` |
| Body background | Warm Cream | `#F4F1EA` |
### AC2: Email Header Component Updated ### AC2: Email Header Component Updated
**Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles **Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles
**When** I update the component **When** I update the component
**Then**: **Then**:
- Background color updated to Olive Green (`#8AB357`) - Background color updated to Dark Charcoal (`#1B1D1A`)
- Logo reference updated to new square logo (`logo-email.png`) - Text color: White or Warm Cream
- Logo sizing adjusted for square format - Logo sizing maintained for square format
### AC3: Email Footer Component Updated ### AC3: Email Footer Component Updated
**Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles **Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles
**When** I update the component **When** I update the component
**Then** any inline color references use olive palette **Then** any inline color references use new palette:
- Text: Forest Green (`#2D322A`)
- Links: Warm Gold (`#A68966`)
### AC4: Button Component Updated ### AC4: Button Component Updated
**Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles **Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles
**When** I update the component **When** I update the component
**Then** primary buttons use: **Then** primary buttons use:
- Background: Olive Green (`#8AB357`) - Background: Warm Gold (`#A68966`)
- Text: Off-White (`#E8E4DC`) - Text: White (`#FFFFFF`)
- Hover hint: Darker Olive (`#7AA347`) - Hover hint: Gold Hover (`#8A7555`)
### AC5: Panel Component Updated ### AC5: Panel Component Updated
**Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles **Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles
**When** I update the component **When** I update the component
**Then** panel border uses Light Olive (`#A5C87A`) **Then** panel border uses Gold Light (`#C4A882`)
### AC6: Email Logo Updated to Square Format ### AC6: All Email Templates Tested
**Given** email header displays the logo
**When** emails are sent
**Then**:
- Logo uses `logo-email.png` (square format, 60px height)
- Logo is centered or left-aligned appropriately
- Alt text reads "LIBRA for Rights"
### AC7: All Email Templates Tested
**Given** the application sends various email types **Given** the application sends various email types
**When** I test each email template **When** I test each email template
**Then** colors and logo display correctly: **Then** colors display correctly:
- Welcome email - Welcome email
- Booking submitted confirmation - Booking submitted confirmation
- Booking approved/rejected - Booking approved/rejected
@ -77,13 +72,13 @@
- Guest booking notifications - Guest booking notifications
- Admin notifications - Admin notifications
### AC8: Plain Text Fallback Unaffected ### AC7: Plain Text Fallback Unaffected
**Given** plain text email templates exist **Given** plain text email templates exist
**When** colors are updated **When** colors are updated
**Then** plain text templates continue to work (no color changes needed) **Then** plain text templates continue to work (no color changes needed)
### AC9: Email Client Compatibility ### AC8: Email Client Compatibility
**Given** emails are viewed in various clients **Given** emails are viewed in various clients
**When** I test the templates **When** I test the templates
@ -110,21 +105,14 @@
### Color Mapping for Email CSS ### Color Mapping for Email CSS
```css ```css
/* Old → New */ /* New Color Values */
#4A4A42 → #8AB357 /* Charcoal → Olive Green */ #1B1D1A /* Dark Charcoal - Header background, table headers */
#C9C4BA → #A5C87A /* Warm Gray → Light Olive */ #A68966 /* Warm Gold - Links, buttons, accents */
#6A9337 /* Dark Olive - for headings */ #8A7555 /* Gold Hover - Button hover state */
#7AA347 /* Darker Olive - for hover hints */ #C4A882 /* Gold Light - Panel borders, subtle accents */
``` #2D322A /* Forest Green - Text, headings */
#F4F1EA /* Warm Cream - Body background */
### Email Logo Implementation #FFFFFF /* White - Button text, header text */
```html
<!-- Old (horizontal) -->
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" style="height: 40px; width: auto;">
<!-- New (square) -->
<img src="{{ asset('images/logo-email.png') }}" alt="LIBRA for Rights" style="height: 60px; width: 60px;">
``` ```
### Email-Safe Colors ### Email-Safe Colors
@ -135,28 +123,62 @@ Email clients have limited CSS support. Ensure:
- Maintain fallback background colors - Maintain fallback background colors
- Use web-safe colors where possible - Use web-safe colors where possible
### Testing Emails ### CSS Updates Example
Use Laravel's mail preview or Mailtrap to test: ```css
```bash /* Header */
# Preview emails in browser (if configured) .header {
php artisan serve background-color: #1B1D1A;
# Visit mail preview routes }
/* Links */
a {
color: #A68966;
}
/* Headings */
h1, h2, h3 {
color: #2D322A;
}
/* Primary Button */
.button-primary {
background-color: #A68966;
color: #FFFFFF;
}
/* Panel */
.panel {
border-left-color: #C4A882;
}
/* Table Header */
.table th {
background-color: #1B1D1A;
color: #FFFFFF;
}
/* Body */
body {
background-color: #F4F1EA;
color: #2D322A;
}
``` ```
## Dev Checklist ## Dev Checklist
- [x] Update `default.css` header background color - [ ] Update `default.css` header background color to `#1B1D1A`
- [x] Update `default.css` link colors - [ ] Update `default.css` link colors to `#A68966`
- [x] Update `default.css` heading colors - [ ] Update `default.css` heading colors to `#2D322A`
- [x] Update `default.css` button colors (`.button-primary`) - [ ] Update `default.css` button colors (`.button-primary`) to `#A68966`
- [x] Update `default.css` table header colors - [ ] Update `default.css` table header colors to `#1B1D1A`
- [x] Update `default.css` panel border color - [ ] Update `default.css` panel border color to `#C4A882`
- [x] Update `default.css` footer link colors - [ ] Update `default.css` footer link colors to `#A68966`
- [x] Update `header.blade.php` - inline styles and logo reference - [ ] Update `default.css` body background to `#F4F1EA`
- [x] Update `footer.blade.php` - inline styles - [ ] Update `header.blade.php` - inline styles
- [x] Review `button.blade.php` for inline styles - [ ] Update `footer.blade.php` - inline styles
- [x] Review `panel.blade.php` for inline styles - [ ] Review `button.blade.php` for inline styles
- [ ] Review `panel.blade.php` for inline styles
- [ ] Test Welcome email appearance (manual) - [ ] Test Welcome email appearance (manual)
- [ ] Test Booking emails appearance (manual) - [ ] Test Booking emails appearance (manual)
- [ ] Test Reminder emails appearance (manual) - [ ] Test Reminder emails appearance (manual)
@ -175,7 +197,7 @@ php artisan serve
## Dependencies ## Dependencies
- Story 12.1 (Logo Deployment) must be completed for `logo-email.png` - Story 12.1 (Logo Deployment) - Completed
- Story 12.2 (Core CSS) should be completed for color reference consistency - Story 12.2 (Core CSS) should be completed for color reference consistency
--- ---
@ -183,57 +205,24 @@ php artisan serve
## Dev Agent Record ## Dev Agent Record
### Status ### Status
Ready for Review Not Started - Ready for Implementation
### Agent Model Used ### Agent Model Used
Claude Opus 4.5 (To be filled during implementation)
### File List ### File List
| File | Action | | File | Action |
|------|--------| |------|--------|
| `resources/views/vendor/mail/html/themes/default.css` | Modified | | `resources/views/vendor/mail/html/themes/default.css` | To be modified |
| `resources/views/vendor/mail/html/header.blade.php` | Modified | | `resources/views/vendor/mail/html/header.blade.php` | To be modified |
| `resources/views/vendor/mail/html/footer.blade.php` | Modified | | `resources/views/vendor/mail/html/footer.blade.php` | To be modified |
### Change Log ### Change Log
1. **default.css** - Updated all color values per AC1: | Date | Change |
- Links: `#4A4A42` → `#8AB357` (Olive Green) |------|--------|
- Headings (h1, h2, h3): `#4A4A42` → `#6A9337` (Dark Olive) | 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
- Header background: `#4A4A42` → `#8AB357`
- Footer links: `#C9C4BA` → `#A5C87A` (Light Olive)
- Primary button: `#4A4A42` → `#8AB357`
- Table headers: `#4A4A42` → `#8AB357`
- Panel border: `#C9C4BA` → `#A5C87A`
- Logo class: Updated from 45px to 60px square format
2. **header.blade.php** - Updated per AC2:
- Background color: `#4A4A42` → `#8AB357`
- Logo sizing: `height: 45px` → `height: 60px; width: 60px`
- Alt text: Changed to "LIBRA for Rights"
3. **footer.blade.php** - Updated per AC3:
- Email link color: `#C9C4BA` → `#A5C87A`
- Website link color: `#C9C4BA` → `#A5C87A`
4. **button.blade.php** - Reviewed per AC4:
- No inline styles present; uses CSS classes
- Colors handled via default.css `.button-primary` class
5. **panel.blade.php** - Reviewed per AC5:
- No inline styles present; uses CSS classes
- Border handled via default.css `.panel` class
### Completion Notes ### Completion Notes
(To be filled during implementation)
- All CSS color updates completed per acceptance criteria
- All inline styles in Blade components updated
- `logo-email.png` verified to exist at `public/images/logo-email.png`
- Plain text templates unaffected (no color changes needed)
- Automated tests pass (unrelated memory error in PDF export feature)
- Manual email client testing (AC7-AC9) required for full verification
### Debug Log References
N/A - No debugging issues encountered

206
docs/stories/story-12.5-pdf-template-color-update.md
View File

@ -1,83 +1,75 @@
# Story 12.5: PDF Template Color and Logo Update # Story 12.5: PDF Template Color Update - Dark Charcoal & Warm Gold
## Story ## Story
**As a** developer **As a** developer
**I want to** update PDF export templates to use the new olive green colors and square logo **I want to** update PDF export templates to use the new dark charcoal and warm gold colors
**So that** all exported documents reflect the new LIBRA for Rights branding **So that** all exported documents reflect the refined LIBRA for Rights branding
## Acceptance Criteria ## Acceptance Criteria
### AC1: Users Export PDF Updated ### AC1: Users Export PDF Updated
**Given** `resources/views/pdf/users-export.blade.php` uses charcoal colors **Given** `resources/views/pdf/users-export.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** the following changes are applied: **Then** the following changes are applied:
- Header background: Charcoal → Olive Green (`#8AB357`) - Header background: Dark Charcoal (`#1B1D1A`)
- Header text: Off-White (`#E8E4DC`) - Header text: White (`#FFFFFF`)
- Accent elements: Warm Gray → Light Olive (`#A5C87A`) - Accent elements: Warm Gold (`#A68966`) or Gold Light (`#C4A882`)
- Table headers: Charcoal → Olive Green - Table headers: Dark Charcoal background, white text
- Borders: Updated to olive palette - Borders: Gold Light (`#C4A882`)
- Logo: Square format - Body text: Forest Green (`#2D322A`)
### AC2: Consultations Export PDF Updated ### AC2: Consultations Export PDF Updated
**Given** `resources/views/pdf/consultations-export.blade.php` uses charcoal colors **Given** `resources/views/pdf/consultations-export.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** colors match the new olive green palette: **Then** colors match the new palette:
- Headers: Olive Green background - Headers: Dark Charcoal background
- Status badges: Appropriate contrast colors - Status badges: Appropriate contrast colors
- Table styling: Olive accents - Table styling: Gold accents
### AC3: Timelines Export PDF Updated ### AC3: Timelines Export PDF Updated
**Given** `resources/views/pdf/timelines-export.blade.php` uses charcoal colors **Given** `resources/views/pdf/timelines-export.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** colors match the new olive green palette: **Then** colors match the new palette:
- Timeline markers: Olive Green - Timeline markers: Warm Gold (`#A68966`)
- Section headers: Olive Green - Section headers: Dark Charcoal background
- Borders and accents: Light Olive - Borders and accents: Gold Light (`#C4A882`)
### AC4: Monthly Report PDF Updated ### AC4: Monthly Report PDF Updated
**Given** `resources/views/pdf/monthly-report.blade.php` uses charcoal colors **Given** `resources/views/pdf/monthly-report.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** the following changes are applied: **Then** the following changes are applied:
- Header/footer: Olive Green background - Header/footer: Dark Charcoal background (`#1B1D1A`)
- Accent colors: Light Olive - Header/footer text: White
- Charts/graphs: Updated olive color scheme - Accent colors: Warm Gold (`#A68966`)
- Text: Deep Black for readability - Charts/graphs: Updated color scheme
- Logo: Square format - Text: Forest Green (`#2D322A`)
### AC5: Monthly Report Service Updated ### AC5: Monthly Report Service Updated
**Given** `app/Services/MonthlyReportService.php` contains color references for charts **Given** `app/Services/MonthlyReportService.php` contains color references for charts
**When** I update the service **When** I update the service
**Then** chart colors use olive palette: **Then** chart colors use new palette:
- Pie chart colors: Olive Green, Light Olive, Pale Olive - Primary chart color: Warm Gold (`#A68966`)
- Line chart border: Olive Green - Secondary: Gold Light (`#C4A882`)
- Bar chart fills: Olive variations - Tertiary: Dark Charcoal (`#1B1D1A`)
- Quaternary: Olive Green (`#4A5D23`)
### AC6: PDF Logo Updated to Square Format ### AC6: Print-Friendly Colors
**Given** PDF templates include the logo
**When** PDFs are generated
**Then**:
- Logo uses square format
- Logo sized appropriately for PDF context
- Alt text/title reads "LIBRA for Rights"
### AC7: Print-Friendly Colors
**Given** PDFs are often printed **Given** PDFs are often printed
**When** colors are updated **When** colors are updated
**Then** they remain legible when printed: **Then** they remain legible when printed:
- Olive Green (`#8AB357`) prints well - Dark Charcoal (`#1B1D1A`) prints as near-black - excellent contrast
- Light Olive (`#A5C87A`) used for accents only (may appear light in grayscale) - Warm Gold (`#A68966`) prints as medium tone - good visibility
- Sufficient contrast for all text - Sufficient contrast for all text
- Consider adding subtle borders for light-colored sections - Consider adding subtle borders for light-colored sections
### AC8: All PDF Exports Tested ### AC7: All PDF Exports Tested
**Given** the admin can export various data types **Given** the admin can export various data types
**When** I test each PDF export **When** I test each PDF export
@ -103,27 +95,38 @@
**Livewire Components (review for inline PDF styles):** **Livewire Components (review for inline PDF styles):**
- `resources/views/livewire/admin/reports/monthly-report.blade.php` - `resources/views/livewire/admin/reports/monthly-report.blade.php`
**Tests:**
- `tests/Feature/Admin/PdfBrandColorsTest.php` (update color assertions)
### Color Mapping for PDFs ### Color Mapping for PDFs
| Element | Old Color | New Color | | Element | New Color | Hex |
|---------|-----------|-----------| |---------|-----------|-----|
| Primary Background | `#4A4A42` | `#8AB357` | | Primary Background | Dark Charcoal | `#1B1D1A` |
| Accent/Highlight | `#C9C4BA` | `#A5C87A` | | Accent/Highlight | Warm Gold | `#A68966` |
| Light Background | `#E8E4DC` | `#E8E4DC` (unchanged) | | Light Accent | Gold Light | `#C4A882` |
| Text | `#1A1A1A` | `#1A1A1A` (unchanged) | | Page Background | Warm Cream | `#F4F1EA` |
| Table Header BG | `#4A4A42` | `#8AB357` | | Text | Forest Green | `#2D322A` |
| Table Header Text | `#E8E4DC` | `#E8E4DC` | | Table Header BG | Dark Charcoal | `#1B1D1A` |
| Borders | `#C9C4BA` | `#A5C87A` | | Table Header Text | White | `#FFFFFF` |
| Borders | Gold Light | `#C4A882` |
### PDF Styling Notes ### PDF Styling Notes
PDF templates use inline CSS. Common patterns to update: PDF templates use inline CSS. Common patterns to update:
```html
<!-- Old -->
<div style="background-color: #4A4A42; color: #E8E4DC;">
<!-- New --> ```html
<div style="background-color: #8AB357; color: #E8E4DC;"> <!-- Header -->
<div style="background-color: #1B1D1A; color: #FFFFFF;">
<!-- Table Header -->
<th style="background-color: #1B1D1A; color: #FFFFFF;">
<!-- Accent Border -->
<div style="border-left: 4px solid #A68966;">
<!-- Text -->
<p style="color: #2D322A;">
``` ```
### Chart Color Palette for Reports ### Chart Color Palette for Reports
@ -131,45 +134,36 @@ PDF templates use inline CSS. Common patterns to update:
```php ```php
// Monthly Report Service chart colors // Monthly Report Service chart colors
$chartColors = [ $chartColors = [
'primary' => '#8AB357', // Olive Green 'primary' => '#A68966', // Warm Gold
'secondary' => '#A5C87A', // Light Olive 'secondary' => '#C4A882', // Gold Light
'tertiary' => '#C5D9A5', // Pale Olive 'tertiary' => '#1B1D1A', // Dark Charcoal
'quaternary' => '#6A9337', // Dark Olive 'quaternary' => '#4A5D23', // Olive Green
'background' => '#E8E4DC', // Off-White 'background' => '#F4F1EA', // Warm Cream
]; ];
``` ```
### Print Considerations ### Print Considerations
- Olive Green (`#8AB357`) prints as medium gray - good contrast - Dark Charcoal (`#1B1D1A`) prints as near-black - excellent readability
- Light Olive (`#A5C87A`) prints as light gray - use for accents only - Warm Gold (`#A68966`) prints as medium brown/tan - good visibility
- Gold Light (`#C4A882`) prints as light tan - use for borders/accents only
- Ensure table borders are visible in grayscale - Ensure table borders are visible in grayscale
- Test print preview in browser - Test print preview in browser
### PDF Logo Implementation
```html
<!-- Square logo for PDF -->
<img src="{{ public_path('images/logo.png') }}" style="height: 50px; width: 50px;" alt="LIBRA for Rights">
```
## Dev Checklist ## Dev Checklist
- [x] Update `users-export.blade.php` colors - [ ] Update `users-export.blade.php` colors
- [x] Update `users-export.blade.php` logo - [ ] Update `consultations-export.blade.php` colors
- [x] Update `consultations-export.blade.php` colors - [ ] Update `timelines-export.blade.php` colors
- [x] Update `consultations-export.blade.php` logo - [ ] Update `monthly-report.blade.php` colors
- [x] Update `timelines-export.blade.php` colors - [ ] Update `MonthlyReportService.php` chart colors
- [x] Update `timelines-export.blade.php` logo - [ ] Review `monthly-report.blade.php` Livewire component
- [x] Update `monthly-report.blade.php` colors - [ ] Update `PdfBrandColorsTest.php` color assertions
- [x] Update `monthly-report.blade.php` logo - [ ] Test Users PDF export
- [x] Update `MonthlyReportService.php` chart colors - [ ] Test Consultations PDF export
- [x] Review `monthly-report.blade.php` Livewire component - [ ] Test Timelines PDF export
- [x] Test Users PDF export - [ ] Test Monthly Report PDF generation
- [x] Test Consultations PDF export - [ ] Verify logo displays correctly in all PDFs
- [x] Test Timelines PDF export
- [x] Test Monthly Report PDF generation
- [x] Verify logo displays correctly in all PDFs
- [ ] Test print preview for readability - [ ] Test print preview for readability
- [ ] Test grayscale printing - [ ] Test grayscale printing
@ -180,7 +174,7 @@ $chartColors = [
## Dependencies ## Dependencies
- Story 12.1 (Logo Deployment) must be completed for logo files - Story 12.1 (Logo Deployment) - Completed
- Story 12.2 (Core CSS) should be completed for color reference consistency - Story 12.2 (Core CSS) should be completed for color reference consistency
--- ---
@ -188,39 +182,27 @@ $chartColors = [
## Dev Agent Record ## Dev Agent Record
### Status ### Status
Ready for Review Not Started - Ready for Implementation
### Agent Model Used ### Agent Model Used
Claude Opus 4.5 (To be filled during implementation)
### File List ### File List
**Modified:** **To be modified:**
- `resources/views/pdf/users-export.blade.php` - Updated colors from charcoal to olive green, added square logo - `resources/views/pdf/users-export.blade.php`
- `resources/views/pdf/consultations-export.blade.php` - Updated colors from charcoal to olive green, added square logo - `resources/views/pdf/consultations-export.blade.php`
- `resources/views/pdf/timelines-export.blade.php` - Updated colors from charcoal to olive green, added square logo - `resources/views/pdf/timelines-export.blade.php`
- `resources/views/pdf/monthly-report.blade.php` - Updated colors from charcoal to olive green, added square logo (header + cover page) - `resources/views/pdf/monthly-report.blade.php`
- `app/Services/MonthlyReportService.php` - Updated chart colors for pie and line charts - `app/Services/MonthlyReportService.php`
- `resources/views/livewire/admin/reports/monthly-report.blade.php` - Updated inline color styles for TOC badges - `resources/views/livewire/admin/reports/monthly-report.blade.php`
- `tests/Feature/Admin/PdfBrandColorsTest.php` - Updated tests to check for new olive green colors instead of old charcoal - `tests/Feature/Admin/PdfBrandColorsTest.php`
### Change Log ### Change Log
| Date | Change | Reason | | Date | Change |
|------|--------|--------| |------|--------|
| 2026-01-04 | Updated all PDF templates with olive green colors | Story 12.5 requirement | | 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
| 2026-01-04 | Added square logo to all PDF headers | Story 12.5 requirement |
| 2026-01-04 | Updated chart colors in MonthlyReportService | Story 12.5 AC5 |
| 2026-01-04 | Updated Livewire component inline colors | Consistency with PDF changes |
| 2026-01-04 | Updated PdfBrandColorsTest to verify new colors | Tests should validate current state |
### Debug Log References
None - Implementation completed without issues
### Completion Notes ### Completion Notes
- All PDF templates updated with olive green palette (`#8AB357` primary, `#A5C87A` accent) (To be filled during implementation)
- Square logo (50x50px) added to all PDF headers using `public_path('images/logo.png')`
- Monthly report cover page uses larger logo (100x100px)
- Chart colors in MonthlyReportService updated for pie and line charts
- All 76 related tests pass (6 PDF color tests + 70 export tests)
- Print preview and grayscale testing should be done manually by QA

281
docs/stories/story-12.6-documentation-update.md
View File

@ -1,193 +1,168 @@
# Story 12.6: Brand Documentation and Cleanup # Story 12.6: Brand Documentation Update - Dark Charcoal & Warm Gold
## Story ## Story
**As a** developer/designer **As a** developer
**I want to** update brand documentation to reflect the new logo and olive green color scheme **I want to** update all brand documentation to reflect the new dark charcoal and warm gold color palette
**So that** future development maintains consistent branding **So that** documentation accurately represents the current brand identity
## Acceptance Criteria ## Acceptance Criteria
### AC1: Brand Guide Updated ### AC1: Update `docs/brand.md`
**Given** `docs/brand.md` contains old color palette and logo description **Given** the brand documentation references old colors
**When** I update the document **When** I update the file
**Then** it reflects the new branding: **Then** the following sections are updated:
- Color palette section with new hex values
- Color usage guidelines
- Any color swatches or examples
**Updated Color Palette:** **New Color Palette:**
| Color | Hex Code | Usage | | Color Name | Hex | Usage |
|-------|----------|-------| |------------|-----|-------|
| Olive Green | `#8AB357` | Primary brand color, backgrounds, accents | | Dark Charcoal | `#1B1D1A` | Header/Footer backgrounds |
| Darker Olive | `#7AA347` | Hover states | | Warm Gold | `#A68966` | CTA buttons, links, accents |
| Dark Olive | `#6A9337` | Active states, headings | | Warm Cream | `#F4F1EA` | Main page background |
| Light Olive | `#A5C87A` | Secondary backgrounds, borders | | Forest Green | `#2D322A` | Headings, body text |
| Pale Olive | `#C5D9A5` | Subtle backgrounds | | Pure White | `#FFFFFF` | Card backgrounds |
| Off-White | `#E8E4DC` | Light backgrounds | | Olive Green | `#4A5D23` | Active states |
| Deep Black | `#1A1A1A` | Text, headings | | Gold Hover | `#8A7555` | Button hover states |
| Gold Light | `#C4A882` | Light accents |
**Updated Logo Description:** ### AC2: Update `CLAUDE.md`
- Square format featuring Palestinian tatreez (embroidery) patterns
- Central botanical/olive motif
- "LIBRA FOR RIGHTS" text integrated into design
- Palestinian flag accent
- Cultural heritage elements
### AC2: Logo Generation Instructions Updated **Given** CLAUDE.md contains design requirements with old colors
**When** I update the file
**Then** the Design Requirements section reflects new palette:
- Update color scheme description
- Update hex values
- Maintain bilingual requirement notes
**Given** `docs/logo-generation-instructions.md` describes horizontal logo generation ### AC3: Update `docs/architecture.md` (if applicable)
**When** I update the document
**Then** it reflects square logo format:
- Update dimensions to square format
- Update file naming conventions
- Remove references to horizontal aspect ratio
- Update tool instructions for square export
### AC3: CLAUDE.md Updated
**Given** `CLAUDE.md` contains color scheme reference
**When** I review and update if needed
**Then** the design requirements section reflects:
- New olive green color palette
- Square logo format
- Palestinian tatreez design elements
### AC4: Architecture Documentation Updated
**Given** architecture docs may reference brand colors **Given** architecture docs may reference brand colors
**When** I review architecture documentation **When** I review the file
**Then** any color references are updated to olive palette **Then** any color references are updated to new palette
### AC5: Old Logo Files Archived/Removed ### AC4: Update `docs/prd.md` (if applicable)
**Given** old SVG logo files exist in the repository **Given** PRD may reference brand colors
**When** documentation is complete **When** I review the file
**Then** old files are handled appropriately: **Then** any color references are updated to new palette
- `public/images/logo.svg` - Remove or archive
- `public/images/logo-reversed.svg` - Remove or archive
- `public/images/logo-mono.svg` - Remove or archive
- `public/favicon.svg` - Remove or archive
**Note:** Keep git history for reference; no need to purge from history ### AC5: Update Test Color Assertions
### AC6: Logo Folder Cleanup **Given** tests may assert specific color values
**Given** logo files were generated in `logo/` folder
**When** deployment is complete
**Then** the `logo/` folder is removed (files moved to `public/`)
### AC7: README Updated (if applicable)
**Given** README may contain branding information
**When** I review README.md
**Then** any visual/branding references are current
### AC8: Test Assertions Updated
**Given** tests may contain color value assertions
**When** I review test files **When** I review test files
**Then** color assertions use new olive palette values: **Then** color assertions are updated:
- `AccessibilityComplianceTest.php` - `tests/Feature/Admin/PdfBrandColorsTest.php`
- Any component tests with color assertions - Any other tests checking brand colors
- Email template tests
- PDF template tests ### AC6: Review and Update Code Comments
**Given** code comments may reference old color names
**When** I review key files
**Then** comments are updated:
- `resources/css/app.css` - CSS comments
- Any inline style comments in Blade files
### AC7: Update Logo Generation Instructions (if exists)
**Given** `docs/logo-generation-instructions.md` may exist
**When** I review the file
**Then** any color references match new palette
## Technical Notes ## Technical Notes
### Files to Update ### Files to Review/Modify
**Documentation:** **Documentation:**
- `docs/brand.md` - Full brand guide update - `docs/brand.md` - Primary brand documentation
- `docs/logo-generation-instructions.md` - Update for square format - `CLAUDE.md` - Project instructions
- `CLAUDE.md` - Update design requirements section - `docs/architecture.md` - Architecture documentation
- `docs/prd.md` - Product requirements
**Tests to Review:** **Tests:**
- `tests/Feature/AccessibilityComplianceTest.php`
- `tests/Feature/Components/` - Any color assertions
- `tests/Feature/Mail/EmailTemplateColorsTest.php`
- `tests/Feature/Admin/PdfBrandColorsTest.php` - `tests/Feature/Admin/PdfBrandColorsTest.php`
- Any other brand color tests
### New Brand Guide Content **Code Comments:**
- `resources/css/app.css`
### Color Reference Quick Sheet
```
Primary Colors:
- Dark Charcoal: #1B1D1A (header/footer bg)
- Warm Gold: #A68966 (CTA, links)
- Warm Cream: #F4F1EA (page background)
- Forest Green: #2D322A (text)
- Pure White: #FFFFFF (cards)
- Olive Green: #4A5D23 (active states)
Variants:
- Gold Hover: #8A7555
- Gold Light: #C4A882
- Olive Hover: #5A7030
- Primary Light: #2D322A
```
### CLAUDE.md Design Requirements Update
Replace the existing color scheme section with:
```markdown ```markdown
## Color Palette - **Color scheme:**
- Dark Charcoal (#1B1D1A) - Header/Footer backgrounds
| Color | Hex Code | Usage | - Warm Gold (#A68966) - CTA buttons, links, accents
|-------|----------|-------| - Warm Cream (#F4F1EA) - Main page background
| Olive Green | `#8AB357` | Primary brand color | - Forest Green (#2D322A) - Headings, body text
| Darker Olive | `#7AA347` | Hover states | - Pure White (#FFFFFF) - Card backgrounds
| Dark Olive | `#6A9337` | Active states | - Olive Green (#4A5D23) - Active states
| Light Olive | `#A5C87A` | Secondary accents |
| Pale Olive | `#C5D9A5` | Subtle backgrounds |
| Off-White | `#E8E4DC` | Light backgrounds |
| Deep Black | `#1A1A1A` | Text, headings |
## Logo
### Description
The logo features a square design incorporating Palestinian tatreez (traditional embroidery)
patterns with a central botanical/olive motif. The design represents:
- **Tatreez Patterns:** Palestinian cultural heritage and identity
- **Olive Branch:** Peace, dignity, and connection to the land
- **"LIBRA FOR RIGHTS":** Organization name and mission
- **Palestinian Flag:** National identity accent
### Logo Style
- Square format
- Traditional embroidery-inspired patterns
- Botanical/organic central element
- Deep black and olive green color scheme
- Cultural authenticity with modern presentation
```
### Files to Remove
```bash
# Old logo files to remove after verification
rm public/images/logo.svg
rm public/images/logo-reversed.svg
rm public/images/logo-mono.svg
rm public/favicon.svg
# Temporary logo folder to remove
rm -rf logo/
```
### Test Color Value Updates
```php
// Old assertions
$this->assertStringContainsString('#4A4A42', $content);
$this->assertStringContainsString('#C9C4BA', $content);
// New assertions
$this->assertStringContainsString('#8AB357', $content);
$this->assertStringContainsString('#A5C87A', $content);
``` ```
## Dev Checklist ## Dev Checklist
- [ ] Update `docs/brand.md` with new color palette - [ ] Update `docs/brand.md` color palette section
- [ ] Update `docs/brand.md` with new logo description - [ ] Update `docs/brand.md` color usage guidelines
- [ ] Update `docs/logo-generation-instructions.md` for square format - [ ] Update `CLAUDE.md` Design Requirements section
- [ ] Review and update `CLAUDE.md` design requirements - [ ] Review `docs/architecture.md` for color references
- [ ] Review architecture documentation for color references - [ ] Review `docs/prd.md` for color references
- [ ] Update `AccessibilityComplianceTest.php` color assertions - [ ] Update `PdfBrandColorsTest.php` assertions
- [ ] Update `EmailTemplateColorsTest.php` color assertions - [ ] Review other test files for color assertions
- [ ] Update `PdfBrandColorsTest.php` color assertions - [ ] Update CSS comments in `app.css`
- [ ] Review and update any other test color assertions - [ ] Review `docs/logo-generation-instructions.md` if exists
- [ ] Remove old SVG logo files from `public/images/` - [ ] Final review of all documentation for consistency
- [ ] Remove old `public/favicon.svg`
- [ ] Remove temporary `logo/` folder
- [ ] Verify all tests pass with new color values
- [ ] Final visual review of documentation
## Estimation ## Estimation
**Complexity:** Low **Complexity:** Low
**Risk:** Low - Documentation and cleanup tasks **Risk:** Low - Documentation only, no code changes
## Dependencies ## Dependencies
- All other Epic 12 stories should be completed before final cleanup - Stories 12.2, 12.3, 12.4, 12.5 must be completed first
- This story should be completed last in the epic - New colors must be implemented and verified before documenting
---
## Dev Agent Record
### Status
Not Started - Blocked (waiting for Stories 12.2-12.5 completion)
### Agent Model Used
(To be filled during implementation)
### File List
(To be filled during implementation)
### Change Log
| Date | Change |
|------|--------|
| 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette |
### Completion Notes
(To be filled during implementation)