From 4f948021dd154b697272fb1d7dcd1197d8a1a808 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 3 Jan 2023 20:15:07 +0900
Subject: [PATCH] Weather widget styling

---
 src/widgets/weather/WeatherIcon.tsx |  2 +-
 src/widgets/weather/WeatherTile.tsx | 59 +++++++++++++----------------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/widgets/weather/WeatherIcon.tsx b/src/widgets/weather/WeatherIcon.tsx
index aa8ef02cb..2a845b48e 100644
--- a/src/widgets/weather/WeatherIcon.tsx
+++ b/src/widgets/weather/WeatherIcon.tsx
@@ -30,7 +30,7 @@ export const WeatherIcon = ({ code }: WeatherIconProps) => {
   return (
     <Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
       <Box>
-        <Icon size={50} />
+        <Icon style={{ float: 'left' }} size={50} />
       </Box>
     </Tooltip>
   );
diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx
index 118e1a584..677d4bd6c 100644
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -19,7 +19,7 @@ const definition = defineWidget({
     },
   },
   gridstack: {
-    minWidth: 4,
+    minWidth: 2,
     minHeight: 2,
     maxWidth: 12,
     maxHeight: 12,
@@ -61,39 +61,34 @@ function WeatherTile({ widget }: WeatherTileProps) {
 
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
-    <Center style={{ height: '100%' }}>
-      <Group spacing="md" noWrap align="center">
+    <Stack
+      spacing="xs"
+      justify="space-around"
+      align="center"
+      style={{ height: '100%', width: '100%' }}
+    >
+      <Group grow>
         <WeatherIcon code={weather!.current_weather.weathercode} />
-        <Stack p={0} spacing={4}>
-          <Title order={2}>
-            {getPerferedUnit(
-              weather!.current_weather.temperature,
-              widget.properties.displayInFahrenheit
-            )}
-          </Title>
-          <Group spacing="xs" noWrap>
-            <div>
-              <span>
-                {getPerferedUnit(
-                  weather!.daily.temperature_2m_max[0],
-                  widget.properties.displayInFahrenheit
-                )}
-              </span>
-              <IconArrowUpRight size={16} style={{ right: 15 }} />
-            </div>
-            <div>
-              <span>
-                {getPerferedUnit(
-                  weather!.daily.temperature_2m_min[0],
-                  widget.properties.displayInFahrenheit
-                )}
-              </span>
-              <IconArrowDownRight size={16} />
-            </div>
-          </Group>
-        </Stack>
+        <Title order={2}>
+          {getPerferedUnit(
+            weather!.current_weather.temperature,
+            widget.properties.displayInFahrenheit
+          )}
+        </Title>
       </Group>
-    </Center>
+      <Group noWrap spacing="xs">
+        <IconArrowUpRight />
+        {getPerferedUnit(
+          weather!.daily.temperature_2m_max[0],
+          widget.properties.displayInFahrenheit
+        )}
+        <IconArrowDownRight />
+        {getPerferedUnit(
+          weather!.daily.temperature_2m_min[0],
+          widget.properties.displayInFahrenheit
+        )}
+      </Group>
+    </Stack>
   );
 }