From 01bca4059aa2ae7f2a33ac7bb22dca5605ebebaf Mon Sep 17 00:00:00 2001 From: Theo-Prado Date: Sat, 23 May 2026 00:34:57 -0300 Subject: [PATCH] feat: modernizar tema visual --- src/App.tsx | 14 +++---- src/styles.css | 106 +++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 100 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8a3fb20..3cc6aec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -71,7 +71,7 @@ export default function App() { fetchedAt: new Date().toISOString(), source: 'mock', }); - setError('A API nao respondeu agora. Exibindo dados de exemplo para manter a leitura do dia utilizavel.'); + setError('A API não respondeu agora. Exibindo dados de exemplo para manter a leitura do dia utilizável.'); } finally { setIsLoading(false); } @@ -101,7 +101,7 @@ export default function App() { function handleUseCurrentLocation() { if (!navigator.geolocation) { - setError('Este navegador nao oferece geolocalizacao. Busque uma cidade pelo nome.'); + setError('Este navegador não oferece geolocalização. Busque uma cidade pelo nome.'); return; } @@ -110,7 +110,7 @@ export default function App() { (position) => { const location: LocationOption = { id: 'browser-location', - name: 'Sua localizacao', + name: 'Sua localização', latitude: position.coords.latitude, longitude: position.coords.longitude, }; @@ -118,7 +118,7 @@ export default function App() { }, () => { setIsLoading(false); - setError('Nao foi possivel acessar sua localizacao. Voce pode pesquisar uma cidade manualmente.'); + setError('Não foi possível acessar sua localização. Você pode pesquisar uma cidade manualmente.'); }, { enableHighAccuracy: false, timeout: 9000, maximumAge: 10 * 60 * 1000 }, ); @@ -156,10 +156,10 @@ export default function App() {
{error && loadWeather(activeLocation)} />}
-

Orientacao geral, nao recomendacao medica

+

Orientação geral, não recomendação médica

- Leitura combinada de clima, UV e qualidade do ar para decidir saida, exercicio, deslocamento - e protecao diaria. + Leitura combinada de clima, UV e qualidade do ar para decidir saída, exercício, deslocamento + e proteção diária.

diff --git a/src/styles.css b/src/styles.css index 453cb27..181c9de 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,19 +1,22 @@ :root { color-scheme: light; - --bg: oklch(98% 0.007 175); + --bg: oklch(97% 0.018 205); --surface: oklch(100% 0 0); - --surface-soft: oklch(96% 0.012 170); + --surface-soft: oklch(95% 0.02 205); + --glass: oklch(100% 0 0 / 0.78); --fg: oklch(19% 0.025 190); --muted: oklch(47% 0.025 190); --muted-2: oklch(62% 0.02 190); - --border: oklch(88% 0.014 180); - --accent: oklch(55% 0.12 170); - --accent-2: oklch(62% 0.15 35); + --border: oklch(86% 0.028 205); + --accent: oklch(58% 0.13 208); + --accent-2: oklch(70% 0.15 82); --green: oklch(58% 0.14 155); --yellow: oklch(72% 0.13 88); --orange: oklch(66% 0.16 50); --red: oklch(58% 0.19 25); - --shadow: 0 22px 70px -44px oklch(22% 0.05 190 / 0.55); + --sky-glow: oklch(83% 0.105 215 / 0.42); + --sun-glow: oklch(85% 0.16 82 / 0.28); + --shadow: 0 24px 72px -44px oklch(22% 0.06 215 / 0.55); --radius: 22px; --radius-sm: 14px; --font-display: "Avenir Next", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; @@ -23,6 +26,27 @@ color: var(--fg); } +html[data-theme='dark'] { + color-scheme: dark; + --bg: oklch(18% 0.035 236); + --surface: oklch(23% 0.04 236); + --surface-soft: oklch(27% 0.045 236); + --glass: oklch(23% 0.04 236 / 0.76); + --fg: oklch(96% 0.012 220); + --muted: oklch(76% 0.028 220); + --muted-2: oklch(64% 0.03 220); + --border: oklch(37% 0.045 236); + --accent: oklch(73% 0.13 210); + --accent-2: oklch(78% 0.15 78); + --green: oklch(72% 0.13 155); + --yellow: oklch(82% 0.13 88); + --orange: oklch(75% 0.16 50); + --red: oklch(70% 0.18 25); + --sky-glow: oklch(42% 0.11 240 / 0.45); + --sun-glow: oklch(73% 0.15 78 / 0.18); + --shadow: 0 30px 82px -46px oklch(4% 0.02 236 / 0.82); +} + * { box-sizing: border-box; } @@ -37,7 +61,9 @@ body { margin: 0; overflow-x: clip; background: - linear-gradient(180deg, oklch(96% 0.017 174) 0, var(--bg) 360px), + radial-gradient(circle at 14% -12%, var(--sun-glow), transparent 34vw), + radial-gradient(circle at 84% 0, var(--sky-glow), transparent 36vw), + linear-gradient(180deg, color-mix(in oklch, var(--bg), var(--accent) 12%) 0, var(--bg) 420px), var(--bg); color: var(--fg); font-family: var(--font-body); @@ -79,9 +105,10 @@ a { grid-template-columns: 1fr; gap: 14px; padding: 16px clamp(16px, 4vw, 34px); - border-bottom: 1px solid color-mix(in oklch, var(--border), white 24%); - background: oklch(98% 0.007 175 / 0.86); - backdrop-filter: blur(18px); + border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 20%); + background: var(--glass); + box-shadow: 0 16px 44px -34px color-mix(in oklch, var(--fg), transparent 35%); + backdrop-filter: blur(20px) saturate(1.18); } .brand-mark { @@ -106,6 +133,47 @@ a { background: color-mix(in oklch, var(--accent), white 89%); } +.topbar-actions { + display: grid; + gap: 12px; + min-width: 0; +} + +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 40px; + width: fit-content; + padding: 0 14px; + border: 1px solid color-mix(in oklch, var(--border), var(--accent) 18%); + border-radius: 999px; + color: var(--fg); + background: color-mix(in oklch, var(--surface), var(--accent) 6%); + box-shadow: 0 14px 34px -28px color-mix(in oklch, var(--accent), black 45%); + font-size: 0.86rem; + font-weight: 780; + transition: + transform 180ms cubic-bezier(0.23, 1, 0.32, 1), + border-color 180ms cubic-bezier(0.23, 1, 0.32, 1), + background 180ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.theme-toggle:hover { + transform: translateY(-1px); + border-color: color-mix(in oklch, var(--accent), var(--fg) 8%); + background: color-mix(in oklch, var(--surface), var(--accent) 12%); +} + +.theme-toggle:active { + transform: translateY(1px) scale(0.99); +} + +.theme-toggle svg { + color: var(--accent-2); +} + .search-cluster { position: relative; display: grid; @@ -842,8 +910,14 @@ a { align-items: end; } - .profile-selector { + .topbar-actions { grid-column: 1 / -1; + grid-template-columns: auto minmax(0, 1fr); + align-items: end; + } + + .profile-selector { + min-width: 0; } .search-cluster { @@ -881,12 +955,14 @@ a { @media (min-width: 1180px) { .topbar { - grid-template-columns: auto minmax(440px, 1fr) minmax(480px, auto); + grid-template-columns: auto minmax(440px, 1fr) minmax(560px, auto); align-items: end; } - .profile-selector { + .topbar-actions { grid-column: auto; + grid-template-columns: auto minmax(0, 1fr); + align-items: end; } .profile-options { @@ -934,6 +1010,10 @@ a { padding: 12px 10px; } + .theme-toggle { + width: 100%; + } + .semaforo-content { grid-template-columns: 1fr; }