From d35667fab26dad1e35f6a28b3bd536b3e3e56a7d Mon Sep 17 00:00:00 2001
From: Ishan Parlikar <iparlika@emich.edu>
Date: Tue, 18 Jul 2023 23:53:11 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20display=20location=20name=20on=20a?=
 =?UTF-8?q?=20weather=20tile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/modules/weather.json |  3 +++
 src/widgets/weather/WeatherTile.tsx    | 28 +++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/public/locales/en/modules/weather.json b/public/locales/en/modules/weather.json
index 791f80897..16b034320 100644
--- a/public/locales/en/modules/weather.json
+++ b/public/locales/en/modules/weather.json
@@ -7,6 +7,9 @@
       "displayInFahrenheit": {
         "label": "Display in Fahrenheit"
       },
+      "displayCityName":{
+        "label":"Display City Name"
+      },
       "location": {
         "label": "Weather location"
       }
diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx
index 5f0440284..a16e3d49c 100644
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -1,7 +1,13 @@
-import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Center, Flex, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons-react';
+import {
+  IconArrowDownRight,
+  IconArrowUpRight,
+  IconCloudRain,
+  IconCurrentLocation,
+} from '@tabler/icons-react';
 import { api } from '~/utils/api';
+
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { WeatherIcon } from './WeatherIcon';
@@ -14,6 +20,10 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: false,
     },
+    displayCityName: {
+      type: 'switch',
+      defaultValue: false,
+    },
     location: {
       type: 'location',
       defaultValue: {
@@ -80,15 +90,16 @@ function WeatherTile({ widget }: WeatherTileProps) {
       align="center"
       style={{ height: '100%', width: '100%' }}
     >
-      <Group align="center" position="center" spacing="xs">
+      <Flex align="center" gap={'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
         <WeatherIcon code={weather.current_weather.weathercode} />
-        <Title>
+        <Title size={width < 200 ? 'h4' : 'h2'}>
           {getPerferedUnit(
             weather.current_weather.temperature,
             widget.properties.displayInFahrenheit
           )}
         </Title>
-      </Group>
+      </Flex>
+
       {width > 200 && (
         <Group noWrap spacing="xs">
           <IconArrowUpRight />
@@ -103,6 +114,13 @@ function WeatherTile({ widget }: WeatherTileProps) {
           )}
         </Group>
       )}
+
+      {widget.properties.displayCityName && (
+        <Group noWrap spacing="5px" align="center">
+          <IconCurrentLocation height={15} width={15} />
+          <Text style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text>
+        </Group>
+      )}
     </Stack>
   );
 }