From 6f0a25926831a8ad2d26ad1cae14fa75523eb3d1 Mon Sep 17 00:00:00 2001
From: Ishan Parlikar <iparlika@emich.edu>
Date: Sat, 29 Jul 2023 22:22:59 +0530
Subject: [PATCH] added icon size and gap changes when tile is small

---
 src/widgets/weather/WeatherIcon.tsx | 9 ++++++---
 src/widgets/weather/WeatherTile.tsx | 8 ++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/widgets/weather/WeatherIcon.tsx b/src/widgets/weather/WeatherIcon.tsx
index c55c8a4c9..f44b20a73 100644
--- a/src/widgets/weather/WeatherIcon.tsx
+++ b/src/widgets/weather/WeatherIcon.tsx
@@ -11,9 +11,11 @@ import {
   Icon,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { useElementSize } from '@mantine/hooks';
 
 interface WeatherIconProps {
   code: number;
+  size?: number;
 }
 
 /**
@@ -21,16 +23,17 @@ interface WeatherIconProps {
  * @param code weather code from api
  * @returns weather tile component
  */
-export const WeatherIcon = ({ code }: WeatherIconProps) => {
+export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
   const { t } = useTranslation('modules/weather');
-
+  const { width, ref } = useElementSize();
+  
   const { icon: Icon, name } =
     weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather;
 
   return (
     <Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
       <Box>
-        <Icon style={{ float: 'left' }} size={50} />
+        <Icon style={{ float: 'left' }} size={size} />
       </Box>
     </Tooltip>
   );
diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx
index 861d3e6a2..4d603903b 100644
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -85,14 +85,14 @@ function WeatherTile({ widget }: WeatherTileProps) {
   return (
     <Stack
       ref={ref}
-      spacing="xs"
+      spacing={width<120 ? "0.25rem" : "xs"}
       justify="space-around"
       align="center"
       style={{ height: '100%', width: '100%' }}
     >
-      <Flex align="center" gap={'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
-        <WeatherIcon code={weather.current_weather.weathercode} />
-        <Title size={width < 200 ? '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={width < 300 ? 'h4' : 'h2'}>
           {getPerferedUnit(
             weather.current_weather.temperature,
             widget.properties.displayInFahrenheit