rename classes

components/ContentBox.module.css

@@ -2,7 +2,8 @@
   background-color: rgb(247, 247, 247);
   padding: 30px;
   text-align: right;
-  border-radius: 0 30px 30px 0;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
 }
 
 @media only screen and (max-width: 950px) {

components/MetricsBox.js

@@ -11,7 +11,7 @@ import styles from "./MetricsBox.module.css";
 
 const MetricsBox = ({ data, systemUsed }) => {
   return (
-    <div className={styles.statsBox}>
+    <div className={styles.wrapper}>
       <MetricCard
         title={"Humidity"}
         iconSrc={"/icons/humidity.png"}

components/MetricsBox.module.css

@@ -1,19 +1,18 @@
-.statsBox {
+.wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
-  border-radius: 20px;
   margin-bottom: 20px;
 }
 
 @media only screen and (max-width: 600px) {
-  .statsBox {
+  .wrapper {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media only screen and (max-width: 475px) {
-  .statsBox {
+  .wrapper {
     grid-template-columns: 1fr;
   }
 }

components/MetricsCard.js

@@ -4,9 +4,9 @@ import styles from "./MetricsCard.module.css";
 
 const MetricsCard = ({ title, iconSrc, metric, unit }) => {
   return (
-    <div className={styles.statsCard}>
+    <div className={styles.wrapper}>
       <p>{title}</p>
-      <div className={styles.statsCardContent}>
+      <div className={styles.content}>
         <Image alt="weatherIcon" src={iconSrc} height="100px" width="100px" />
         <div>
           <h1>{metric}</h1>

components/MetricsCard.module.css

@@ -1,16 +1,16 @@
-.statsCard {
+.wrapper {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   padding: 20px;
 }
 
-.statsCardContent {
+.content {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
 
 @media only screen and (max-width: 475px) {
-  .statsCardContent {
+  .content {
     grid-template-columns: 1fr 2fr;
   }
 }

components/Search.js

@@ -3,7 +3,7 @@ import styles from "./Search.module.css";
 const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
   return (
     <input
-      className={styles.input}
+      className={styles.search}
       type="text"
       placeholder={placeHolder}
       value={value}

components/Search.module.css

@@ -1,4 +1,4 @@
-.input {
+.search {
   margin-bottom: 20px;
   height: 40px;
   border: none;
@@ -12,7 +12,7 @@
 }
 
 @media only screen and (max-width: 520px) {
-  .input {
+  .search {
     width: 100%;
   }
 }