edit cards and switch

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

components/MainCard.js

@@ -17,7 +17,8 @@ export const MainCard = ({
       </h1>
       <p className={styles.description}>{description}</p>
       <Image
-        className={styles.image}
+        width="300px"
+        height="300px"
         src={`/icons/${iconName}.svg`}
         alt="weatherIcon"
       />

components/MainCard.module.css

@@ -13,11 +13,6 @@
   margin-bottom: 20px;
 }
 
-.image {
-  width: 300px;
-  height: 300px;
-}
-
 .temperature {
   font-size: 84px;
 }

components/MetricsCard.js

@@ -6,7 +6,7 @@ export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
     <div className={styles.wrapper}>
       <p>{title}</p>
       <div className={styles.content}>
-        <Image className={styles.image} src={iconSrc} alt="weatherIcon" />
+        <Image width="100px" height="100px" src={iconSrc} alt="weatherIcon" />
         <div>
           <h1>{metric}</h1>
           <p>{unit}</p>

components/MetricsCard.module.css

@@ -9,11 +9,6 @@
   grid-template-columns: 1fr 1fr;
 }
 
-.image {
-  height: 100px;
-  width: 100px;
-}
-
 @media only screen and (max-width: 475px) {
   .content {
     grid-template-columns: 1fr 2fr;

components/UnitSwitch.js

@@ -4,15 +4,17 @@ export const UnitSwitch = ({ onClick, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <p
-        className={styles.switch}
+        className={`${styles.switch} ${
-        style={{ color: systemUsed == "metric" ? "green" : "black" }}
+          systemUsed == "metric" ? styles.active : styles.inactive
+        }`}
         onClick={onClick}
       >
         Metric System
       </p>
       <p
-        className={styles.switch}
+        className={`${styles.switch} ${
-        style={{ color: systemUsed == "metric" ? "black" : "green" }}
+          systemUsed == "metric" ? styles.inactive : styles.active
+        }`}
         onClick={onClick}
       >
         Imperial System

components/UnitSwitch.module.css

@@ -8,6 +8,14 @@
   cursor: pointer;
 }
 
+.active {
+  color: green;
+}
+
+.inactive {
+  color: black;
+}
+
 @media only screen and (max-width: 475px) {
   .wrapper {
     text-align: center;