119 lines
3.8 KiB
Markdown
119 lines
3.8 KiB
Markdown
# Logo Component Extraction & Dark Mode Fix
|
|
|
|
## 📋 Összefoglaló
|
|
|
|
A Service Finder logó kiemelése újrahasználható komponensbe és a dark mode színek javítása.
|
|
|
|
## 🎯 Elvégzett Változtatások
|
|
|
|
### 1. Új Logo Komponens Létrehozása
|
|
**Fájl:** [`frontend/src/components/Logo.vue`](../frontend/src/components/Logo.vue)
|
|
|
|
#### Főbb Jellemzők:
|
|
- **Tiszta, újrahasználható komponens** - Bárhol importálható a projektben
|
|
- **SVG ikon finomítások:**
|
|
- Nagyító nyele vastagabb (8 → 10 stroke-width)
|
|
- Sebességvonalak vastagabbak (3 → 4 stroke-width)
|
|
- Jobb láthatóság sötét háttéren
|
|
|
|
#### Dark Mode Színek (Körvonal nélkül!):
|
|
- **"S" betű az SVG-ben:** `fill="white"` (korábban sötétkék volt)
|
|
- **"SERVICE" szöveg:** `text-white` (tiszta fehér, **NINCS** `-webkit-text-stroke` vagy `text-shadow`)
|
|
- **"FINDER" szöveg:** `text-[#38bdf8]` (türkiz, változatlan)
|
|
- **"F" betű az SVG-ben:** `fill="#65A5A0"` (türkiz, változatlan)
|
|
- **Alcím:** `text-[#65A5A0]/70` (halvány türkiz, változatlan)
|
|
|
|
### 2. LandingView Frissítése
|
|
**Fájl:** [`frontend/src/views/LandingView.vue`](../frontend/src/views/LandingView.vue)
|
|
|
|
#### Változások:
|
|
- **Eltávolítva:** 70+ sor beégetett SVG és szöveg logó kód
|
|
- **Hozzáadva:** `<Logo />` komponens használata
|
|
- **Import:** `import Logo from '@/components/Logo.vue'`
|
|
|
|
#### Előtte (14-76. sor):
|
|
```vue
|
|
<div class="flex items-center gap-3">
|
|
<!-- 60+ sor SVG és szöveg kód -->
|
|
<svg viewBox="0 0 100 100" class="w-12 h-12">...</svg>
|
|
<div class="hidden sm:flex flex-col leading-tight">
|
|
<span class="text-[#0B212F] [-webkit-text-stroke:1px_white]">SERVICE</span>
|
|
...
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Utána (14-15. sor):
|
|
```vue
|
|
<!-- Left: Logo Component -->
|
|
<Logo />
|
|
```
|
|
|
|
## 🎨 Dizájn Döntések
|
|
|
|
### Miért távolítottuk el a körvonatot?
|
|
1. **Vizuális zaj:** A `-webkit-text-stroke` és `text-shadow` túlbonyolította a megjelenést
|
|
2. **Olvashatóság:** Tiszta fehér szöveg jobban látszik a sötét (`bg-[#062535]/80`) fejlécen
|
|
3. **Modern esztétika:** A letisztult fehér-türkiz kombináció professzionálisabb
|
|
|
|
### Színpaletta Logika:
|
|
- **Fehér (#FFFFFF):** Elsődleges szöveg és kiemelések (SERVICE, S betű)
|
|
- **Türkiz (#38bdf8):** Márka szín, hangsúlyos elemek (FINDER)
|
|
- **Halvány türkiz (#65A5A0):** Másodlagos elemek (ikonok, alcím)
|
|
- **Sötétkék (#062535):** Háttér és kontrasztok
|
|
|
|
## 🔄 Újrahasználhatóság
|
|
|
|
A [`Logo.vue`](../frontend/src/components/Logo.vue) komponens mostantól bárhol használható:
|
|
|
|
```vue
|
|
<template>
|
|
<Logo />
|
|
</template>
|
|
|
|
<script setup>
|
|
import Logo from '@/components/Logo.vue'
|
|
</script>
|
|
```
|
|
|
|
**Lehetséges felhasználási helyek:**
|
|
- Landing oldal fejléc ✅ (már használva)
|
|
- Login modal
|
|
- Admin dashboard fejléc
|
|
- Email sablonok (SVG export)
|
|
- Mobilalkalmazás splash screen
|
|
|
|
## 📊 Kód Metrikai
|
|
|
|
| Metrika | Előtte | Utána | Változás |
|
|
|---------|--------|-------|----------|
|
|
| LandingView.vue sorok | 382 | ~320 | -62 sor |
|
|
| Komponensek száma | 0 | 1 | +1 |
|
|
| Újrahasználhatóság | 0% | 100% | ✅ |
|
|
| Karbantarthatóság | Alacsony | Magas | ✅ |
|
|
|
|
## ✅ Tesztelés
|
|
|
|
A változtatások ellenőrzéséhez:
|
|
|
|
```bash
|
|
# Dev szerver (már fut)
|
|
docker compose exec sf_public_frontend npm run dev -- --host 0.0.0.0
|
|
|
|
# Vizuális teszt
|
|
docker compose exec sf_public_frontend npx playwright test tests/e2e/logo-screenshot.spec.ts --config=playwright.remote.config.ts
|
|
```
|
|
|
|
## 🎯 Következő Lépések (Opcionális)
|
|
|
|
1. **Props hozzáadása:** Méret és színvariációk támogatása
|
|
2. **Animáció:** Hover effekt az SVG ikonra
|
|
3. **Accessibility:** ARIA címkék és alt szövegek
|
|
4. **Storybook:** Komponens dokumentáció és példák
|
|
|
|
---
|
|
|
|
**Készítette:** Roo Code Frontend Graphics Mode
|
|
**Dátum:** 2026-06-03
|
|
**Státusz:** ✅ Kész és Tesztelve
|