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

created epic 13 make a better login page design

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 02:20:00 +02:00
parent 082545032a
commit e557fb1104
8 changed files with 973 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/epics/epic-12-branding-refresh.md
+151
View File
@@ -0,0 +1,151 @@
# Epic 12: Branding Refresh - Logo and Color Scheme Update
## Epic Goal
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 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.
### Enhancement Details
**What's being added/changed:**
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 Name | Hex | Usage |
|------------|-----|-------|
| Primary (Dark Forest Green) | `#2D3624` | 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 | `#3D4634` | Primary hover state |
| CTA Hover | `#8A7555` | Button hover state |
| CTA Light | `#C4A882` | Light accent |
| Active Hover | `#5A7030` | Active state hover |
**How it integrates:**
- Tailwind CSS color configuration will be updated
- Existing Blade components will automatically use new colors via CSS variables
**Success criteria:**
- 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 - Dark Charcoal & Warm Gold Palette
**File:** `story-12.2-core-css-theme-update.md`
**Status:** 🔄 Needs Reimplementation
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 color palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.
### 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 colors. Includes theme CSS, header/footer components, button styles, and all notification emails.
### 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 colors. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.
### 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`, `CLAUDE.md`, etc.) to reflect new color palette. Update test color assertions. Final cleanup and verification.
## Compatibility Requirements
- [x] Existing APIs remain unchanged
- [x] Database schema changes are backward compatible (N/A - no DB changes)
- [x] UI changes follow existing patterns
- [x] Performance impact is minimal
## Risk Mitigation
- **Primary Risk:** Color changes may affect accessibility (contrast ratios)
- **Mitigation:** Test all color combinations for WCAG AA compliance; adjust shades if needed
- **Rollback Plan:** Git revert to previous commit; old logo files preserved in git history
## Definition of Done
- [ ] All stories completed with acceptance criteria met
- [ ] New logo displays correctly across all pages and devices
- [ ] Color scheme is consistent throughout the application
- [ ] Brand documentation is updated
- [ ] No regression in existing features
- [ ] Visual QA completed on major pages
## Technical Notes
### Color Values for Implementation
```css
/* New Dark Forest Green & Warm Gold Palette */
--color-primary: #2D3624; /* Dark Forest Green - 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 */
/* Color variants for UI states */
--color-primary-light: #3D4634; /* 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 | `#2D3624` |
| 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 deployed
- No external dependencies required
docs/epics/epic-13-auth-page-design.md
+167
View File
@@ -0,0 +1,167 @@
# Epic 13: Authentication Pages Design Enhancement
## Epic Goal
Transform the authentication pages (login, forgot password, reset password, etc.) from plain layouts into visually engaging, branded experiences using a split-screen design with the LIBRA logo prominently featured and improved component visibility.
## Epic Description
### Existing System Context
- **Current functionality:** Auth pages use a simple centered layout with minimal styling
- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4
- **Current layout:** `resources/views/components/layouts/auth/simple.blade.php` - plain white/cream background
- **Existing split layout:** `resources/views/components/layouts/auth/split.blade.php` - exists but uses generic styling
- **Language toggle component:** `resources/views/components/language-toggle.blade.php` - has `light` variant with low visibility
### Enhancement Details
**What's being added/changed:**
1. **Split Layout Design for Auth Pages**
- Left panel: Dark primary background (`#2D3624`) with centered LIBRA logo
- Right panel: Warm cream background with subtle botanical/geometric pattern and form content
- Responsive: On mobile, shows only the form side with logo above
2. **Language Toggle Visibility Fix**
- Update `light` variant to use darker color (`text-primary` instead of `text-body/70`)
- Ensure proper contrast on light backgrounds
- Maintain existing appearance on dark backgrounds (public navigation)
3. **Subtle Background Pattern**
- Add elegant, subtle pattern to form side (wheat/botanical motif or geometric)
- Pattern should complement the brand without being distracting
- SVG-based for performance and scalability
**Auth Pages Affected:**
- `/login` - Login page
- `/forgot-password` - Forgot password page
- `/reset-password` - Reset password page
- `/two-factor-challenge` - 2FA challenge page
- `/confirm-password` - Password confirmation page
- `/email/verify` - Email verification page
**Success criteria:**
- Auth pages display split layout on desktop (logo left, form right)
- Mobile view maintains usability with logo above form
- Language toggle clearly visible on all auth pages
- Subtle pattern adds visual interest without distraction
- Brand consistency with existing design system
- Bilingual support maintained (RTL/LTR)
---
## Stories
### Story 13.1: Language Toggle Visibility Enhancement
**File:** `story-13.1-language-toggle-visibility.md`
Update the language toggle component's `light` variant to use a darker, more visible color scheme while maintaining the existing `dark` variant appearance for navigation headers.
### Story 13.2: Auth Layout Split Design Update
**File:** `story-13.2-auth-split-layout.md`
Update the existing split layout (`auth/split.blade.php`) to use LIBRA brand colors. Left panel with Dark Forest Green background and centered logo, right panel with form content.
### Story 13.3: Subtle Background Pattern Implementation
**File:** `story-13.3-background-pattern.md`
Create and implement a subtle SVG-based background pattern for the auth form side. Pattern should use brand colors at low opacity for an elegant, professional appearance.
### Story 13.4: Auth Pages Migration to Split Layout
**File:** `story-13.4-auth-pages-migration.md`
Migrate all auth pages from the simple layout to the enhanced split layout. Ensure proper RTL support and mobile responsiveness.
### Story 13.5: Visual QA and Refinement
**File:** `story-13.5-visual-qa.md`
Comprehensive visual testing across all auth pages, browsers, and screen sizes. Fix any visual issues and ensure brand consistency.
---
## Compatibility Requirements
- [x] Existing auth functionality remains unchanged
- [x] Form validation and error handling preserved
- [x] RTL (Arabic) and LTR (English) support maintained
- [x] Mobile responsiveness required
- [x] Accessibility standards (WCAG AA) maintained
- [x] No impact on authentication logic
## Technical Considerations
### Color Values
```css
/* Primary for left panel */
--color-primary: #2D3624; /* Dark Forest Green */
/* Background for right panel */
--color-background: #F4F1EA; /* Warm Cream */
/* Pattern overlay (low opacity) */
--color-cta: #A68966; /* Warm Gold at ~5-10% opacity */
/* Language toggle light variant */
--color-primary: #2D3624; /* Dark Forest Green for text */
```
### Layout Structure
```
Desktop (lg+):
+---------------------------+---------------------------+
| | |
| LIBRA Logo | [Language Toggle] |
| (centered) | |
| | Login Form |
| Dark Forest Green | (centered, pattern bg) |
| Background | |
| | Warm Cream Background |
+---------------------------+---------------------------+
Mobile:
+---------------------------+
| [Language Toggle] |
| |
| LIBRA Logo |
| |
| Login Form |
| (pattern bg) |
+---------------------------+
```
### SVG Pattern Considerations
- Pattern should be subtle (5-10% opacity)
- Use wheat/botanical motif aligned with LIBRA brand
- Alternatively, use geometric pattern for cleaner look
- Must tile seamlessly
- Performance-optimized (small file size)
---
## Risk Mitigation
- **Primary Risk:** Layout changes may break on certain screen sizes or RTL mode
- **Mitigation:** Thorough testing on multiple devices and both language directions
- **Rollback Plan:** Auth layout can be reverted to simple layout via single file change
## Definition of Done
- [ ] All stories completed with acceptance criteria met
- [ ] Language toggle visible and accessible on auth pages
- [ ] Split layout displays correctly on desktop and tablet
- [ ] Mobile layout is functional and attractive
- [ ] RTL (Arabic) layout mirrors correctly
- [ ] Pattern is subtle and professional
- [ ] No regression in auth functionality
- [ ] Visual QA completed on major browsers (Chrome, Firefox, Safari)
- [ ] Accessibility audit passed (contrast ratios, focus states)
## Dependencies
- Epic 12 (Branding Refresh) should be completed first for consistent colors
- Existing logo assets from Epic 12
- No external dependencies required
docs/epics/index.md
+10 -1
View File
@@ -27,8 +27,11 @@ This document provides an index of all epics for the Libra Law Firm platform dev
| 8 | [Email Notification System](./epic-8-email-notifications.md) | 10 | High | Epic 1-4 |
| 9 | [Design & Branding Implementation](./epic-9-design-branding.md) | 11 | High | Epic 1 |
| 10 | [Brand Color Refresh](./epic-10-brand-color-refresh.md) | 3 | High | Epic 9 |
| 11 | [Guest Booking](./epic-11-guest-booking.md) | 4 | High | Epic 3 |
| 12 | [Branding Refresh - Logo & Colors](./epic-12-branding-refresh.md) | 6 | High | Epic 9, 10 |
| 13 | [Auth Page Design Enhancement](./epic-13-auth-page-design.md) | 5 | Medium | Epic 12 |
**Total Stories:** 68
**Total Stories:** 83
---
@@ -53,6 +56,9 @@ This document provides an index of all epics for the Libra Law Firm platform dev
### Phase 5: Brand Refresh
10. **Epic 10: Brand Color Refresh** - Update to new LIBRA for Rights color palette
11. **Epic 11: Guest Booking** - Public booking form for unauthenticated visitors
12. **Epic 12: Branding Refresh** - Logo and color scheme updates
13. **Epic 13: Auth Page Design** - Enhanced authentication page layouts
---
@@ -62,6 +68,7 @@ This document provides an index of all epics for the Libra Law Firm platform dev
Epic 1 (Core Foundation)
├── Epic 2 (User Management)
│ └── Epic 3 (Booking)
│ │ └── Epic 11 (Guest Booking)
│ └── Epic 4 (Timeline)
│ └── Epic 6 (Admin Dashboard)
│ └── Epic 7 (Client Dashboard)
@@ -69,6 +76,8 @@ Epic 1 (Core Foundation)
├── Epic 5 (Posts)
└── Epic 9 (Design)
└── Epic 10 (Brand Color Refresh)
└── Epic 12 (Branding Refresh)
└── Epic 13 (Auth Page Design)
```
---