From 7ea8d7a8ae35992a10cb46bf9f399dd956686a6b Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 9 Oct 2024 19:45:22 -0600
Subject: [PATCH] Apply styles to unauthenticated home page

---
 src/styles/_variables.scss                    |  1 +
 src/views/Home.scss                           |  0
 src/views/Home.tsx                            |  1 -
 .../unauthenticated/UnauthenticatedHome.scss  | 31 +++++++++++++++++
 .../unauthenticated/UnauthenticatedHome.tsx   | 33 +++++++++++--------
 5 files changed, 51 insertions(+), 15 deletions(-)
 delete mode 100644 src/views/Home.scss
 create mode 100644 src/views/unauthenticated/UnauthenticatedHome.scss

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3843aba..d313fbd 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -2,3 +2,4 @@
 $primary-beige: #f1e6cc;
 $primary-blue: #3f6476;
 $secondary-blue: #001f3f;
+$light-blue: #356481;
diff --git a/src/views/Home.scss b/src/views/Home.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 76de1d7..3a8c9e8 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "./Home.scss";
 import { List, User } from "../api";
 import { AuthenticatedHome, UnauthenticatedHome } from "../views";
 
diff --git a/src/views/unauthenticated/UnauthenticatedHome.scss b/src/views/unauthenticated/UnauthenticatedHome.scss
new file mode 100644
index 0000000..b858d8c
--- /dev/null
+++ b/src/views/unauthenticated/UnauthenticatedHome.scss
@@ -0,0 +1,31 @@
+@use "../../styles/variables.scss" as *;
+
+.text__heading {
+	color: $secondary-blue;
+	text-align: center;
+	padding: 12px;
+}
+
+.text__normal {
+	color: $light-blue;
+	text-align: center;
+}
+
+.button {
+	background-color: $primary-blue;
+	border: none;
+	color: $primary-beige;
+	text-align: center;
+	padding: 10px 40px;
+	width: 170px;
+}
+
+.custom-button-wrapper {
+	display: flex;
+	justify-content: center; // Centers the button horizontally
+	align-items: center;
+}
+
+.custom-button-wrapper button {
+	@extend .button;
+}
diff --git a/src/views/unauthenticated/UnauthenticatedHome.tsx b/src/views/unauthenticated/UnauthenticatedHome.tsx
index b23874c..ef474c0 100644
--- a/src/views/unauthenticated/UnauthenticatedHome.tsx
+++ b/src/views/unauthenticated/UnauthenticatedHome.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "./UnauthenticatedHome.scss";
 import { useNavigate } from "react-router-dom";
 import { SignInButton } from "../../api";
 import Button from "react-bootstrap/Button";
@@ -8,29 +9,33 @@ export function UnauthenticatedHome() {
 
 	return (
 		<div className="Home">
-			<h2>Welcome to GrocerEase</h2>
-			<p>
-				The next best thing to having someone else do the shopping for you!
+			<h2 className="text__heading">Welcome to GrocerEase</h2>
+			<p className="text__normal">
+				The next best thing to having someone else do the shopping for you!{" "}
+				<br />
 				Create and manage smart lists, while it learns your shopping habits to
 				let you know exactly when you will need to buy that next batch of toilet
 				paper!
 			</p>
 
 			<article>
-				<p>New to GrocerEase:</p>
-				<Button
-					onClick={() => navigate("/about")}
-					aria-label="Navigate to the about application page."
-					className="m-2"
-				>
-					Learn More
-				</Button>
-				<SignInButton isSignIn={false} />
+				<h3 className="text__heading">Welcome Back:</h3>
+				<div className="custom-button-wrapper">
+					<SignInButton />
+				</div>
 			</article>
 
 			<article>
-				<p>Welcome Back:</p>
-				<SignInButton />
+				<h5 className="text__heading">New to GrocerEase?</h5>
+				<div className="custom-button-wrapper">
+					<Button
+						onClick={() => navigate("/about")}
+						aria-label="Navigate to the about application page."
+					>
+						Learn More
+					</Button>
+					<SignInButton isSignIn={false} />
+				</div>
 			</article>
 		</div>
 	);