From d1574e092256b8238d9f57b4fd8fab9f52b1526a Mon Sep 17 00:00:00 2001
From: madarsbiss <madars.biss@gmail.com>
Date: Thu, 23 Sep 2021 14:13:30 +0300
Subject: [PATCH] css cleanup

---
 components/ContentBox.module.css    |  1 -
 components/DateAndTime.js           | 21 +++++++++------------
 components/DateAndTime.module.css   |  3 ---
 components/ErrorScreen.module.css   |  2 --
 components/Header.module.css        |  1 +
 components/LoadingScreen.js         | 10 +---------
 components/LoadingScreen.module.css |  5 -----
 components/MetricsCard.module.css   |  1 +
 components/Search.module.css        | 14 ++++++--------
 9 files changed, 18 insertions(+), 40 deletions(-)
 delete mode 100644 components/DateAndTime.module.css
 delete mode 100644 components/LoadingScreen.module.css

diff --git a/components/ContentBox.module.css b/components/ContentBox.module.css
index 64cccb9..809f281 100644
--- a/components/ContentBox.module.css
+++ b/components/ContentBox.module.css
@@ -1,5 +1,4 @@
 .wrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
-  text-align: right;
 }
diff --git a/components/DateAndTime.js b/components/DateAndTime.js
index 8c6deb9..cb98fb3 100644
--- a/components/DateAndTime.js
+++ b/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>
+);
diff --git a/components/DateAndTime.module.css b/components/DateAndTime.module.css
deleted file mode 100644
index 9c1be68..0000000
--- a/components/DateAndTime.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.title {
-  text-align: left;
-}
diff --git a/components/ErrorScreen.module.css b/components/ErrorScreen.module.css
index 5bd07b2..dd9668b 100644
--- a/components/ErrorScreen.module.css
+++ b/components/ErrorScreen.module.css
@@ -1,6 +1,4 @@
 .wrapper {
-  display: grid;
-  place-items: center;
   max-width: 260px;
   text-align: center;
 }
diff --git a/components/Header.module.css b/components/Header.module.css
index 4d2463c..dafc8b7 100644
--- a/components/Header.module.css
+++ b/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) {
diff --git a/components/LoadingScreen.js b/components/LoadingScreen.js
index ed80ef1..98e77e8 100644
--- a/components/LoadingScreen.js
+++ b/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>;
diff --git a/components/LoadingScreen.module.css b/components/LoadingScreen.module.css
deleted file mode 100644
index a34fe02..0000000
--- a/components/LoadingScreen.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: grid;
-  place-items: center;
-  max-width: 260px;
-}
diff --git a/components/MetricsCard.module.css b/components/MetricsCard.module.css
index 7161eff..c5a54cf 100644
--- a/components/MetricsCard.module.css
+++ b/components/MetricsCard.module.css
@@ -1,6 +1,7 @@
 .wrapper {
   background: rgba(255, 255, 255, 0.95);
   padding: 20px;
+  text-align: right;
   border-radius: 20px;
 }
 
diff --git a/components/Search.module.css b/components/Search.module.css
index 7289e01..cd1d4f0 100644
--- a/components/Search.module.css
+++ b/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) {