5.2 KiB

Raw Blame History

Story 13.3: Subtle Background Pattern Implementation

Story

As a visitor to the authentication pages I want to see a subtle, elegant background pattern on the form side So that the page feels polished and professionally designed

Acceptance Criteria

AC1: Create SVG Pattern Asset

Given the need for a subtle background pattern When the pattern is created Then:

SVG format for scalability and performance
Uses brand color (Warm Gold #A68966) at 5-8% opacity
Pattern type: Geometric or botanical (wheat/leaf motif)
Seamlessly tileable
File size under 5KB for performance

AC2: Pattern Placement

Given the SVG pattern is created When applied to the auth layout Then:

Pattern appears on the form side (right panel desktop, full background mobile)
Pattern overlays the Warm Cream background
Pattern is fixed/static (doesn't scroll with content)
Pattern doesn't interfere with form readability

AC3: Pattern Opacity

Given readability requirements When the pattern is displayed Then:

Opacity is subtle (5-8%)
Text remains clearly readable
Pattern adds visual interest without distraction

AC4: CSS Implementation

Given the pattern asset When integrated into CSS Then:

Applied via background-image or pseudo-element
Uses background-repeat: repeat for tiling
Background is fixed or positioned appropriately
Can be easily disabled if needed

AC5: Performance Consideration

Given page load performance When the pattern loads Then:

Pattern is inlined or loaded efficiently
No noticeable delay in page rendering
Pattern works without JavaScript

AC6: Mobile Compatibility

Given mobile viewport When pattern is displayed Then:

Pattern scales appropriately
No horizontal scrolling caused by pattern
Pattern remains subtle on smaller screens

Technical Notes

Pattern Options

Option A: Geometric (Recommended)

Simple diagonal lines or dots
Clean, modern aesthetic
Easier to create and maintain

Option B: Botanical

Wheat/leaf silhouettes
Aligns with LIBRA brand identity
More complex but more unique

SVG Pattern Example (Geometric)

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
  <circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
</svg>

CSS Implementation Options

Option 1: Inline SVG in CSS

.auth-pattern {
    background-image: url("data:image/svg+xml,...");
    background-repeat: repeat;
}

Option 2: Pseudo-element Overlay

.auth-form-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/pattern.svg');
    background-repeat: repeat;
    opacity: 0.06;
    pointer-events: none;
}

Option 3: Tailwind Arbitrary Value

<div class="bg-[url('/images/pattern.svg')]">

Files to Create/Modify

public/images/auth-pattern.svg (new) OR inline in CSS
resources/css/app.css (if adding pattern class)
resources/views/components/layouts/auth/split.blade.php (apply pattern)

Pattern Design Guidelines

Color: Warm Gold (#A68966)
Opacity: 5-8% (0.05-0.08)
Size: 20-40px tiles for subtle effect
Style: Minimalist, professional

Dev Checklist

Design/select pattern style (geometric vs botanical)
Create SVG pattern file
Optimize SVG for file size
Add pattern to auth layout CSS
Test pattern visibility at various screen sizes
Verify text readability over pattern
Test in both Arabic and English
Verify no horizontal scroll issues
Check pattern on high-DPI displays

Estimation

Complexity: Medium Risk: Low - Decorative enhancement only

Dependencies

Story 13.2 (Auth Split Layout) - Must be completed first

Dev Agent Record

Agent Model Used

Claude Opus 4.5

File List

File	Action	Description
`public/images/auth-pattern.svg`	Created	Geometric dot pattern SVG using Warm Gold at 6% opacity (138 bytes)
`resources/css/app.css`	Modified	Added `.auth-pattern` CSS class with pseudo-element overlay
`resources/views/components/layouts/auth/split.blade.php`	Modified	Applied `auth-pattern` class to form panel
`tests/Feature/Auth/AuthBackgroundPatternTest.php`	Created	12 tests covering pattern asset, CSS, and layout integration

Change Log

AC1: Created auth-pattern.svg - geometric dot pattern with Warm Gold (#A68966) at 6% opacity, 20x20px tiles, 138 bytes
AC2: Applied pattern to auth split layout form panel via auth-pattern class
AC3: Pattern opacity set to 6% (within 5-8% range) - subtle and non-distracting
AC4: Implemented using CSS pseudo-element overlay with background-repeat: repeat and pointer-events: none
AC5: SVG is only 138 bytes (well under 5KB), loads efficiently, works without JavaScript
AC6: Pattern uses repeat for seamless scaling, no horizontal scroll issues

Completion Notes

Used Option A (Geometric) as recommended - simple dot pattern for clean, modern aesthetic
Used Option 2 (Pseudo-element Overlay) for better control and accessibility
All 12 new tests pass
All 45 auth tests pass
All 20 RTL/LTR layout tests pass

Status

Ready for Review

5.2 KiB Raw Blame History