From 1dced10ce7f8f3d7a51e3903af86a0c2d7ebd1c9 Mon Sep 17 00:00:00 2001
From: madarsbiss <madars.biss@gmail.com>
Date: Thu, 23 Sep 2021 13:40:17 +0300
Subject: [PATCH] edit cards and switch

---
 .vscode/settings.json             |  4 ++++
 components/MainCard.js            |  3 ++-
 components/MainCard.module.css    |  5 -----
 components/MetricsCard.js         |  2 +-
 components/MetricsCard.module.css |  5 -----
 components/UnitSwitch.js          | 10 ++++++----
 components/UnitSwitch.module.css  |  8 ++++++++
 7 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9bf4d12
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
diff --git a/components/MainCard.js b/components/MainCard.js
index cd5c976..849a926 100644
--- a/components/MainCard.js
+++ b/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"
       />
diff --git a/components/MainCard.module.css b/components/MainCard.module.css
index b0eef1f..42d54d1 100644
--- a/components/MainCard.module.css
+++ b/components/MainCard.module.css
@@ -13,11 +13,6 @@
   margin-bottom: 20px;
 }
 
-.image {
-  width: 300px;
-  height: 300px;
-}
-
 .temperature {
   font-size: 84px;
 }
diff --git a/components/MetricsCard.js b/components/MetricsCard.js
index 37e2f90..64804aa 100644
--- a/components/MetricsCard.js
+++ b/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>
diff --git a/components/MetricsCard.module.css b/components/MetricsCard.module.css
index f5d3d2d..7161eff 100644
--- a/components/MetricsCard.module.css
+++ b/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;
diff --git a/components/UnitSwitch.js b/components/UnitSwitch.js
index bcb74d4..f2b8ccf 100644
--- a/components/UnitSwitch.js
+++ b/components/UnitSwitch.js
@@ -4,15 +4,17 @@ export const UnitSwitch = ({ onClick, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <p
-        className={styles.switch}
-        style={{ color: systemUsed == "metric" ? "green" : "black" }}
+        className={`${styles.switch} ${
+          systemUsed == "metric" ? styles.active : styles.inactive
+        }`}
         onClick={onClick}
       >
         Metric System
       </p>
       <p
-        className={styles.switch}
-        style={{ color: systemUsed == "metric" ? "black" : "green" }}
+        className={`${styles.switch} ${
+          systemUsed == "metric" ? styles.inactive : styles.active
+        }`}
         onClick={onClick}
       >
         Imperial System
diff --git a/components/UnitSwitch.module.css b/components/UnitSwitch.module.css
index 02dffdc..97931bc 100644
--- a/components/UnitSwitch.module.css
+++ b/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;