From dc2f2f75da53c6566c632bf0253c847ff9d05be3 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 8 May 2022 15:54:54 +0100
Subject: [PATCH] Fix main card styles

---
 src/pages/Home/styles.ts   | 68 ++++++++++++++++++++------------------
 src/pages/Search/styles.ts | 68 ++++++++++++++++++++------------------
 2 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts
index c13c3ca..56dbb5c 100644
--- a/src/pages/Home/styles.ts
+++ b/src/pages/Home/styles.ts
@@ -1,43 +1,45 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-	min-height: 85vh;
-	padding: 2rem 0rem;
-	display: grid;
-	row-gap: 3rem;
+  min-height: 85vh;
+  padding: 2rem 0rem;
+  display: grid;
+  row-gap: 3rem;
 
-	h2 {
-		text-align: center;
-	}
+  h2 {
+    text-align: center;
+  }
 
-	.main,
-	.wind,
-	.humidity {
-		display: grid;
-		justify-content: center;
-	}
+  .main,
+  .wind,
+  .humidity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+  }
 
-	.carousel-arrow {
-		background: none;
-		border: none;
-		align-self: center;
-		cursor: pointer;
-		padding: 0 !important;
+  .carousel-arrow {
+    background: none;
+    border: none;
+    align-self: center;
+    cursor: pointer;
+    padding: 0 !important;
 
-		img {
-			width: 48px;
-			height: 48px;
-		}
-	}
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
 
-	.error {
-		display: grid;
-		justify-content: center;
-		align-items: center;
+  .error {
+    display: grid;
+    justify-content: center;
+    align-items: center;
 
-		h2 {
-			text-align: center;
-			word-break: break-word;
-		}
-	}
+    h2 {
+      text-align: center;
+      word-break: break-word;
+    }
+  }
 `;
diff --git a/src/pages/Search/styles.ts b/src/pages/Search/styles.ts
index c13c3ca..56dbb5c 100644
--- a/src/pages/Search/styles.ts
+++ b/src/pages/Search/styles.ts
@@ -1,43 +1,45 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-	min-height: 85vh;
-	padding: 2rem 0rem;
-	display: grid;
-	row-gap: 3rem;
+  min-height: 85vh;
+  padding: 2rem 0rem;
+  display: grid;
+  row-gap: 3rem;
 
-	h2 {
-		text-align: center;
-	}
+  h2 {
+    text-align: center;
+  }
 
-	.main,
-	.wind,
-	.humidity {
-		display: grid;
-		justify-content: center;
-	}
+  .main,
+  .wind,
+  .humidity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+  }
 
-	.carousel-arrow {
-		background: none;
-		border: none;
-		align-self: center;
-		cursor: pointer;
-		padding: 0 !important;
+  .carousel-arrow {
+    background: none;
+    border: none;
+    align-self: center;
+    cursor: pointer;
+    padding: 0 !important;
 
-		img {
-			width: 48px;
-			height: 48px;
-		}
-	}
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
 
-	.error {
-		display: grid;
-		justify-content: center;
-		align-items: center;
+  .error {
+    display: grid;
+    justify-content: center;
+    align-items: center;
 
-		h2 {
-			text-align: center;
-			word-break: break-word;
-		}
-	}
+    h2 {
+      text-align: center;
+      word-break: break-word;
+    }
+  }
 `;