# 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 |

### AC2: Navigation Component Updated for Square Logo

**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

```css
/* 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)