From 0331d20a42a6b7d91d8011d85473655861b9c0fe Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 8 Aug 2023 09:46:10 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20padding=20in=20`WeatherTil?=
 =?UTF-8?q?e`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/weather/WeatherTile.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx
index 4d603903b..a4443d7cd 100644
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -5,6 +5,7 @@ import {
   IconArrowUpRight,
   IconCloudRain,
   IconCurrentLocation,
+  IconMapPin,
 } from '@tabler/icons-react';
 import { api } from '~/utils/api';
 
@@ -84,15 +85,20 @@ function WeatherTile({ widget }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <Stack
-      ref={ref}
-      spacing={width<120 ? "0.25rem" : "xs"}
-      justify="space-around"
-      align="center"
       style={{ height: '100%', width: '100%' }}
+      justify="space-around"
+      ref={ref}
+      spacing={0}
+      align="center"
     >
-      <Flex align="center" gap={width<120 ? '0.25rem' : 'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
-        <WeatherIcon size={width<300 ? 30 : 50} code={weather.current_weather.weathercode} />
-        <Title size={width < 300 ? 'h4' : 'h2'}>
+      <Flex
+        align="center"
+        gap={width < 120 ? '0.25rem' : 'xs'}
+        justify={'center'}
+        direction={width < 200 ? 'column' : 'row'}
+      >
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title size={'h2'}>
           {getPerferedUnit(
             weather.current_weather.temperature,
             widget.properties.displayInFahrenheit
@@ -116,9 +122,9 @@ function WeatherTile({ widget }: WeatherTileProps) {
       )}
 
       {widget.properties.displayCityName && (
-        <Group noWrap spacing="5px" align="center">
-          <IconCurrentLocation height={15} width={15} />
-          <Text color='dimmed' style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text>
+        <Group noWrap spacing={5} align="center">
+          <IconMapPin height={15} width={15} />
+          <Text style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text>
         </Group>
       )}
     </Stack>