generated logo and a new epic with stories for logo implimintation and color changing
This commit is contained in:
Naser Mansour
@@ -0,0 +1,190 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user