51679d1943
- Full PWA support with offline capabilities - Comprehensive search across songs, playlists, and channels - Offline playlist manager with download tracking - Pre-built frontend for zero-build deployment - Docker-based deployment with docker compose - Material-UI dark theme interface - YouTube audio download and management - Multi-user authentication support
197 lines
4.1 KiB
Markdown
197 lines
4.1 KiB
Markdown
# 🎨 Logo Update - Complete Instructions
|
|
|
|
## ✅ What's Been Done
|
|
|
|
All code references have been updated to use your new logo:
|
|
|
|
### Updated Files:
|
|
- ✅ `frontend/src/components/Sidebar.tsx` - Logo next to "SoundWave" text
|
|
- ✅ `frontend/src/components/SplashScreen.tsx` - Loading screen logo
|
|
- ✅ `frontend/src/pages/LoginPage.tsx` - Main login page animated logo
|
|
|
|
All now reference: `/img/logo.png`
|
|
|
|
---
|
|
|
|
## 📥 Step 1: Save Your Logo
|
|
|
|
**Save the circular SoundWave logo image you provided to:**
|
|
|
|
```
|
|
frontend/public/img/logo.png
|
|
```
|
|
|
|
**How to do this:**
|
|
1. Download/save the image I showed you (with the play button, circles, and "soundwave" text)
|
|
2. Name it exactly: `logo.png`
|
|
3. Place it in: `frontend/public/img/` folder
|
|
|
|
---
|
|
|
|
## 🤖 Step 2: Generate PWA Icons (Automatic)
|
|
|
|
Run this command from the project root:
|
|
|
|
```bash
|
|
./scripts/update-logo.sh
|
|
```
|
|
|
|
This will automatically create:
|
|
- ✅ 8 PWA icon sizes (72px to 512px)
|
|
- ✅ 2 maskable icons for Android
|
|
- ✅ Multi-size favicon.ico
|
|
|
|
**Prerequisites:** Make sure ImageMagick is installed (it's already available on your system ✅)
|
|
|
|
---
|
|
|
|
## 🏗️ Step 3: Rebuild Frontend
|
|
|
|
```bash
|
|
cd frontend
|
|
npm run build
|
|
```
|
|
|
|
---
|
|
|
|
## 🐳 Step 4: Restart Application
|
|
|
|
```bash
|
|
docker restart soundwave
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Where Your New Logo Will Appear
|
|
|
|
### Login & Authentication
|
|
- ✅ Login page (large animated logo)
|
|
- ✅ 2FA verification page
|
|
- ✅ Password reset pages
|
|
|
|
### Main Application
|
|
- ✅ Sidebar (next to "SoundWave" text)
|
|
- ✅ Splash/loading screen
|
|
- ✅ App header
|
|
|
|
### PWA & Mobile
|
|
- ✅ Home screen icon (when installed)
|
|
- ✅ App switcher/multitasking view
|
|
- ✅ Splash screen on app launch
|
|
- ✅ Notification icon
|
|
|
|
### Browser
|
|
- ✅ Browser tab favicon
|
|
- ✅ Bookmarks
|
|
- ✅ Browser history
|
|
|
|
---
|
|
|
|
## 🔍 Verification
|
|
|
|
After completing all steps:
|
|
|
|
1. **Clear browser cache** (Ctrl+Shift+Delete)
|
|
2. **Hard refresh** (Ctrl+Shift+R)
|
|
3. **Check login page** - Should show new circular logo
|
|
4. **Check sidebar** - Should show new logo next to text
|
|
5. **Check browser tab** - Should show new favicon
|
|
|
|
---
|
|
|
|
## 📱 PWA Users
|
|
|
|
If users already have the PWA installed:
|
|
1. They may need to **uninstall** and **reinstall** the PWA to see the new icon
|
|
2. Or wait for the service worker to update (24-48 hours)
|
|
|
|
---
|
|
|
|
## ⚠️ Troubleshooting
|
|
|
|
**Logo not showing?**
|
|
- Verify file is at: `frontend/public/img/logo.png`
|
|
- Check filename is exact (case-sensitive)
|
|
- Clear browser cache completely
|
|
- Check browser console for 404 errors
|
|
|
|
**Icons not generating?**
|
|
```bash
|
|
# Check ImageMagick is installed
|
|
which convert
|
|
|
|
# If not installed:
|
|
sudo apt-get install imagemagick # Ubuntu/Debian
|
|
```
|
|
|
|
**Still seeing old logo?**
|
|
- Check if old `logo.svg` file exists and delete it
|
|
- Do a hard refresh in browser
|
|
- Check if build completed successfully
|
|
|
|
---
|
|
|
|
## 📊 Current Status
|
|
|
|
```
|
|
✅ Code updated (3 files)
|
|
✅ Script created (update-logo.sh)
|
|
✅ Documentation created
|
|
⏳ Waiting for: You to save logo.png
|
|
⏳ Waiting for: Running the update script
|
|
⏳ Waiting for: Rebuild & restart
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Logo Specifications
|
|
|
|
Your logo perfectly matches these requirements:
|
|
|
|
**Visual Elements:**
|
|
- ✅ Circular play button in center
|
|
- ✅ Concentric circle patterns (sound waves)
|
|
- ✅ Sound wave visualization bars on sides
|
|
- ✅ "soundwave" text in modern typography
|
|
- ✅ Professional color palette (teal/turquoise + navy blue)
|
|
|
|
**Technical:**
|
|
- ✅ Format: PNG with transparency
|
|
- ✅ Recommended size: 1024x1024 or higher
|
|
- ✅ Suitable for all screen densities
|
|
|
|
---
|
|
|
|
## 🚀 Quick Commands
|
|
|
|
```bash
|
|
# Full update process
|
|
cd /home/iulian/projects/zi-tube/soundwave
|
|
|
|
# 1. Place your logo.png in frontend/public/img/
|
|
|
|
# 2. Generate icons
|
|
./scripts/update-logo.sh
|
|
|
|
# 3. Rebuild
|
|
cd frontend && npm run build && cd ..
|
|
|
|
# 4. Restart
|
|
docker restart soundwave
|
|
|
|
# 5. Clear cache and refresh browser
|
|
```
|
|
|
|
---
|
|
|
|
## 📞 Need Help?
|
|
|
|
If you encounter any issues:
|
|
1. Check the script output for errors
|
|
2. Verify ImageMagick is installed: `convert --version`
|
|
3. Check file permissions on logo.png
|
|
4. Look for error messages in terminal
|
|
|
|
---
|
|
|
|
**That's it! Your new professional logo will be displayed everywhere in the app! 🎉**
|