edit var names

components/DateAndTime.js

@@ -1,15 +1,15 @@
 import { getWeekDay, getTime, getAMPM } from "../services/helpers";
 import styles from "./DateAndTime.module.css";
 
-export const DateAndTime = ({ weatherData, systemUsed }) => {
+export const DateAndTime = ({ weatherData, unitSystem }) => {
   return (
     <div className={styles.wrapper}>
       <h2>
         {`${getWeekDay(weatherData)}, ${getTime(
-          systemUsed,
+          unitSystem,
           weatherData.dt,
           weatherData.timezone
-        )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
+        )} ${getAMPM(unitSystem, weatherData.dt, weatherData.timezone)}`}
       </h2>
     </div>
   );

components/MainCard.js

@@ -7,7 +7,7 @@ export const MainCard = ({
   country,
   description,
   iconName,
-  systemUsed,
+  unitSystem,
   weatherData,
 }) => {
   return (
@@ -23,17 +23,17 @@ export const MainCard = ({
         alt="weatherIcon"
       />
       <h1 className={styles.temperature}>
-        {systemUsed == "metric"
+        {unitSystem == "metric"
           ? Math.round(weatherData.main.temp)
           : Math.round(ctoF(weatherData.main.temp))}
-        °{systemUsed == "metric" ? "C" : "F"}
+        °{unitSystem == "metric" ? "C" : "F"}
       </h1>
       <p>
         Feels like{" "}
-        {systemUsed == "metric"
+        {unitSystem == "metric"
           ? Math.round(weatherData.main.feels_like)
           : Math.round(ctoF(weatherData.main.feels_like))}
-        °{systemUsed == "metric" ? "C" : "F"}
+        °{unitSystem == "metric" ? "C" : "F"}
       </p>
     </div>
   );

components/MetricsBox.js

@@ -8,7 +8,7 @@ import {
 import { MetricsCard } from "./MetricsCard";
 import styles from "./MetricsBox.module.css";
 
-export const MetricsBox = ({ weatherData, systemUsed }) => {
+export const MetricsBox = ({ weatherData, unitSystem }) => {
   return (
     <div className={styles.wrapper}>
       <MetricsCard
@@ -20,8 +20,8 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
       <MetricsCard
         title={"Wind speed"}
         iconSrc={"/icons/wind.png"}
-        metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
-        unit={systemUsed == "metric" ? "m/s" : "m/h"}
+        metric={getWindSpeed(unitSystem, weatherData.wind.speed)}
+        unit={unitSystem == "metric" ? "m/s" : "m/h"}
       />
       <MetricsCard
         title={"Wind direction"}
@@ -31,19 +31,19 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
       <MetricsCard
         title={"Visibility"}
         iconSrc={"/icons/binocular.png"}
-        metric={getVisibility(systemUsed, weatherData.visibility)}
-        unit={systemUsed == "metric" ? "km" : "miles"}
+        metric={getVisibility(unitSystem, weatherData.visibility)}
+        unit={unitSystem == "metric" ? "km" : "miles"}
       />
       <MetricsCard
         title={"Sunrise"}
         iconSrc={"/icons/sunrise.png"}
         metric={getTime(
-          systemUsed,
+          unitSystem,
           weatherData.sys.sunrise,
           weatherData.timezone
         )}
         unit={getAMPM(
-          systemUsed,
+          unitSystem,
           weatherData.sys.sunrise,
           weatherData.timezone
         )}
@@ -52,11 +52,11 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
         title={"Sunset"}
         iconSrc={"/icons/sunset.png"}
         metric={getTime(
-          systemUsed,
+          unitSystem,
           weatherData.sys.sunset,
           weatherData.timezone
         )}
-        unit={getAMPM(systemUsed, weatherData.sys.sunset, weatherData.timezone)}
+        unit={getAMPM(unitSystem, weatherData.sys.sunset, weatherData.timezone)}
       />
     </div>
   );

components/UnitSwitch.js

@@ -1,11 +1,11 @@
 import styles from "./UnitSwitch.module.css";
 
-export const UnitSwitch = ({ onClick, systemUsed }) => {
+export const UnitSwitch = ({ onClick, unitSystem }) => {
   return (
     <div className={styles.wrapper}>
       <p
         className={`${styles.switch} ${
-          systemUsed == "metric" ? styles.active : styles.inactive
+          unitSystem == "metric" ? styles.active : styles.inactive
         }`}
         onClick={onClick}
       >
@@ -13,7 +13,7 @@ export const UnitSwitch = ({ onClick, systemUsed }) => {
       </p>
       <p
         className={`${styles.switch} ${
-          systemUsed == "metric" ? styles.inactive : styles.active
+          unitSystem == "metric" ? styles.inactive : styles.active
         }`}
         onClick={onClick}
       >