updates storys 12.2-12.6 for reimplimintation
This commit is contained in:
Naser Mansour
parent
61068e7eee
commit
b2ff6df18e
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
## 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
|
||||
|
||||
### 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
|
||||
- **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:**
|
||||
|
||||
1. Replace horizontal SVG logo with new square logo featuring Palestinian tatreez (embroidery) patterns
|
||||
2. Update color palette from charcoal/warm gray to olive green theme
|
||||
3. Adjust CSS/layouts to accommodate square logo dimensions
|
||||
4. Update all brand assets (favicon, mobile icons, email logo)
|
||||
1. Update color palette to dark charcoal and warm gold theme
|
||||
2. Adjust CSS for new color scheme
|
||||
3. Update all brand assets colors (emails, PDFs)
|
||||
|
||||
**New Color Palette:**
|
||||
|
||||
| Color | Old Hex | New Hex | Usage |
|
||||
|-------|---------|---------|-------|
|
||||
| Primary | #4A4A42 (Charcoal) | #8AB357 (Olive Green) | Primary backgrounds, accents |
|
||||
| Secondary | #C9C4BA (Warm Gray) | #A5C87A (Light Olive) | Secondary backgrounds, borders |
|
||||
| Background | #E8E4DC (Off-White) | #E8E4DC (Off-White) | Light backgrounds (unchanged) |
|
||||
| Text | #1A1A1A (Deep Black) | #1A1A1A (Deep Black) | Text, headings (unchanged) |
|
||||
| Color Name | Hex | Usage |
|
||||
|------------|-----|-------|
|
||||
| Primary (Dark Charcoal) | `#1B1D1A` | Header/Footer backgrounds |
|
||||
| CTA (Warm Gold) | `#A68966` | Buttons, links, accents |
|
||||
| Background (Warm Cream) | `#F4F1EA` | Main page background |
|
||||
| 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:**
|
||||
|
||||
- Logo files will be placed in `public/images/` replacing existing SVG files
|
||||
- Tailwind CSS color configuration will be updated
|
||||
- Existing Blade components will automatically use new colors via CSS variables
|
||||
|
||||
**Success criteria:**
|
||||
|
||||
- New square logo displays correctly in navbar and footer
|
||||
- Color scheme consistently uses olive green palette across all pages
|
||||
- All favicon and mobile app icons updated
|
||||
- Color scheme consistently uses new palette across all pages
|
||||
- Professional, elegant appearance maintained
|
||||
- No visual regressions in existing UI components
|
||||
|
||||
## Stories
|
||||
|
||||
### Story 12.1: Logo Asset Deployment and CSS Layout Updates
|
||||
**File:** `story-12.1-logo-asset-deployment.md`
|
||||
**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.
|
||||
|
||||
### 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`
|
||||
**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
|
||||
**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`
|
||||
**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`
|
||||
**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`
|
||||
**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
|
||||
|
||||
|
|
@ -99,37 +113,39 @@ Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.
|
|||
|
||||
## Technical Notes
|
||||
|
||||
### Logo Files Generated
|
||||
|
||||
Located in `logo/` folder, ready for deployment:
|
||||
|
||||
| File | Dimensions | Target Location |
|
||||
|------|------------|-----------------|
|
||||
| `favicon.ico` | 16/32/48px | `public/favicon.ico` |
|
||||
| `favicon-16x16.png` | 16×16 | `public/favicon-16x16.png` |
|
||||
| `favicon-32x32.png` | 32×32 | `public/favicon-32x32.png` |
|
||||
| `apple-touch-icon.png` | 180×180 | `public/apple-touch-icon.png` |
|
||||
| `android-chrome-192x192.png` | 192×192 | `public/android-chrome-192x192.png` |
|
||||
| `android-chrome-512x512.png` | 512×512 | `public/android-chrome-512x512.png` |
|
||||
| `logo-square.png` | 623×628 | `public/images/logo.png` |
|
||||
| `logo-email.png` | 200×200 | `public/images/logo-email.png` |
|
||||
|
||||
### Color Values for Implementation
|
||||
|
||||
```css
|
||||
/* New Olive Green Palette */
|
||||
--color-primary: #8AB357; /* Olive Green - replaces Charcoal */
|
||||
--color-secondary: #A5C87A; /* Light Olive - replaces Warm Gray */
|
||||
--color-background: #E8E4DC; /* Off-White - unchanged */
|
||||
--color-text: #1A1A1A; /* Deep Black - unchanged */
|
||||
/* New Dark Charcoal & Warm Gold Palette */
|
||||
--color-primary: #1B1D1A; /* Dark Charcoal - Header/Footer backgrounds */
|
||||
--color-cta: #A68966; /* Warm Gold - Buttons, links, accents */
|
||||
--color-background: #F4F1EA; /* Warm Cream - Main page background */
|
||||
--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-primary-hover: #7AA347; /* Darker olive for hover states */
|
||||
--color-primary-dark: #6A9337; /* Dark olive for active/pressed */
|
||||
--color-primary-light: #B5D88A; /* Light olive for highlights */
|
||||
/* Color variants for UI states */
|
||||
--color-primary-light: #2D322A; /* Primary hover state */
|
||||
--color-cta-hover: #8A7555; /* Button hover state */
|
||||
--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
|
||||
|
||||
- Logo files already generated in `logo/` folder
|
||||
- Logo files already deployed
|
||||
- No external dependencies required
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
**As a** developer
|
||||
**I want to** update the Tailwind CSS theme to use the new olive green color palette
|
||||
**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo
|
||||
**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 refined LIBRA for Rights brand colors
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### 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
|
||||
**Then** the following color mappings are applied:
|
||||
|
||||
| Old Variable | Old Hex | New Variable | New Hex |
|
||||
|--------------|---------|--------------|---------|
|
||||
| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) |
|
||||
| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) |
|
||||
| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) |
|
||||
| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged |
|
||||
| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged |
|
||||
| Variable | New Hex | Usage |
|
||||
|----------|---------|-------|
|
||||
| `--color-primary` | `#1B1D1A` | Header/Footer backgrounds |
|
||||
| `--color-cta` | `#A68966` | CTA buttons, links, accents |
|
||||
| `--color-background` | `#F4F1EA` | Main page background |
|
||||
| `--color-text` | `#2D322A` | Headings, body text |
|
||||
| `--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
|
||||
**When** I update the theme
|
||||
|
|
@ -30,63 +31,38 @@
|
|||
|
||||
| Variable | Hex | Usage |
|
||||
|----------|-----|-------|
|
||||
| `--color-primary` | `#8AB357` | Primary olive green |
|
||||
| `--color-primary-hover` | `#7AA347` | Darker olive for hover |
|
||||
| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed |
|
||||
| `--color-primary-light` | `#B5D88A` | Light olive for highlights |
|
||||
| `--color-accent` | `#A5C87A` | Secondary light olive |
|
||||
| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
|
||||
| `--color-primary-light` | `#2D322A` | Primary hover state |
|
||||
| `--color-cta-hover` | `#8A7555` | Button hover state |
|
||||
| `--color-cta-light` | `#C4A882` | Light CTA accent |
|
||||
| `--color-active-hover` | `#5A7030` | Active state hover |
|
||||
|
||||
### AC2.1: Logo Badge Styling
|
||||
### AC3: Update Button Styles
|
||||
|
||||
**Given** the logo has a beige background that contrasts with olive green headers/footers
|
||||
**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
|
||||
**Given** button classes use the primary/accent colors
|
||||
**When** theme is updated
|
||||
**Then** `.btn-primary` and `.btn-secondary` use new olive palette:
|
||||
- Primary: Olive Green background (`#8AB357`), Off-White text
|
||||
- Primary Hover: Darker Olive (`#7AA347`)
|
||||
- Secondary: Light Olive border, Deep Black text
|
||||
**Then** `.btn-primary` and `.btn-secondary` use new palette:
|
||||
- Primary: Warm Gold background (`#A68966`), White text
|
||||
- Primary Hover: Darker Gold (`#8A7555`)
|
||||
- Secondary: Dark Charcoal border, Dark text
|
||||
- Hover states updated accordingly
|
||||
|
||||
### AC5: Update Form Focus States
|
||||
### AC4: Update Form Focus States
|
||||
|
||||
**Given** form inputs have focus rings
|
||||
**When** theme is updated
|
||||
**Then** focus states use Olive Green:
|
||||
- `focus:border-accent` → Light Olive border
|
||||
- `focus:ring-accent` → Light Olive ring
|
||||
- `focus:ring-primary` → Olive Green ring
|
||||
**Then** focus states use Warm Gold:
|
||||
- `focus:border-cta` → Warm Gold border
|
||||
- `focus:ring-cta` → Warm Gold ring
|
||||
|
||||
### AC6: Update Link Colors
|
||||
### AC5: Update Link Colors
|
||||
|
||||
**Given** links use accent colors
|
||||
**When** theme is updated
|
||||
**Then** link colors use olive palette:
|
||||
- Default: Olive Green (`#8AB357`)
|
||||
- Hover: Darker Olive (`#7AA347`)
|
||||
- Visited: Primary Olive (unchanged)
|
||||
**Then** link colors use warm gold:
|
||||
- Default: Warm Gold (`#A68966`)
|
||||
- Hover: Darker Gold (`#8A7555`)
|
||||
|
||||
### AC7: Status Colors Unchanged
|
||||
### AC6: Status Colors Unchanged
|
||||
|
||||
**Given** status colors serve functional purposes
|
||||
**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-warning: #F39C12`
|
||||
|
||||
### AC8: WCAG AA Contrast Compliance
|
||||
### AC7: WCAG AA Contrast Compliance
|
||||
|
||||
**Given** accessibility requirements
|
||||
**When** new colors are applied
|
||||
**Then** all text/background combinations meet WCAG AA:
|
||||
- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text
|
||||
- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text
|
||||
- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio
|
||||
- Text (`#2D322A`) on Warm Cream (`#F4F1EA`): ≥4.5:1 for body text
|
||||
- White text on Dark Charcoal (`#1B1D1A`): ≥4.5:1 for body text
|
||||
- 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
|
||||
**When** theme is updated
|
||||
**Then** prose colors use olive palette:
|
||||
- Headings: Deep Black
|
||||
- Links: Olive Green
|
||||
- Body: Deep Black
|
||||
**Then** prose colors use new palette:
|
||||
- Headings: Forest Green (`#2D322A`)
|
||||
- Links: Warm Gold (`#A68966`)
|
||||
- Body: Forest Green (`#2D322A`)
|
||||
|
||||
### AC10: Build Succeeds
|
||||
### AC9: Build Succeeds
|
||||
|
||||
**Given** CSS changes are made
|
||||
**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
|
||||
|
||||
| Color | Hex | RGB | Usage |
|
||||
|-------|-----|-----|-------|
|
||||
| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color |
|
||||
| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states |
|
||||
| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states |
|
||||
| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent |
|
||||
| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds |
|
||||
| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights |
|
||||
| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) |
|
||||
| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) |
|
||||
| Color Name | Hex | RGB | Usage |
|
||||
|------------|-----|-----|-------|
|
||||
| Dark Charcoal | `#1B1D1A` | rgb(27, 29, 26) | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | rgb(166, 137, 102) | CTA buttons, links |
|
||||
| Warm Cream | `#F4F1EA` | rgb(244, 241, 234) | Main page background |
|
||||
| Forest Green | `#2D322A` | rgb(45, 50, 42) | Text color |
|
||||
| Pure White | `#FFFFFF` | rgb(255, 255, 255) | Card backgrounds |
|
||||
| Olive Green | `#4A5D23` | rgb(74, 93, 35) | Active states |
|
||||
| Gold Hover | `#8A7555` | rgb(138, 117, 85) | Button hover |
|
||||
| Gold Light | `#C4A882` | rgb(196, 168, 130) | Light accents |
|
||||
| Olive Hover | `#5A7030` | rgb(90, 112, 48) | Active hover |
|
||||
|
||||
### Contrast Verification
|
||||
|
||||
Use WebAIM Contrast Checker to verify:
|
||||
- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA)
|
||||
- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes)
|
||||
- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA)
|
||||
- Forest Green (#2D322A) on Warm Cream (#F4F1EA): ~10:1 (passes AAA)
|
||||
- White (#FFFFFF) on Dark Charcoal (#1B1D1A): ~17: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.
|
||||
|
||||
### 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);
|
||||
}
|
||||
```
|
||||
**Note:** For small text on Warm Gold buttons, use white text as it provides sufficient contrast for button contexts.
|
||||
|
||||
### CSS Theme Block Example
|
||||
|
||||
```css
|
||||
@theme {
|
||||
/* Primary Olive Green Palette */
|
||||
--color-primary: #8AB357;
|
||||
--color-primary-hover: #7AA347;
|
||||
--color-primary-dark: #6A9337;
|
||||
--color-primary-light: #B5D88A;
|
||||
/* Primary Dark Charcoal Palette */
|
||||
--color-primary: #1B1D1A;
|
||||
--color-primary-light: #2D322A;
|
||||
|
||||
/* Secondary/Accent */
|
||||
--color-accent: #A5C87A;
|
||||
--color-accent-light: #C5D9A5;
|
||||
--color-accent-content: #A5C87A;
|
||||
--color-accent-foreground: #1A1A1A;
|
||||
/* CTA Warm Gold */
|
||||
--color-cta: #A68966;
|
||||
--color-cta-hover: #8A7555;
|
||||
--color-cta-light: #C4A882;
|
||||
|
||||
/* Neutrals (unchanged) */
|
||||
--color-background: #E8E4DC;
|
||||
--color-text: #1A1A1A;
|
||||
/* Active Olive Green */
|
||||
--color-active: #4A5D23;
|
||||
--color-active-hover: #5A7030;
|
||||
|
||||
/* Backward compatibility */
|
||||
--color-charcoal: var(--color-primary);
|
||||
--color-warm-gray: var(--color-accent);
|
||||
--color-off-white: var(--color-background);
|
||||
/* Neutrals */
|
||||
--color-background: #F4F1EA;
|
||||
--color-text: #2D322A;
|
||||
--color-card: #FFFFFF;
|
||||
|
||||
/* For text on dark backgrounds */
|
||||
--color-off-white: #F4F1EA;
|
||||
|
||||
/* Status colors (unchanged) */
|
||||
--color-success: #27AE60;
|
||||
|
|
@ -190,66 +157,47 @@ Use WebAIM Contrast Checker to verify:
|
|||
|
||||
## Dev Checklist
|
||||
|
||||
- [x] Update `@theme` block with new olive green values
|
||||
- [x] Add olive green variants (hover, dark, light)
|
||||
- [x] Add `.logo-badge` class with border and shadow
|
||||
- [x] Update backward-compatible aliases
|
||||
- [x] Update `.btn-primary` styles
|
||||
- [x] Update `.btn-secondary` styles
|
||||
- [x] Update form focus states
|
||||
- [x] Update link colors
|
||||
- [x] Update `.prose-brand` class
|
||||
- [x] Update skip-link focus styles
|
||||
- [x] Update timeline-dot color
|
||||
- [x] Update skeleton loader color
|
||||
- [x] Verify status colors unchanged
|
||||
- [ ] Update `@theme` block with new color values
|
||||
- [ ] Add color variants (hover, light)
|
||||
- [ ] Update `.btn-primary` styles to use CTA colors
|
||||
- [ ] Update `.btn-secondary` styles
|
||||
- [ ] Update form focus states
|
||||
- [ ] Update link colors
|
||||
- [ ] Update `.prose-brand` class
|
||||
- [ ] Update skip-link focus styles
|
||||
- [ ] Verify status colors unchanged
|
||||
- [ ] Run contrast checker on all combinations
|
||||
- [x] Run `npm run build` successfully
|
||||
- [ ] Run `npm run build` successfully
|
||||
- [ ] Visual test in browser
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low-Medium
|
||||
**Risk:** Low - CSS-only changes with aliases for backward compatibility
|
||||
**Risk:** Low - CSS-only changes
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Can run in parallel with Story 12.1 (Logo Deployment)
|
||||
- Story 12.1 (Logo Deployment) - Completed
|
||||
|
||||
---
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5
|
||||
(To be filled during implementation)
|
||||
|
||||
### Status
|
||||
In Progress - Pending Visual Test & Contrast Check
|
||||
Not Started - Ready for Implementation
|
||||
|
||||
### File List
|
||||
| File | Action |
|
||||
|------|--------|
|
||||
| `resources/css/app.css` | Modified |
|
||||
| `resources/css/app.css` | To be modified |
|
||||
|
||||
### Change Log
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Updated @theme block with olive green palette (AC1, AC2) |
|
||||
| 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 |
|
||||
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
|
||||
|
||||
### Completion Notes
|
||||
- All CSS changes implemented in `resources/css/app.css`
|
||||
- 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
|
||||
(To be filled during implementation)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
**As a** developer
|
||||
**I want to** update all Blade components and pages to use the new olive green palette
|
||||
**So that** the entire application has consistent branding with the new botanical logo
|
||||
**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
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### 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
|
||||
**Then** the following changes are applied:
|
||||
- Background: Charcoal → Olive Green (`bg-charcoal` → `bg-primary`)
|
||||
- Text/Links: Off-White for contrast on olive background
|
||||
- Hover states: Use darker olive (`hover:bg-primary-hover`)
|
||||
- Mobile menu uses new olive colors
|
||||
- Active states updated accordingly
|
||||
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
|
||||
- Background: Dark Charcoal (`#1B1D1A` / `bg-primary`)
|
||||
- Text/Links: Warm Cream (`#F4F1EA` / `text-off-white`) for contrast
|
||||
- Hover states: Use `hover:bg-primary-light`
|
||||
- Mobile menu uses new colors
|
||||
- Active states use Olive Green (`#4A5D23`)
|
||||
|
||||
### 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
|
||||
**Then** the following changes are applied:
|
||||
- Background: Charcoal → Olive Green
|
||||
- Text: Off-White for contrast
|
||||
- Links: Light Olive with hover states
|
||||
- Background: Dark Charcoal (`#1B1D1A`)
|
||||
- Text: Warm Cream for contrast
|
||||
- Links: Warm Gold (`#A68966`) with hover states
|
||||
- Social icons: Appropriate contrast colors
|
||||
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
|
||||
|
||||
### 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`
|
||||
**Then** the following changes are applied:
|
||||
- Background: Off-White (unchanged)
|
||||
- Borders/accents: Light Olive (`border-accent`)
|
||||
- Text: Deep Black (unchanged)
|
||||
- Hover states: Subtle olive highlight
|
||||
- Background: Pure White (`#FFFFFF` / `bg-card`)
|
||||
- Borders/accents: Gold Light (`#C4A882`)
|
||||
- Text: Forest Green (`#2D322A`)
|
||||
- Hover states: Subtle highlight
|
||||
|
||||
### 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
|
||||
**Then** accent colors use olive palette:
|
||||
- Icon backgrounds: Light Olive
|
||||
- Value highlights: Olive Green
|
||||
- Borders: Light Olive
|
||||
**Then** accent colors use new palette:
|
||||
- Icon backgrounds: Gold Light (`#C4A882`)
|
||||
- Value highlights: Warm Gold (`#A68966`)
|
||||
- Borders: Gold Light
|
||||
|
||||
### 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
|
||||
**Then** spinner uses Olive Green
|
||||
**Then** spinner uses Warm Gold (`#A68966`)
|
||||
|
||||
### 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
|
||||
**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
|
||||
|
||||
**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
|
||||
**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
|
||||
|
||||
**Given** public pages use old accent colors
|
||||
**Given** public pages use accent colors
|
||||
**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/booking.blade.php`
|
||||
- `resources/views/pages/terms.blade.php`
|
||||
- `resources/views/pages/privacy.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
|
||||
|
||||
**Given** post display pages use old colors
|
||||
**Given** post display pages use colors
|
||||
**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/show.blade.php`
|
||||
|
||||
|
|
@ -91,29 +98,30 @@
|
|||
|
||||
**Given** admin dashboard uses accent colors
|
||||
**When** I update admin components
|
||||
**Then** they use olive palette:
|
||||
- Sidebar/navigation accents
|
||||
- Card highlights
|
||||
- Button accents
|
||||
- Table header accents
|
||||
**Then** they use new palette:
|
||||
- Sidebar/navigation accents: Warm Gold
|
||||
- Card highlights: Gold Light
|
||||
- Button accents: Warm Gold
|
||||
- Table header accents: Dark Charcoal background
|
||||
|
||||
### AC11: Client Dashboard Components Updated
|
||||
|
||||
**Given** client dashboard uses accent colors
|
||||
**When** I update client components
|
||||
**Then** they use olive palette consistently
|
||||
**Then** they use new palette consistently
|
||||
|
||||
### 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
|
||||
**Then** it uses the new olive palette
|
||||
**Then** it uses the new palette:
|
||||
- Body background: Warm Cream (`#F4F1EA`)
|
||||
|
||||
### AC13: RTL Layout Integrity
|
||||
|
||||
**Given** the application supports RTL (Arabic)
|
||||
**When** colors are updated
|
||||
**Then** RTL layout displays correctly with new olive colors
|
||||
**Then** RTL layout displays correctly with new colors
|
||||
|
||||
### AC14: Responsive Appearance
|
||||
|
||||
|
|
@ -128,7 +136,6 @@
|
|||
**Components:**
|
||||
- `resources/views/components/navigation.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/spinner.blade.php`
|
||||
- `resources/views/components/toast.blade.php`
|
||||
|
|
@ -155,60 +162,72 @@
|
|||
|
||||
### Color Class Mapping
|
||||
|
||||
| Old Class | New Class |
|
||||
|-----------|-----------|
|
||||
| `bg-charcoal` | `bg-primary` (Olive Green) |
|
||||
| `text-charcoal` | `text-primary` |
|
||||
| `border-charcoal` | `border-primary` |
|
||||
| `bg-warm-gray` | `bg-accent` (Light Olive) |
|
||||
| `text-warm-gray` | `text-accent` |
|
||||
| `border-warm-gray` | `border-accent` |
|
||||
| `hover:bg-charcoal` | `hover:bg-primary-hover` |
|
||||
| `hover:text-charcoal` | `hover:text-primary-hover` |
|
||||
| Old Class | New Class | Color |
|
||||
|-----------|-----------|-------|
|
||||
| `bg-primary` (olive) | `bg-primary` | Dark Charcoal `#1B1D1A` |
|
||||
| `bg-accent` | `bg-cta` or `bg-cta-light` | Warm Gold / Gold Light |
|
||||
| `text-primary` | `text-cta` | Warm Gold for links |
|
||||
| `text-text` | `text-text` | Forest Green `#2D322A` |
|
||||
| `bg-background` | `bg-background` | Warm Cream `#F4F1EA` |
|
||||
| `bg-white` | `bg-card` | Pure White `#FFFFFF` |
|
||||
| `hover:bg-primary-hover` | `hover:bg-primary-light` | `#2D322A` |
|
||||
|
||||
### Visual Hierarchy with Olive Green
|
||||
### Visual Hierarchy with New Palette
|
||||
|
||||
**Primary Actions:**
|
||||
- Background: Olive Green (`#8AB357`)
|
||||
- Text: Off-White (`#E8E4DC`) or Deep Black depending on contrast
|
||||
**Header/Footer:**
|
||||
- Background: Dark Charcoal (`#1B1D1A`)
|
||||
- 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:**
|
||||
- Border: Light Olive (`#A5C87A`)
|
||||
- Text: Olive Green or Deep Black
|
||||
- Border: Dark Charcoal or Warm Gold
|
||||
- Text: Forest Green or Warm Gold
|
||||
|
||||
**Highlights/Accents:**
|
||||
- Background: Light Olive (`#A5C87A`) or Pale Olive (`#C5D9A5`)
|
||||
- Text: Deep Black for contrast
|
||||
**Active States (Language Toggle):**
|
||||
- Background: Olive Green (`#4A5D23`)
|
||||
- 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
|
||||
|
||||
- [x] Update `navigation.blade.php`
|
||||
- [x] Update `footer.blade.php`
|
||||
- [x] Apply `.logo-badge` class to logo in navigation
|
||||
- [x] Apply `.logo-badge` class to logo in footer
|
||||
- [x] Update `language-toggle.blade.php`
|
||||
- [x] Update `spinner.blade.php`
|
||||
- [x] Update `toast.blade.php`
|
||||
- [x] Update `card.blade.php`
|
||||
- [x] Update `stat-card.blade.php`
|
||||
- [x] Update `public.blade.php` layout
|
||||
- [x] Update `home.blade.php`
|
||||
- [x] Update `booking.blade.php`
|
||||
- [x] Update `terms.blade.php`
|
||||
- [x] Update `privacy.blade.php`
|
||||
- [x] Update `legal.blade.php`
|
||||
- [x] Update `posts/index.blade.php`
|
||||
- [x] Update `posts/show.blade.php`
|
||||
- [x] Review and update admin dashboard components
|
||||
- [x] Review and update client dashboard components
|
||||
- [x] Test RTL layout (Arabic)
|
||||
- [x] Test responsive breakpoints
|
||||
- [x] Visual review all updated pages
|
||||
- [ ] Update `navigation.blade.php` - Dark Charcoal bg, Warm Cream text
|
||||
- [ ] Update `footer.blade.php` - Dark Charcoal bg, Warm Cream text
|
||||
- [ ] Update `language-toggle.blade.php` - Olive Green active state
|
||||
- [ ] Update `spinner.blade.php` - Warm Gold color
|
||||
- [ ] Update `toast.blade.php` - Warm Gold for info
|
||||
- [ ] Update `card.blade.php` - White bg, Gold Light accents
|
||||
- [ ] Update `stat-card.blade.php` - Gold accents
|
||||
- [ ] Update `public.blade.php` layout - Warm Cream body bg
|
||||
- [ ] Update `home.blade.php` - New palette
|
||||
- [ ] Update `booking.blade.php` - New palette
|
||||
- [ ] Update `terms.blade.php` - New palette
|
||||
- [ ] Update `privacy.blade.php` - New palette
|
||||
- [ ] Update `legal.blade.php` - New palette
|
||||
- [ ] Update `posts/index.blade.php` - New palette
|
||||
- [ ] Update `posts/show.blade.php` - New palette
|
||||
- [ ] Review and update admin dashboard components
|
||||
- [ ] Review and update client dashboard components
|
||||
- [ ] Test RTL layout (Arabic)
|
||||
- [ ] Test responsive breakpoints
|
||||
- [ ] Visual review all updated pages
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Medium
|
||||
**Risk:** Low - Mostly class name updates with CSS variables doing the heavy lifting
|
||||
**Risk:** Low - Mostly class name updates with CSS variables
|
||||
|
||||
## Dependencies
|
||||
|
||||
|
|
@ -218,46 +237,19 @@
|
|||
|
||||
## Dev Agent Record
|
||||
|
||||
### Status: Ready for Review
|
||||
### Status
|
||||
Not Started - Ready for Implementation
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5
|
||||
(To be filled during implementation)
|
||||
|
||||
### File List
|
||||
|
||||
**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).
|
||||
(To be filled during implementation)
|
||||
|
||||
### Change Log
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
|
||||
|
||||
| Date | Change | Author |
|
||||
|------|--------|--------|
|
||||
| 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 |
|
||||
### Completion Notes
|
||||
(To be filled during implementation)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
**As a** developer
|
||||
**I want to** update email templates to use the new olive green colors and square logo
|
||||
**So that** all email communications reflect the new LIBRA for Rights branding
|
||||
**I want to** update email templates to use the new dark charcoal and warm gold colors
|
||||
**So that** all email communications reflect the refined LIBRA for Rights branding
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Email Theme CSS Updated
|
||||
|
||||
**Given** `resources/views/vendor/mail/html/themes/default.css` uses charcoal/warm gray colors
|
||||
**Given** `resources/views/vendor/mail/html/themes/default.css` uses current colors
|
||||
**When** I update the stylesheet
|
||||
**Then** the following changes are applied:
|
||||
|
||||
| Element | Old Color | New Color |
|
||||
|---------|-----------|-----------|
|
||||
| Links (`a`) | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
|
||||
| Headings (h1, h2, h3) | `#4A4A42` (Charcoal) | `#6A9337` (Dark Olive) |
|
||||
| Header background | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
|
||||
| Footer links | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |
|
||||
| Primary button | `#4A4A42` bg, `#E8E4DC` text | `#8AB357` bg, `#E8E4DC` text |
|
||||
| Table headers | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
|
||||
| Panel border | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |
|
||||
| Element | New Color | Hex |
|
||||
|---------|-----------|-----|
|
||||
| Links (`a`) | Warm Gold | `#A68966` |
|
||||
| Headings (h1, h2, h3) | Forest Green | `#2D322A` |
|
||||
| Header background | Dark Charcoal | `#1B1D1A` |
|
||||
| Footer links | Warm Gold | `#A68966` |
|
||||
| Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` |
|
||||
| Table headers | Dark Charcoal bg, White text | `#1B1D1A` |
|
||||
| Panel border | Gold Light | `#C4A882` |
|
||||
| Body text | Forest Green | `#2D322A` |
|
||||
| Body background | Warm Cream | `#F4F1EA` |
|
||||
|
||||
### AC2: Email Header Component Updated
|
||||
|
||||
**Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles
|
||||
**When** I update the component
|
||||
**Then**:
|
||||
- Background color updated to Olive Green (`#8AB357`)
|
||||
- Logo reference updated to new square logo (`logo-email.png`)
|
||||
- Logo sizing adjusted for square format
|
||||
- Background color updated to Dark Charcoal (`#1B1D1A`)
|
||||
- Text color: White or Warm Cream
|
||||
- Logo sizing maintained for square format
|
||||
|
||||
### AC3: Email Footer Component Updated
|
||||
|
||||
**Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles
|
||||
**When** I update the component
|
||||
**Then** any inline color references use olive palette
|
||||
**Then** any inline color references use new palette:
|
||||
- Text: Forest Green (`#2D322A`)
|
||||
- Links: Warm Gold (`#A68966`)
|
||||
|
||||
### AC4: Button Component Updated
|
||||
|
||||
**Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles
|
||||
**When** I update the component
|
||||
**Then** primary buttons use:
|
||||
- Background: Olive Green (`#8AB357`)
|
||||
- Text: Off-White (`#E8E4DC`)
|
||||
- Hover hint: Darker Olive (`#7AA347`)
|
||||
- Background: Warm Gold (`#A68966`)
|
||||
- Text: White (`#FFFFFF`)
|
||||
- Hover hint: Gold Hover (`#8A7555`)
|
||||
|
||||
### AC5: Panel Component Updated
|
||||
|
||||
**Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles
|
||||
**When** I update the component
|
||||
**Then** panel border uses Light Olive (`#A5C87A`)
|
||||
**Then** panel border uses Gold Light (`#C4A882`)
|
||||
|
||||
### AC6: Email Logo Updated to Square Format
|
||||
|
||||
**Given** email header displays the logo
|
||||
**When** emails are sent
|
||||
**Then**:
|
||||
- Logo uses `logo-email.png` (square format, 60px height)
|
||||
- Logo is centered or left-aligned appropriately
|
||||
- Alt text reads "LIBRA for Rights"
|
||||
|
||||
### AC7: All Email Templates Tested
|
||||
### AC6: All Email Templates Tested
|
||||
|
||||
**Given** the application sends various email types
|
||||
**When** I test each email template
|
||||
**Then** colors and logo display correctly:
|
||||
**Then** colors display correctly:
|
||||
- Welcome email
|
||||
- Booking submitted confirmation
|
||||
- Booking approved/rejected
|
||||
|
|
@ -77,13 +72,13 @@
|
|||
- Guest booking notifications
|
||||
- Admin notifications
|
||||
|
||||
### AC8: Plain Text Fallback Unaffected
|
||||
### AC7: Plain Text Fallback Unaffected
|
||||
|
||||
**Given** plain text email templates exist
|
||||
**When** colors are updated
|
||||
**Then** plain text templates continue to work (no color changes needed)
|
||||
|
||||
### AC9: Email Client Compatibility
|
||||
### AC8: Email Client Compatibility
|
||||
|
||||
**Given** emails are viewed in various clients
|
||||
**When** I test the templates
|
||||
|
|
@ -110,21 +105,14 @@
|
|||
### Color Mapping for Email CSS
|
||||
|
||||
```css
|
||||
/* Old → New */
|
||||
#4A4A42 → #8AB357 /* Charcoal → Olive Green */
|
||||
#C9C4BA → #A5C87A /* Warm Gray → Light Olive */
|
||||
#6A9337 /* Dark Olive - for headings */
|
||||
#7AA347 /* Darker Olive - for hover hints */
|
||||
```
|
||||
|
||||
### Email Logo Implementation
|
||||
|
||||
```html
|
||||
<!-- 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;">
|
||||
/* New Color Values */
|
||||
#1B1D1A /* Dark Charcoal - Header background, table headers */
|
||||
#A68966 /* Warm Gold - Links, buttons, accents */
|
||||
#8A7555 /* Gold Hover - Button hover state */
|
||||
#C4A882 /* Gold Light - Panel borders, subtle accents */
|
||||
#2D322A /* Forest Green - Text, headings */
|
||||
#F4F1EA /* Warm Cream - Body background */
|
||||
#FFFFFF /* White - Button text, header text */
|
||||
```
|
||||
|
||||
### Email-Safe Colors
|
||||
|
|
@ -135,28 +123,62 @@ Email clients have limited CSS support. Ensure:
|
|||
- Maintain fallback background colors
|
||||
- Use web-safe colors where possible
|
||||
|
||||
### Testing Emails
|
||||
### CSS Updates Example
|
||||
|
||||
Use Laravel's mail preview or Mailtrap to test:
|
||||
```bash
|
||||
# Preview emails in browser (if configured)
|
||||
php artisan serve
|
||||
# Visit mail preview routes
|
||||
```css
|
||||
/* Header */
|
||||
.header {
|
||||
background-color: #1B1D1A;
|
||||
}
|
||||
|
||||
/* 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
|
||||
|
||||
- [x] Update `default.css` header background color
|
||||
- [x] Update `default.css` link colors
|
||||
- [x] Update `default.css` heading colors
|
||||
- [x] Update `default.css` button colors (`.button-primary`)
|
||||
- [x] Update `default.css` table header colors
|
||||
- [x] Update `default.css` panel border color
|
||||
- [x] Update `default.css` footer link colors
|
||||
- [x] Update `header.blade.php` - inline styles and logo reference
|
||||
- [x] Update `footer.blade.php` - inline styles
|
||||
- [x] Review `button.blade.php` for inline styles
|
||||
- [x] Review `panel.blade.php` for inline styles
|
||||
- [ ] Update `default.css` header background color to `#1B1D1A`
|
||||
- [ ] Update `default.css` link colors to `#A68966`
|
||||
- [ ] Update `default.css` heading colors to `#2D322A`
|
||||
- [ ] Update `default.css` button colors (`.button-primary`) to `#A68966`
|
||||
- [ ] Update `default.css` table header colors to `#1B1D1A`
|
||||
- [ ] Update `default.css` panel border color to `#C4A882`
|
||||
- [ ] Update `default.css` footer link colors to `#A68966`
|
||||
- [ ] Update `default.css` body background to `#F4F1EA`
|
||||
- [ ] Update `header.blade.php` - inline styles
|
||||
- [ ] Update `footer.blade.php` - inline styles
|
||||
- [ ] Review `button.blade.php` for inline styles
|
||||
- [ ] Review `panel.blade.php` for inline styles
|
||||
- [ ] Test Welcome email appearance (manual)
|
||||
- [ ] Test Booking emails appearance (manual)
|
||||
- [ ] Test Reminder emails appearance (manual)
|
||||
|
|
@ -175,7 +197,7 @@ php artisan serve
|
|||
|
||||
## 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
|
||||
|
||||
---
|
||||
|
|
@ -183,57 +205,24 @@ php artisan serve
|
|||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Ready for Review
|
||||
Not Started - Ready for Implementation
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5
|
||||
(To be filled during implementation)
|
||||
|
||||
### File List
|
||||
|
||||
| File | Action |
|
||||
|------|--------|
|
||||
| `resources/views/vendor/mail/html/themes/default.css` | Modified |
|
||||
| `resources/views/vendor/mail/html/header.blade.php` | Modified |
|
||||
| `resources/views/vendor/mail/html/footer.blade.php` | Modified |
|
||||
| `resources/views/vendor/mail/html/themes/default.css` | To be modified |
|
||||
| `resources/views/vendor/mail/html/header.blade.php` | To be modified |
|
||||
| `resources/views/vendor/mail/html/footer.blade.php` | To be modified |
|
||||
|
||||
### Change Log
|
||||
|
||||
1. **default.css** - Updated all color values per AC1:
|
||||
- Links: `#4A4A42` → `#8AB357` (Olive Green)
|
||||
- Headings (h1, h2, h3): `#4A4A42` → `#6A9337` (Dark Olive)
|
||||
- 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
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
|
||||
|
||||
### Completion Notes
|
||||
|
||||
- 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
|
||||
(To be filled during implementation)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
**As a** developer
|
||||
**I want to** update PDF export templates to use the new olive green colors and square logo
|
||||
**So that** all exported documents reflect the new LIBRA for Rights branding
|
||||
**I want to** update PDF export templates to use the new dark charcoal and warm gold colors
|
||||
**So that** all exported documents reflect the refined LIBRA for Rights branding
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### 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
|
||||
**Then** the following changes are applied:
|
||||
- Header background: Charcoal → Olive Green (`#8AB357`)
|
||||
- Header text: Off-White (`#E8E4DC`)
|
||||
- Accent elements: Warm Gray → Light Olive (`#A5C87A`)
|
||||
- Table headers: Charcoal → Olive Green
|
||||
- Borders: Updated to olive palette
|
||||
- Logo: Square format
|
||||
- Header background: Dark Charcoal (`#1B1D1A`)
|
||||
- Header text: White (`#FFFFFF`)
|
||||
- Accent elements: Warm Gold (`#A68966`) or Gold Light (`#C4A882`)
|
||||
- Table headers: Dark Charcoal background, white text
|
||||
- Borders: Gold Light (`#C4A882`)
|
||||
- Body text: Forest Green (`#2D322A`)
|
||||
|
||||
### 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
|
||||
**Then** colors match the new olive green palette:
|
||||
- Headers: Olive Green background
|
||||
**Then** colors match the new palette:
|
||||
- Headers: Dark Charcoal background
|
||||
- Status badges: Appropriate contrast colors
|
||||
- Table styling: Olive accents
|
||||
- Table styling: Gold accents
|
||||
|
||||
### 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
|
||||
**Then** colors match the new olive green palette:
|
||||
- Timeline markers: Olive Green
|
||||
- Section headers: Olive Green
|
||||
- Borders and accents: Light Olive
|
||||
**Then** colors match the new palette:
|
||||
- Timeline markers: Warm Gold (`#A68966`)
|
||||
- Section headers: Dark Charcoal background
|
||||
- Borders and accents: Gold Light (`#C4A882`)
|
||||
|
||||
### 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
|
||||
**Then** the following changes are applied:
|
||||
- Header/footer: Olive Green background
|
||||
- Accent colors: Light Olive
|
||||
- Charts/graphs: Updated olive color scheme
|
||||
- Text: Deep Black for readability
|
||||
- Logo: Square format
|
||||
- Header/footer: Dark Charcoal background (`#1B1D1A`)
|
||||
- Header/footer text: White
|
||||
- Accent colors: Warm Gold (`#A68966`)
|
||||
- Charts/graphs: Updated color scheme
|
||||
- Text: Forest Green (`#2D322A`)
|
||||
|
||||
### AC5: Monthly Report Service Updated
|
||||
|
||||
**Given** `app/Services/MonthlyReportService.php` contains color references for charts
|
||||
**When** I update the service
|
||||
**Then** chart colors use olive palette:
|
||||
- Pie chart colors: Olive Green, Light Olive, Pale Olive
|
||||
- Line chart border: Olive Green
|
||||
- Bar chart fills: Olive variations
|
||||
**Then** chart colors use new palette:
|
||||
- Primary chart color: Warm Gold (`#A68966`)
|
||||
- Secondary: Gold Light (`#C4A882`)
|
||||
- Tertiary: Dark Charcoal (`#1B1D1A`)
|
||||
- Quaternary: Olive Green (`#4A5D23`)
|
||||
|
||||
### AC6: PDF Logo Updated to Square Format
|
||||
|
||||
**Given** PDF templates include the logo
|
||||
**When** PDFs are generated
|
||||
**Then**:
|
||||
- Logo uses square format
|
||||
- Logo sized appropriately for PDF context
|
||||
- Alt text/title reads "LIBRA for Rights"
|
||||
|
||||
### AC7: Print-Friendly Colors
|
||||
### AC6: Print-Friendly Colors
|
||||
|
||||
**Given** PDFs are often printed
|
||||
**When** colors are updated
|
||||
**Then** they remain legible when printed:
|
||||
- Olive Green (`#8AB357`) prints well
|
||||
- Light Olive (`#A5C87A`) used for accents only (may appear light in grayscale)
|
||||
- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent contrast
|
||||
- Warm Gold (`#A68966`) prints as medium tone - good visibility
|
||||
- Sufficient contrast for all text
|
||||
- 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
|
||||
**When** I test each PDF export
|
||||
|
|
@ -103,27 +95,38 @@
|
|||
**Livewire Components (review for inline PDF styles):**
|
||||
- `resources/views/livewire/admin/reports/monthly-report.blade.php`
|
||||
|
||||
**Tests:**
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php` (update color assertions)
|
||||
|
||||
### Color Mapping for PDFs
|
||||
|
||||
| Element | Old Color | New Color |
|
||||
|---------|-----------|-----------|
|
||||
| Primary Background | `#4A4A42` | `#8AB357` |
|
||||
| Accent/Highlight | `#C9C4BA` | `#A5C87A` |
|
||||
| Light Background | `#E8E4DC` | `#E8E4DC` (unchanged) |
|
||||
| Text | `#1A1A1A` | `#1A1A1A` (unchanged) |
|
||||
| Table Header BG | `#4A4A42` | `#8AB357` |
|
||||
| Table Header Text | `#E8E4DC` | `#E8E4DC` |
|
||||
| Borders | `#C9C4BA` | `#A5C87A` |
|
||||
| Element | New Color | Hex |
|
||||
|---------|-----------|-----|
|
||||
| Primary Background | Dark Charcoal | `#1B1D1A` |
|
||||
| Accent/Highlight | Warm Gold | `#A68966` |
|
||||
| Light Accent | Gold Light | `#C4A882` |
|
||||
| Page Background | Warm Cream | `#F4F1EA` |
|
||||
| Text | Forest Green | `#2D322A` |
|
||||
| Table Header BG | Dark Charcoal | `#1B1D1A` |
|
||||
| Table Header Text | White | `#FFFFFF` |
|
||||
| Borders | Gold Light | `#C4A882` |
|
||||
|
||||
### PDF Styling Notes
|
||||
|
||||
PDF templates use inline CSS. Common patterns to update:
|
||||
```html
|
||||
<!-- Old -->
|
||||
<div style="background-color: #4A4A42; color: #E8E4DC;">
|
||||
|
||||
<!-- New -->
|
||||
<div style="background-color: #8AB357; color: #E8E4DC;">
|
||||
```html
|
||||
<!-- 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
|
||||
|
|
@ -131,45 +134,36 @@ PDF templates use inline CSS. Common patterns to update:
|
|||
```php
|
||||
// Monthly Report Service chart colors
|
||||
$chartColors = [
|
||||
'primary' => '#8AB357', // Olive Green
|
||||
'secondary' => '#A5C87A', // Light Olive
|
||||
'tertiary' => '#C5D9A5', // Pale Olive
|
||||
'quaternary' => '#6A9337', // Dark Olive
|
||||
'background' => '#E8E4DC', // Off-White
|
||||
'primary' => '#A68966', // Warm Gold
|
||||
'secondary' => '#C4A882', // Gold Light
|
||||
'tertiary' => '#1B1D1A', // Dark Charcoal
|
||||
'quaternary' => '#4A5D23', // Olive Green
|
||||
'background' => '#F4F1EA', // Warm Cream
|
||||
];
|
||||
```
|
||||
|
||||
### Print Considerations
|
||||
|
||||
- Olive Green (`#8AB357`) prints as medium gray - good contrast
|
||||
- Light Olive (`#A5C87A`) prints as light gray - use for accents only
|
||||
- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent readability
|
||||
- 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
|
||||
- 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
|
||||
|
||||
- [x] Update `users-export.blade.php` colors
|
||||
- [x] Update `users-export.blade.php` logo
|
||||
- [x] Update `consultations-export.blade.php` colors
|
||||
- [x] Update `consultations-export.blade.php` logo
|
||||
- [x] Update `timelines-export.blade.php` colors
|
||||
- [x] Update `timelines-export.blade.php` logo
|
||||
- [x] Update `monthly-report.blade.php` colors
|
||||
- [x] Update `monthly-report.blade.php` logo
|
||||
- [x] Update `MonthlyReportService.php` chart colors
|
||||
- [x] Review `monthly-report.blade.php` Livewire component
|
||||
- [x] Test Users PDF export
|
||||
- [x] Test Consultations PDF export
|
||||
- [x] Test Timelines PDF export
|
||||
- [x] Test Monthly Report PDF generation
|
||||
- [x] Verify logo displays correctly in all PDFs
|
||||
- [ ] Update `users-export.blade.php` colors
|
||||
- [ ] Update `consultations-export.blade.php` colors
|
||||
- [ ] Update `timelines-export.blade.php` colors
|
||||
- [ ] Update `monthly-report.blade.php` colors
|
||||
- [ ] Update `MonthlyReportService.php` chart colors
|
||||
- [ ] Review `monthly-report.blade.php` Livewire component
|
||||
- [ ] Update `PdfBrandColorsTest.php` color assertions
|
||||
- [ ] Test Users PDF export
|
||||
- [ ] Test Consultations PDF export
|
||||
- [ ] Test Timelines PDF export
|
||||
- [ ] Test Monthly Report PDF generation
|
||||
- [ ] Verify logo displays correctly in all PDFs
|
||||
- [ ] Test print preview for readability
|
||||
- [ ] Test grayscale printing
|
||||
|
||||
|
|
@ -180,7 +174,7 @@ $chartColors = [
|
|||
|
||||
## 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
|
||||
|
||||
---
|
||||
|
|
@ -188,39 +182,27 @@ $chartColors = [
|
|||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Ready for Review
|
||||
Not Started - Ready for Implementation
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5
|
||||
(To be filled during implementation)
|
||||
|
||||
### File List
|
||||
|
||||
**Modified:**
|
||||
- `resources/views/pdf/users-export.blade.php` - Updated colors from charcoal to olive green, added square logo
|
||||
- `resources/views/pdf/consultations-export.blade.php` - Updated colors from charcoal to olive green, added square logo
|
||||
- `resources/views/pdf/timelines-export.blade.php` - Updated colors from charcoal to olive green, added square logo
|
||||
- `resources/views/pdf/monthly-report.blade.php` - Updated colors from charcoal to olive green, added square logo (header + cover page)
|
||||
- `app/Services/MonthlyReportService.php` - Updated chart colors for pie and line charts
|
||||
- `resources/views/livewire/admin/reports/monthly-report.blade.php` - Updated inline color styles for TOC badges
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php` - Updated tests to check for new olive green colors instead of old charcoal
|
||||
**To be modified:**
|
||||
- `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`
|
||||
- `app/Services/MonthlyReportService.php`
|
||||
- `resources/views/livewire/admin/reports/monthly-report.blade.php`
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php`
|
||||
|
||||
### Change Log
|
||||
|
||||
| Date | Change | Reason |
|
||||
|------|--------|--------|
|
||||
| 2026-01-04 | Updated all PDF templates with olive green colors | Story 12.5 requirement |
|
||||
| 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
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
|
||||
|
||||
### Completion Notes
|
||||
- All PDF templates updated with olive green palette (`#8AB357` primary, `#A5C87A` accent)
|
||||
- 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
|
||||
(To be filled during implementation)
|
||||
|
|
|
|||
|
|
@ -1,193 +1,168 @@
|
|||
# Story 12.6: Brand Documentation and Cleanup
|
||||
# Story 12.6: Brand Documentation Update - Dark Charcoal & Warm Gold
|
||||
|
||||
## Story
|
||||
|
||||
**As a** developer/designer
|
||||
**I want to** update brand documentation to reflect the new logo and olive green color scheme
|
||||
**So that** future development maintains consistent branding
|
||||
**As a** developer
|
||||
**I want to** update all brand documentation to reflect the new dark charcoal and warm gold color palette
|
||||
**So that** documentation accurately represents the current brand identity
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Brand Guide Updated
|
||||
### AC1: Update `docs/brand.md`
|
||||
|
||||
**Given** `docs/brand.md` contains old color palette and logo description
|
||||
**When** I update the document
|
||||
**Then** it reflects the new branding:
|
||||
**Given** the brand documentation references old colors
|
||||
**When** I update the file
|
||||
**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 |
|
||||
|-------|----------|-------|
|
||||
| Olive Green | `#8AB357` | Primary brand color, backgrounds, accents |
|
||||
| Darker Olive | `#7AA347` | Hover states |
|
||||
| Dark Olive | `#6A9337` | Active states, headings |
|
||||
| Light Olive | `#A5C87A` | Secondary backgrounds, borders |
|
||||
| Pale Olive | `#C5D9A5` | Subtle backgrounds |
|
||||
| Off-White | `#E8E4DC` | Light backgrounds |
|
||||
| Deep Black | `#1A1A1A` | Text, headings |
|
||||
| Color Name | Hex | Usage |
|
||||
|------------|-----|-------|
|
||||
| Dark Charcoal | `#1B1D1A` | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | CTA buttons, links, accents |
|
||||
| Warm Cream | `#F4F1EA` | Main page background |
|
||||
| Forest Green | `#2D322A` | Headings, body text |
|
||||
| Pure White | `#FFFFFF` | Card backgrounds |
|
||||
| Olive Green | `#4A5D23` | Active states |
|
||||
| Gold Hover | `#8A7555` | Button hover states |
|
||||
| Gold Light | `#C4A882` | Light accents |
|
||||
|
||||
**Updated Logo Description:**
|
||||
- Square format featuring Palestinian tatreez (embroidery) patterns
|
||||
- Central botanical/olive motif
|
||||
- "LIBRA FOR RIGHTS" text integrated into design
|
||||
- Palestinian flag accent
|
||||
- Cultural heritage elements
|
||||
### AC2: Update `CLAUDE.md`
|
||||
|
||||
### 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
|
||||
**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
|
||||
### AC3: Update `docs/architecture.md` (if applicable)
|
||||
|
||||
**Given** architecture docs may reference brand colors
|
||||
**When** I review architecture documentation
|
||||
**Then** any color references are updated to olive palette
|
||||
**When** I review the file
|
||||
**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
|
||||
**When** documentation is complete
|
||||
**Then** old files are handled appropriately:
|
||||
- `public/images/logo.svg` - Remove or archive
|
||||
- `public/images/logo-reversed.svg` - Remove or archive
|
||||
- `public/images/logo-mono.svg` - Remove or archive
|
||||
- `public/favicon.svg` - Remove or archive
|
||||
**Given** PRD may reference brand colors
|
||||
**When** I review the file
|
||||
**Then** any color references are updated to new palette
|
||||
|
||||
**Note:** Keep git history for reference; no need to purge from history
|
||||
### AC5: Update Test Color Assertions
|
||||
|
||||
### AC6: Logo Folder Cleanup
|
||||
|
||||
**Given** logo files were generated in `logo/` folder
|
||||
**When** deployment is complete
|
||||
**Then** the `logo/` folder is removed (files moved to `public/`)
|
||||
|
||||
### AC7: README Updated (if applicable)
|
||||
|
||||
**Given** README may contain branding information
|
||||
**When** I review README.md
|
||||
**Then** any visual/branding references are current
|
||||
|
||||
### AC8: Test Assertions Updated
|
||||
|
||||
**Given** tests may contain color value assertions
|
||||
**Given** tests may assert specific color values
|
||||
**When** I review test files
|
||||
**Then** color assertions use new olive palette values:
|
||||
- `AccessibilityComplianceTest.php`
|
||||
- Any component tests with color assertions
|
||||
- Email template tests
|
||||
- PDF template tests
|
||||
**Then** color assertions are updated:
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php`
|
||||
- Any other tests checking brand colors
|
||||
|
||||
### 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
|
||||
|
||||
### Files to Update
|
||||
### Files to Review/Modify
|
||||
|
||||
**Documentation:**
|
||||
- `docs/brand.md` - Full brand guide update
|
||||
- `docs/logo-generation-instructions.md` - Update for square format
|
||||
- `CLAUDE.md` - Update design requirements section
|
||||
- `docs/brand.md` - Primary brand documentation
|
||||
- `CLAUDE.md` - Project instructions
|
||||
- `docs/architecture.md` - Architecture documentation
|
||||
- `docs/prd.md` - Product requirements
|
||||
|
||||
**Tests to Review:**
|
||||
- `tests/Feature/AccessibilityComplianceTest.php`
|
||||
- `tests/Feature/Components/` - Any color assertions
|
||||
- `tests/Feature/Mail/EmailTemplateColorsTest.php`
|
||||
**Tests:**
|
||||
- `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
|
||||
## Color Palette
|
||||
|
||||
| Color | Hex Code | Usage |
|
||||
|-------|----------|-------|
|
||||
| Olive Green | `#8AB357` | Primary brand color |
|
||||
| Darker Olive | `#7AA347` | Hover states |
|
||||
| Dark Olive | `#6A9337` | Active states |
|
||||
| Light Olive | `#A5C87A` | Secondary accents |
|
||||
| Pale Olive | `#C5D9A5` | Subtle backgrounds |
|
||||
| Off-White | `#E8E4DC` | Light backgrounds |
|
||||
| Deep Black | `#1A1A1A` | Text, headings |
|
||||
|
||||
## Logo
|
||||
|
||||
### Description
|
||||
The logo features a square design incorporating Palestinian tatreez (traditional embroidery)
|
||||
patterns with a central botanical/olive motif. The design represents:
|
||||
- **Tatreez Patterns:** Palestinian cultural heritage and identity
|
||||
- **Olive Branch:** Peace, dignity, and connection to the land
|
||||
- **"LIBRA FOR RIGHTS":** Organization name and mission
|
||||
- **Palestinian Flag:** National identity accent
|
||||
|
||||
### Logo Style
|
||||
- Square format
|
||||
- Traditional embroidery-inspired patterns
|
||||
- Botanical/organic central element
|
||||
- Deep black and olive green color scheme
|
||||
- Cultural authenticity with modern presentation
|
||||
```
|
||||
|
||||
### Files to Remove
|
||||
|
||||
```bash
|
||||
# Old logo files to remove after verification
|
||||
rm public/images/logo.svg
|
||||
rm public/images/logo-reversed.svg
|
||||
rm public/images/logo-mono.svg
|
||||
rm public/favicon.svg
|
||||
|
||||
# Temporary logo folder to remove
|
||||
rm -rf logo/
|
||||
```
|
||||
|
||||
### Test Color Value Updates
|
||||
|
||||
```php
|
||||
// Old assertions
|
||||
$this->assertStringContainsString('#4A4A42', $content);
|
||||
$this->assertStringContainsString('#C9C4BA', $content);
|
||||
|
||||
// New assertions
|
||||
$this->assertStringContainsString('#8AB357', $content);
|
||||
$this->assertStringContainsString('#A5C87A', $content);
|
||||
- **Color scheme:**
|
||||
- Dark Charcoal (#1B1D1A) - Header/Footer backgrounds
|
||||
- Warm Gold (#A68966) - CTA buttons, links, accents
|
||||
- Warm Cream (#F4F1EA) - Main page background
|
||||
- Forest Green (#2D322A) - Headings, body text
|
||||
- Pure White (#FFFFFF) - Card backgrounds
|
||||
- Olive Green (#4A5D23) - Active states
|
||||
```
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update `docs/brand.md` with new color palette
|
||||
- [ ] Update `docs/brand.md` with new logo description
|
||||
- [ ] Update `docs/logo-generation-instructions.md` for square format
|
||||
- [ ] Review and update `CLAUDE.md` design requirements
|
||||
- [ ] Review architecture documentation for color references
|
||||
- [ ] Update `AccessibilityComplianceTest.php` color assertions
|
||||
- [ ] Update `EmailTemplateColorsTest.php` color assertions
|
||||
- [ ] Update `PdfBrandColorsTest.php` color assertions
|
||||
- [ ] Review and update any other test color assertions
|
||||
- [ ] Remove old SVG logo files from `public/images/`
|
||||
- [ ] Remove old `public/favicon.svg`
|
||||
- [ ] Remove temporary `logo/` folder
|
||||
- [ ] Verify all tests pass with new color values
|
||||
- [ ] Final visual review of documentation
|
||||
- [ ] Update `docs/brand.md` color palette section
|
||||
- [ ] Update `docs/brand.md` color usage guidelines
|
||||
- [ ] Update `CLAUDE.md` Design Requirements section
|
||||
- [ ] Review `docs/architecture.md` for color references
|
||||
- [ ] Review `docs/prd.md` for color references
|
||||
- [ ] Update `PdfBrandColorsTest.php` assertions
|
||||
- [ ] Review other test files for color assertions
|
||||
- [ ] Update CSS comments in `app.css`
|
||||
- [ ] Review `docs/logo-generation-instructions.md` if exists
|
||||
- [ ] Final review of all documentation for consistency
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low
|
||||
**Risk:** Low - Documentation and cleanup tasks
|
||||
**Risk:** Low - Documentation only, no code changes
|
||||
|
||||
## Dependencies
|
||||
|
||||
- All other Epic 12 stories should be completed before final cleanup
|
||||
- This story should be completed last in the epic
|
||||
- Stories 12.2, 12.3, 12.4, 12.5 must be completed first
|
||||
- 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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue