Make weather black

src/components/ui/Box.module.css

@@ -1,11 +1,12 @@
 .Box {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.75);
   backdrop-filter: blur(10px);
-  color: #bbb;
+  color: #333;
+  border-radius: 1rem;
 
   transition: background-color 0.2s ease-in-out;
 }
 
-.Hoverable:hover, .Hoverable:focus-within {
+.Box:hover, .Box:focus-within {
   background-color: rgba(255, 255, 255, 1);
 }

src/components/ui/Box.tsx

@@ -5,18 +5,11 @@ import style from './Box.module.css';
 type BoxProps = {
   children: JSX.Element;
   className?: string;
-  disableHover?: boolean;
 };
 
 export function Box(props: BoxProps) {
   return (
-    <div
+    <div classList={{ [props.className ?? '']: Boolean(props.className), [style.Box]: true }}>
-      classList={{
-        [props.className ?? '']: Boolean(props.className),
-        [style.Box]: true,
-        [style.Hoverable]: !props.disableHover,
-      }}
-    >
       {props.children}
     </div>
   );

src/components/widgets/Weather.module.css

@@ -7,6 +7,9 @@
   display: flex;
   flex-direction: column;
   gap: .5rem;
+
+  backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .FeelsLike {
@@ -24,7 +27,7 @@
 }
 
 .Delimiter {
-  border-bottom: 1px solid #bbb ;
+  border-bottom: 1px solid #bbb;
   padding-bottom: 1.2rem;
   margin-bottom: .8rem;
 }

src/components/widgets/Weather.tsx

@@ -5,7 +5,6 @@ import { createWeather } from '~/api/open-weather';
 import { getTime } from '~/lib/date';
 
 import style from './Weather.module.css';
-import { Box } from '../ui/Box';
 
 export function Weather() {
   const weather = createWeather();
@@ -14,7 +13,7 @@ export function Weather() {
   const sunset = createMemo(() => getTime((weather()?.sunset ?? 0) * 1000));
 
   return (
-    <Box className={style.Weather} disableHover>
+    <div class={style.Weather}>
       {weather() ? (
         <>
           <div class={`${style.WeatherLine} ${style.Delimiter}`}>
@@ -40,6 +39,6 @@ export function Weather() {
       ) : (
         'Loading'
       )}
-    </Box>
+    </div>
   );
 }