From cc16c1c5fa29c6056262ac3bf2d67d636fcc49e6 Mon Sep 17 00:00:00 2001
From: Georgi Gardev <georgi@gar.dev>
Date: Sat, 18 Nov 2023 17:50:36 +0200
Subject: [PATCH] Make weather black

---
 src/components/ui/Box.module.css          | 7 ++++---
 src/components/ui/Box.tsx                 | 9 +--------
 src/components/widgets/Weather.module.css | 5 ++++-
 src/components/widgets/Weather.tsx        | 5 ++---
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/Box.module.css b/src/components/ui/Box.module.css
index 3735689..7f97660 100644
--- a/src/components/ui/Box.module.css
+++ b/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);
 }
diff --git a/src/components/ui/Box.tsx b/src/components/ui/Box.tsx
index 331e42d..c5c7bf2 100644
--- a/src/components/ui/Box.tsx
+++ b/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
-      classList={{
-        [props.className ?? '']: Boolean(props.className),
-        [style.Box]: true,
-        [style.Hoverable]: !props.disableHover,
-      }}
-    >
+    <div classList={{ [props.className ?? '']: Boolean(props.className), [style.Box]: true }}>
       {props.children}
     </div>
   );
diff --git a/src/components/widgets/Weather.module.css b/src/components/widgets/Weather.module.css
index 28bd256..af0ca4a 100644
--- a/src/components/widgets/Weather.module.css
+++ b/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;
 }
diff --git a/src/components/widgets/Weather.tsx b/src/components/widgets/Weather.tsx
index 7e9986e..625848c 100644
--- a/src/components/widgets/Weather.tsx
+++ b/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>
   );
 }