style: simplify app icon branding

components/forecast/forecast-panel.tsx

@@ -135,7 +135,7 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
         </div>
       ) : isError || !forecast ? (
         <Card className="flex min-h-40 flex-col items-center justify-center p-6 text-center">
-          <p className="text-sm text-slate-600 dark:text-slate-300">{t("forecast.error")}</p>
+          <p className="text-sm text-muted">{t("forecast.error")}</p>
           <Button variant="glass" className="mt-4" onClick={() => refetch()}><RefreshCw className="size-4" />{t("common.retry")}</Button>
         </Card>
       ) : !forecast.hourly.length || !forecast.daily.length ? (

public/icons/icon.svg

@@ -1,12 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="wtr.">
-  <defs>
+  <rect width="512" height="512" rx="120" fill="#171d25"/>
-    <linearGradient id="g" x1="70" y1="44" x2="450" y2="484" gradientUnits="userSpaceOnUse">
+  <rect x="22" y="22" width="468" height="468" rx="102" fill="none" stroke="#eef3f7" stroke-opacity=".16" stroke-width="2"/>
-      <stop stop-color="#38bdf8"/>
+  <text x="62" y="318" fill="#eef3f7" font-family="Arial, Helvetica, sans-serif" font-size="186" font-weight="700" letter-spacing="-28">wtr</text>
-      <stop offset=".52" stop-color="#2563eb"/>
+  <circle cx="382" cy="295" r="18" fill="#8fb4ce"/>
-      <stop offset="1" stop-color="#312e81"/>
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" rx="142" fill="url(#g)"/>
-  <circle cx="388" cy="138" r="78" fill="#fff" fill-opacity=".12"/>
-  <text x="62" y="318" fill="white" font-family="Arial, Helvetica, sans-serif" font-size="186" font-weight="700" letter-spacing="-28">wtr.</text>
 </svg>

public/icons/maskable.svg

@@ -1,12 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="wtr.">
-  <defs>
+  <rect width="512" height="512" fill="#171d25"/>
-    <linearGradient id="g" x1="40" y1="20" x2="480" y2="500" gradientUnits="userSpaceOnUse">
+  <rect x="44" y="44" width="424" height="424" rx="96" fill="#1f2630"/>
-      <stop stop-color="#38bdf8"/>
+  <rect x="68" y="68" width="376" height="376" rx="78" fill="none" stroke="#eef3f7" stroke-opacity=".14" stroke-width="2"/>
-      <stop offset=".55" stop-color="#2563eb"/>
+  <text x="84" y="318" fill="#eef3f7" font-family="Arial, Helvetica, sans-serif" font-size="172" font-weight="700" letter-spacing="-26">wtr</text>
-      <stop offset="1" stop-color="#312e81"/>
+  <circle cx="386" cy="296" r="17" fill="#8fb4ce"/>
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" fill="url(#g)"/>
-  <circle cx="392" cy="124" r="90" fill="#fff" fill-opacity=".12"/>
-  <text x="62" y="318" fill="white" font-family="Arial, Helvetica, sans-serif" font-size="186" font-weight="700" letter-spacing="-28">wtr.</text>
 </svg>

public/manifest.json

@@ -4,8 +4,8 @@
   "description": "Pogoda z danych IMGW. Prosto. Pięknie. Aktualnie.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#07111f",
+  "background_color": "#171d25",
-  "theme_color": "#0c4a6e",
+  "theme_color": "#171d25",
   "lang": "pl",
   "orientation": "portrait-primary",
   "icons": [