css cleanup

components/ContentBox.module.css

@@ -1,5 +1,4 @@
 .wrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
-  text-align: right;
 }

components/DateAndTime.js

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

components/DateAndTime.module.css

@@ -1,3 +0,0 @@
-.title {
-  text-align: left;
-}

components/ErrorScreen.module.css

@@ -1,6 +1,4 @@
 .wrapper {
-  display: grid;
-  place-items: center;
   max-width: 260px;
   text-align: center;
 }

components/Header.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;
+  margin-bottom: 20px;
 }
 
 @media only screen and (max-width: 520px) {

components/LoadingScreen.js

@@ -1,9 +1 @@
-import styles from "./LoadingScreen.module.css";
-
-export const LoadingScreen = ({ loadingMessage }) => {
-  return (
-    <div className={styles.wrapper}>
-      <h1>{loadingMessage}</h1>
-    </div>
-  );
-};
+export const LoadingScreen = ({ loadingMessage }) => <h1>{loadingMessage}</h1>;

components/LoadingScreen.module.css

@@ -1,5 +0,0 @@
-.wrapper {
-  display: grid;
-  place-items: center;
-  max-width: 260px;
-}

components/MetricsCard.module.css

@@ -1,6 +1,7 @@
 .wrapper {
   background: rgba(255, 255, 255, 0.95);
   padding: 20px;
+  text-align: right;
   border-radius: 20px;
 }
 

components/Search.module.css

@@ -1,14 +1,12 @@
 .search {
   height: 40px;
-  margin-bottom: 20px;
-  border: none;
-  padding: 0 10px;
-  color: #303030;
-  font-size: 20px;
-  text-align: right;
-  border-radius: 10px;
-  font-family: "Varela Round", sans-serif;
   font-size: 18px;
+  font-family: "Varela Round", sans-serif;
+  color: #303030;
+  text-align: right;
+  padding: 0 10px;
+  border: none;
+  border-radius: 10px;
 }
 
 @media only screen and (max-width: 520px) {