updates storys 12.2-12.6 for reimplimintation

2026-01-04 01:39:38 +02:00
parent 61068e7eee
commit b2ff6df18e
6 changed files with 592 additions and 690 deletions
@@ -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