mirror of
https://github.com/domfelipe/clima-cuida-care-weather.git
synced 2026-08-07 07:36:47 +00:00
feat: modernizar tema visual
This commit is contained in:
Theo-Prado
parent
eeded6c20e
commit
01bca4059a
2 changed files with 100 additions and 20 deletions
14
src/App.tsx
14
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() {
|
|||
<main className="dashboard-shell" aria-busy={isLoading}>
|
||||
{error && <ErrorBanner message={error} onRetry={() => loadWeather(activeLocation)} />}
|
||||
<div className="dashboard-intro">
|
||||
<p className="eyebrow">Orientacao geral, nao recomendacao medica</p>
|
||||
<p className="eyebrow">Orientação geral, não recomendação médica</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
106
src/styles.css
106
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue