Merge bc09d9a278 into 9b57320ff2

2026-08-07 07:36:47 +00:00 · 2026-05-23 01:17:33 -03:00 · 2026-05-23 01:17:33 -03:00 · e98fb82370
commit e98fb82370
parent 9b57320ff2 bc09d9a278
7 changed files with 302 additions and 36 deletions
--- a/.nojekyll
+++ b/.nojekyll
@ -0,0 +1 @@
+
--- a/assets/index-CPSikBCn.css
+++ b/assets/index-CPSikBCn.css
--- a/assets/index-Do1NYCCz.js
+++ b/assets/index-Do1NYCCz.js
--- a/index.html
+++ b/index.html
@ -8,9 +8,10 @@
      content="Clima Cuida: leitura prática de clima, qualidade do ar e risco do dia."
    />
    <title>Clima Cuida</title>
+    <script type="module" crossorigin src="/clima-cuida-care-weather-fork/assets/index-Do1NYCCz.js"></script>
+    <link rel="stylesheet" crossorigin href="/clima-cuida-care-weather-fork/assets/index-CPSikBCn.css">
  </head>
  <body>
    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { HeartPulse } from 'lucide-react';
+import { HeartPulse, Moon, Sun } from 'lucide-react';
 import { fetchClimaCuidaData } from './api/openMeteo';
 import { ErrorBanner } from './components/ErrorBanner';
 import { Forecast7Days } from './components/Forecast7Days';
@ -16,10 +16,12 @@ import { calculateRiskScore } from './lib/riskScore';
 import type { LocationOption, ProfileId, WeatherBundle } from './types';

 const STORAGE_KEY = 'clima-cuida-preferences';
+type ThemeMode = 'light' | 'dark';

 interface StoredPreferences {
  profile?: ProfileId;
  location?: LocationOption;
+  theme?: ThemeMode;
 }

 function loadPreferences(): StoredPreferences {
@ -42,6 +44,7 @@ function savePreferences(preferences: StoredPreferences) {
 export default function App() {
  const initialPreferences = useMemo(() => loadPreferences(), []);
  const [profile, setProfile] = useState<ProfileId>(initialPreferences.profile ?? 'adult');
+  const [theme, setTheme] = useState<ThemeMode>(initialPreferences.theme ?? 'light');
  const [activeLocation, setActiveLocation] = useState<LocationOption>(
    initialPreferences.location ?? MOCK_WEATHER.location,
  );
@ -51,6 +54,7 @@ export default function App() {

  const selectedProfile = USE_PROFILES.find((item) => item.id === profile) ?? USE_PROFILES[0];
  const risk = useMemo(() => calculateRiskScore(weather.current, profile), [profile, weather.current]);
+  const isDarkTheme = theme === 'dark';

  const loadWeather = useCallback(
    async (location: LocationOption) => {
@ -60,7 +64,7 @@ export default function App() {
        const nextWeather = await fetchClimaCuidaData(location);
        setWeather(nextWeather);
        setActiveLocation(location);
-        savePreferences({ profile, location });
+        savePreferences({ profile, location, theme });
      } catch {
        setWeather({
          ...MOCK_WEATHER,
@ -72,7 +76,7 @@ export default function App() {
        setIsLoading(false);
      }
    },
-    [profile],
+    [profile, theme],
  );

  useEffect(() => {
@ -80,13 +84,21 @@ export default function App() {
  }, []);

  useEffect(() => {
-    savePreferences({ profile, location: activeLocation });
-  }, [profile, activeLocation]);
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    savePreferences({ profile, location: activeLocation, theme });
+  }, [profile, activeLocation, theme]);

  function handleProfileChange(nextProfile: ProfileId) {
    setProfile(nextProfile);
  }

+  function handleToggleTheme() {
+    setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
+  }
+
  function handleUseCurrentLocation() {
    if (!navigator.geolocation) {
      setError('Este navegador não oferece geolocalização. Busque uma cidade pelo nome.');
@ -127,7 +139,18 @@ export default function App() {
          onSelectLocation={loadWeather}
          onUseCurrentLocation={handleUseCurrentLocation}
        />
-        <ProfileSelector profiles={USE_PROFILES} value={profile} onChange={handleProfileChange} />
+        <div className="topbar-actions">
+          <button
+            className="theme-toggle"
+            type="button"
+            aria-label={isDarkTheme ? 'Ativar modo claro' : 'Ativar modo escuro'}
+            onClick={handleToggleTheme}
+          >
+            {isDarkTheme ? <Sun size={17} aria-hidden="true" /> : <Moon size={17} aria-hidden="true" />}
+            <span>{isDarkTheme ? 'Modo Claro' : 'Modo Escuro'}</span>
+          </button>
+          <ProfileSelector profiles={USE_PROFILES} value={profile} onChange={handleProfileChange} />
+        </div>
      </header>

      <main className="dashboard-shell" aria-busy={isLoading}>
--- 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;
  }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';

 export default defineConfig(({ command }) => ({
-  base: command === 'build' ? '/clima-cuida-care-weather/' : '/',
+  base: command === 'build' ? '/clima-cuida-care-weather-fork/' : '/',
  plugins: [react()],
  test: {
    environment: 'node',