8.8 KiB

Raw Blame History

Story 12.1: Logo Asset Deployment and CSS Layout Updates

Story

As a developer I want to deploy the new square logo with Palestinian tatreez patterns and update CSS layouts So that the application displays the new brand identity correctly throughout the website

Acceptance Criteria

AC1: Logo Files Deployed to Public Directory

Given logo files have been generated in the logo/ folder When I deploy them to the public directory Then the following files are placed correctly:

Source File	Destination	Purpose
`logo/favicon.ico`	`public/favicon.ico`	Browser tab icon
`logo/favicon-16x16.png`	`public/favicon-16x16.png`	Small favicon
`logo/favicon-32x32.png`	`public/favicon-32x32.png`	Standard favicon
`logo/favicon-48x48.png`	`public/favicon-48x48.png`	Large favicon
`logo/apple-touch-icon.png`	`public/apple-touch-icon.png`	iOS home screen
`logo/android-chrome-192x192.png`	`public/android-chrome-192x192.png`	Android home screen
`logo/android-chrome-512x512.png`	`public/android-chrome-512x512.png`	Android splash
`logo/logo-square.png`	`public/images/logo.png`	Main logo
`logo/logo-email.png`	`public/images/logo-email.png`	Email templates

Given the navigation uses a horizontal logo layout When I update resources/views/components/navigation.blade.php Then the following changes are applied:

Logo container adjusted for square aspect ratio
Logo height set to appropriate size (e.g., 48px-56px)
Width set to auto to maintain aspect ratio
Responsive sizing for mobile views
Proper alignment with navigation items

AC3: Footer Component Updated for Square Logo

Given the footer uses the logo When I update resources/views/components/footer.blade.php Then the following changes are applied:

Logo container adjusted for square format
Appropriate sizing for footer context
Proper spacing and alignment

AC4: Logo Blade Component Updated

Given resources/views/components/logo.blade.php references logo files When I update the component Then it:

Uses the new PNG logo as the primary source
Removes references to old horizontal SVG
Supports size variants via props (sm, md, lg)
Maintains alt text "LIBRA for Rights"

AC5: Auth Pages Logo Updated

Given auth pages (login, password reset, etc.) display the logo When I update auth page layouts Then the square logo displays correctly:

Centered on auth pages
Appropriate size for auth context
Proper spacing above forms

AC6: Favicon Displays in Browser Tab

Given the new favicon files are deployed When I view the application in a browser Then the botanical design icon appears in:

Browser tab
Bookmarks
Browser history

AC7: Mobile App Icons Updated

Given mobile manifest files reference app icons When I update public/manifest.json (if exists) or meta tags Then mobile icons reference the new files:

apple-touch-icon.png for iOS
android-chrome-*.png for Android

AC8: Logo Displays Correctly on All Breakpoints

Given the application is responsive When I test the logo on different screen sizes Then it displays correctly:

Desktop: Full size logo in navbar
Tablet: Appropriately scaled
Mobile: Compact size that fits mobile nav

AC9: RTL Layout Support

Given the application supports RTL (Arabic) When viewing in Arabic mode Then the logo displays correctly without mirroring

AC10: Old Logo Files Removed

Given old SVG logo files exist When deployment is complete Then the following old files are removed or archived:

public/images/logo.svg
public/images/logo-reversed.svg
public/images/logo-mono.svg
public/favicon.svg

Technical Notes

Files to Modify

Components:

resources/views/components/navigation.blade.php
resources/views/components/footer.blade.php
resources/views/components/logo.blade.php
resources/views/components/app-logo.blade.php
resources/views/components/app-logo-icon.blade.php

Layouts:

resources/views/components/layouts/public.blade.php (head section for favicon meta)
resources/views/components/layouts/app.blade.php (if applicable)

Auth Views (check for logo usage):

resources/views/livewire/pages/auth/login.blade.php
resources/views/livewire/pages/auth/forgot-password.blade.php
resources/views/livewire/pages/auth/reset-password.blade.php

Logo Sizing Guidelines

Context	Recommended Size
Navbar (Desktop)	48-56px height
Navbar (Mobile)	40px height
Footer	64-80px height
Auth Pages	80-100px height
Email Header	60px height

CSS Updates for Square Logo

/* Example navbar logo styling */
.logo-container {
    height: 48px;
    width: 48px;
}

.logo-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Mobile */
@media (max-width: 768px) {
    .logo-container {
        height: 40px;
        width: 40px;
    }
}

Dev Checklist

Copy logo files from logo/ to public/ directories
Update navigation.blade.php for square logo
Update footer.blade.php for square logo
Update logo.blade.php component
Update app-logo.blade.php component
Update app-logo-icon.blade.php component
Update favicon meta tags in layout head
Update auth page logo displays
Test favicon in browser tab
Test logo on desktop viewport
Test logo on tablet viewport
Test logo on mobile viewport
Test RTL layout (Arabic)
Remove old SVG logo files
Run existing tests to ensure no regressions

Estimation

Complexity: Medium Risk: Low - Primarily asset replacement and CSS adjustments

Dependencies

Logo files already generated in logo/ folder
No dependencies on other Epic 12 stories (can run in parallel with 12.2)

Dev Agent Record

Status: Ready for Review

Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

File List

New Files:

public/manifest.json - Web app manifest for mobile icons

Modified Files:

resources/views/components/logo.blade.php - Updated to PNG with size variants (sm, md, lg, xl)
resources/views/components/app-logo.blade.php - Updated to PNG with size variants
resources/views/components/app-logo-icon.blade.php - Updated from SVG to PNG
resources/views/components/navigation.blade.php - Updated logo sizes for desktop (md) and mobile (sm)
resources/views/components/footer.blade.php - Updated to use size="lg"
resources/views/components/layouts/auth/simple.blade.php - Updated to use x-logo size="xl"
resources/views/components/layouts/auth/card.blade.php - Updated to use x-logo size="xl"
resources/views/components/layouts/auth/split.blade.php - Updated logo display in both panels
resources/views/partials/head.blade.php - Updated favicon meta tags with PNG sizes
tests/Feature/Components/LogoComponentTest.php - Updated tests for new PNG-based components

Deployed Assets:

public/favicon.ico
public/favicon-16x16.png
public/favicon-32x32.png
public/favicon-48x48.png
public/apple-touch-icon.png
public/android-chrome-192x192.png
public/android-chrome-512x512.png
public/images/logo.png
public/images/logo-email.png

Removed Files:

public/images/logo.svg
public/images/logo-reversed.svg
public/images/logo-mono.svg
public/favicon.svg

Change Log

AC1 - Logo File Deployment: Copied all logo files from logo/ to appropriate public/ destinations
AC2 - Navigation Update: Updated navigation to use x-logo size="md" for desktop and size="sm" for mobile
AC3 - Footer Update: Updated footer to use x-logo size="lg" (64px)
AC4 - Logo Component: Refactored logo.blade.php to use PNG with size variants (sm=40px, md=48px, lg=64px, xl=80px)
AC5 - Auth Pages: Updated all three auth layouts (simple, card, split) to use x-logo size="xl" for proper display
AC6/7 - Favicon & Manifest: Updated head partial with PNG favicon meta tags and created manifest.json for mobile icons
AC8/9 - Responsive & RTL: Logo components use Tailwind classes ensuring proper responsive behavior and RTL support (no mirroring)
AC10 - Cleanup: Removed old SVG logo files

Debug Log References

None - no issues encountered during implementation

Completion Notes

All 20 logo component tests pass
All 51 logo and navigation tests pass
Pre-existing test failure in AnimationComponentsTest (unrelated to logo changes - spinner color issue)
Pre-existing memory issue with PDF export tests (unrelated to logo changes)
Logo displays correctly with object-contain for aspect ratio preservation
Size variants use standardized naming: sm, md, lg, xl

8.8 KiB Raw Blame History