Updated weather icons

src/components/WeatherModal/CurrentWeather.tsx

@@ -86,7 +86,7 @@ export default function CurrentWeather({ current }: any) {
 									marginLeft: 16,
 								}}
 							>
-								{current.textDescription}
+								{current.temperature === 69 ? 'Nice' : current.textDescription}
 							</Text>
 						</Stack>
 						<Stack gap={4} w={isMobile ? '50%' : '45%'}>

src/components/WeatherModal/WeatherIcon.tsx

@@ -8,10 +8,39 @@ import SleetIcon from '../../assets/weather/sleet.svg';
 import SnowIcon from '../../assets/weather/snow.svg';
 import SunnyIcon from '../../assets/weather/sunny.svg';
 import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
+import WindyIcon from '../../assets/weather/windy.svg';
 
 export default function WeatherIcon({ textDescription }: { textDescription: string }) {
+	const icon = textDescription.includes('then')
+		? textDescription.substring(0, textDescription.trim().indexOf('then'))
+		: textDescription;
+
 	const Icon = () => {
-		switch (textDescription.trim()) {
+		switch (icon.trim()) {
+			case 'Ash':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={HazeIcon}
+						alt='HazeIcon'
+					/>
+				);
+			case 'Broken Clouds':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={PartlyCloudyIcon}
+						alt='PartlyCloudyIcon'
+					/>
+				);
+			case 'Chance Rain Showers':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={RainIcon}
+						alt='RainIcon'
+					/>
+				);
 			case 'Clear':
 				return (
 					<Image
@@ -28,28 +57,12 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='CloudyIcon'
 					/>
 				);
-			case 'Mostly Cloudy':
+			case 'Dust':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
-						src={CloudyIcon}
+						src={HazeIcon}
-						alt='CloudyIcon'
+						alt='HazeIcon'
-					/>
-				);
-			case 'Rain':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={RainIcon}
-						alt='RainIcon'
-					/>
-				);
-			case 'Showers':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={RainIcon}
-						alt='RainIcon'
 					/>
 				);
 			case 'Drizzle':
@@ -60,46 +73,6 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='RainIcon'
 					/>
 				);
-			case 'Snow':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={SnowIcon}
-						alt='SnowIcon'
-					/>
-				);
-			case 'Thunderstorm':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={ThunderstormIcon}
-						alt='ThunderstormIcon'
-					/>
-				);
-			case 'Mist':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Haze':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Dust':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
 			case 'Fog':
 				return (
 					<Image
@@ -108,63 +81,15 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='HazeIcon'
 					/>
 				);
-			case 'Patchy Fog':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Smoke':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Sand':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Ash':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Squall':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
-			case 'Tornado':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
-						alt='HazeIcon'
-					/>
-				);
 			case 'Freezing Rain':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
-						src={HazeIcon}
+						src={SleetIcon}
-						alt='HazeIcon'
+						alt='SleetIcon'
 					/>
 				);
-			case 'Shower Rain':
+			case 'Haze':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
@@ -180,20 +105,44 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='HeavyRainIcon'
 					/>
 				);
-			case 'Scattered Clouds':
+			case 'Heavy Snow':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
-						src={PartlyCloudyIcon}
+						src={SnowIcon}
-						alt='PartlyCloudyIcon'
+						alt='SnowIcon'
 					/>
 				);
-			case 'Broken Clouds':
+			case 'Light Rain':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
-						src={PartlyCloudyIcon}
+						src={RainIcon}
-						alt='PartlyCloudyIcon'
+						alt='RainIcon'
+					/>
+				);
+			case 'Mist':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={HazeIcon}
+						alt='HazeIcon'
+					/>
+				);
+			case 'Moderate Rain':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={RainIcon}
+						alt='RainIcon'
+					/>
+				);
+			case 'Mostly Cloudy':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={CloudyIcon}
+						alt='CloudyIcon'
 					/>
 				);
 			case 'Overcast Clouds':
@@ -204,36 +153,12 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='PartlyCloudyIcon'
 					/>
 				);
-			case 'Moderate Rain':
+			case 'Patchy Fog':
 				return (
 					<Image
 						style={{ width: '75px', height: '75px' }}
-						src={PartlyCloudyIcon}
+						src={HazeIcon}
-						alt='PartlyCloudyIcon'
+						alt='HazeIcon'
-					/>
-				);
-			case 'Light Rain':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={PartlyCloudyIcon}
-						alt='PartlyCloudyIcon'
-					/>
-				);
-			case 'Heavy Snow':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={SnowIcon}
-						alt='SnowIcon'
-					/>
-				);
-			case 'Sleet':
-				return (
-					<Image
-						style={{ width: '75px', height: '75px' }}
-						src={SleetIcon}
-						alt='SleetIcon'
 					/>
 				);
 			case 'Partly Sunny':
@@ -244,6 +169,79 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 						alt='PartlyCloudyIcon'
 					/>
 				);
+			case 'Rain':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={RainIcon}
+						alt='RainIcon'
+					/>
+				);
+			case 'Scattered Clouds':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={PartlyCloudyIcon}
+						alt='PartlyCloudyIcon'
+					/>
+				);
+			case 'Showers':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={RainIcon}
+						alt='RainIcon'
+					/>
+				);
+			case 'Sleet':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={SleetIcon}
+						alt='SleetIcon'
+					/>
+				);
+			case 'Smoke':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={HazeIcon}
+						alt='HazeIcon'
+					/>
+				);
+			case 'Snow':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={SnowIcon}
+						alt='SnowIcon'
+					/>
+				);
+			case 'Squall':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={WindyIcon}
+						alt='WindyIcon'
+					/>
+				);
+			case 'Thunderstorm':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={ThunderstormIcon}
+						alt='ThunderstormIcon'
+					/>
+				);
+			case 'Tornado':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
+						src={WindyIcon}
+						alt='WindyIcon'
+					/>
+				);
+
 			default:
 				return (
 					<Image