rename classes

components/ContentBox.js

@@ -1,7 +1,7 @@
 import styles from "./ContentBox.module.css";
 
 const ContentBox = ({ children }) => {
-  return <div className={styles.statsWrapper}>{children}</div>;
+  return <div className={styles.wrapper}>{children}</div>;
 };
 
 export default ContentBox;

components/ContentBox.module.css

@@ -1,4 +1,4 @@
-.statsWrapper {
+.wrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
   text-align: right;
@@ -6,7 +6,7 @@
 }
 
 @media only screen and (max-width: 950px) {
-  .statsWrapper {
+  .wrapper {
     border-radius: 0;
   }
 }

components/Header.js

@@ -1,7 +1,7 @@
 import styles from "./Header.module.css";
 
 const Header = ({ children }) => {
-  return <div className={styles.titleAndSearch}>{children}</div>;
+  return <div className={styles.wrapper}>{children}</div>;
 };
 
 export default Header;

components/Header.module.css

@@ -1,11 +1,11 @@
-.titleAndSearch {
+.wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;
 }
 
 @media only screen and (max-width: 520px) {
-  .titleAndSearch {
+  .wrapper {
     grid-template-columns: 1fr;
     place-items: center;
   }

components/MainCard.js

@@ -13,12 +13,12 @@ const MainCard = ({
   weatherData,
 }) => {
   return (
-    <div className={styles.weatherWrapper}>
-      <h1 className={styles.locationTitle}>
+    <div className={styles.wrapper}>
+      <h1 className={styles.location}>
         {city}, {country}
       </h1>
 
-      <p className={styles.weatherDescription}>{description}</p>
+      <p className={styles.description}>{description}</p>
 
       <Image
         alt="weatherIcon"

components/MainCard.module.css

@@ -1,13 +1,13 @@
-.weatherWrapper {
+.wrapper {
   padding: 30px;
 }
 
-.locationTitle {
+.location {
   font-size: 38px;
   margin-bottom: 10px;
 }
 
-.weatherDescription {
+.description {
   font-size: 24px;
   margin-bottom: 20px;
 }

components/Search.js

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

components/Search.module.css

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