Fix weather icon DOM warnings

src/components/widgets/openmeteo/icon.jsx

@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/openmeteo-condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
-  const IconComponent = mapIcon(condition, timeOfDay);
-
-  return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}

src/components/widgets/openmeteo/openmeteo.jsx

@@ -10,8 +10,7 @@ import ContainerButton from "../widget/container_button";
 import WidgetIcon from "../widget/widget_icon";
 import PrimaryText from "../widget/primary_text";
 import SecondaryText from "../widget/secondary_text";
-
-import Icon from "./icon";
+import mapIcon from "../../../utils/weather/openmeteo-condition-map";
 
 function Widget({ options }) {
   const { t } = useTranslation();
@@ -33,10 +32,8 @@ function Widget({ options }) {
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
-  const weatherInfo = {
-    condition: data.current_weather.weathercode,
-    timeOfDay: data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night"
-  };
+  const condition = data.current_weather.weathercode;
+  const timeOfDay = data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night";
 
   return <Container options={options}>
     <PrimaryText>
@@ -47,8 +44,8 @@ function Widget({ options }) {
         unit,
       })}
     </PrimaryText>
-    <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${weatherInfo.timeOfDay}`)}</SecondaryText>
-    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+    <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}</SecondaryText>
+    <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
   </Container>;
 }
 

src/components/widgets/openweathermap/icon.jsx

@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/owm-condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
-  const IconComponent = mapIcon(condition, timeOfDay);
-
-  return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}

src/components/widgets/openweathermap/weather.jsx

@@ -10,9 +10,7 @@ import ContainerButton from "../widget/container_button";
 import PrimaryText from "../widget/primary_text";
 import SecondaryText from "../widget/secondary_text";
 import WidgetIcon from "../widget/widget_icon";
-
-import Icon from "./icon";
-
+import mapIcon from "../../../utils/weather/owm-condition-map";
 
 function Widget({ options }) {
   const { t, i18n } = useTranslation();
@@ -35,15 +33,13 @@ function Widget({ options }) {
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
 
-  const weatherInfo = {
-    condition: data.weather[0].id,
-    timeOfDay: data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"
-  };
+  const condition = data.weather[0].id;
+  const timeOfDay = data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night";
 
   return <Container options={options}>
     <PrimaryText>{options.label && `${options.label}, ` }{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
     <SecondaryText>{data.weather[0].description}</SecondaryText>
-    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+    <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
   </Container>;
 }
 

src/components/widgets/weather/icon.jsx

@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
-  const IconComponent = mapIcon(condition, timeOfDay);
-
-  return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}

src/components/widgets/weather/weather.jsx

@@ -10,8 +10,7 @@ import PrimaryText from "../widget/primary_text";
 import SecondaryText from "../widget/secondary_text";
 import WidgetIcon from "../widget/widget_icon";
 import ContainerButton from "../widget/container_button";
-
-import Icon from "./icon";
+import mapIcon from "../../../utils/weather/condition-map";
 
 function Widget({ options }) {
   const { t, i18n } = useTranslation();
@@ -33,10 +32,8 @@ function Widget({ options }) {
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
-  const weatherInfo = {
-    condition: data.current.condition.code,
-    timeOfDay: data.current.is_day ? "day" : "night",
-  };
+  const condition = data.current.condition.code;
+  const timeOfDay = data.current.is_day ? "day" : "night";
 
   return <Container options={options}>
     <PrimaryText>
@@ -48,7 +45,7 @@ function Widget({ options }) {
       })}
     </PrimaryText>
     <SecondaryText>{data.current.condition.text}</SecondaryText>
-    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+    <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
   </Container>;
 }
 

src/components/widgets/widget/widget_icon.jsx

@@ -1,6 +1,5 @@
-export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
+export default function WidgetIcon({ icon, size = "s", pulse = false }) {
   const Icon = icon;
-  const { condition, timeOfDay } = weatherInfo;
   let additionalClasses = "text-theme-800 dark:text-theme-200 ";
 
   switch (size) {
@@ -14,5 +13,5 @@ export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInf
     additionalClasses += "animate-pulse ";
   }
 
-  return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
+  return <Icon className={additionalClasses} />;
 }