Merge pull request #65 from the-collab-lab/fz-design-homepage

Issue#55: Style Home Page

src/components/CreateList.tsx

@@ -48,8 +48,9 @@ export function CreateList({ user, setListPath }: Props) {
 	return (
 		<>
 			<Form onSubmit={handleSubmit}>
-				<h3>Create New Shopping List</h3>
-				<Form.Label htmlFor="newListName">Name Your List</Form.Label>
+				<h3 className="heading-text">
+					<Form.Label htmlFor="newListName">Create A New List</Form.Label>
+				</h3>
 				<InputGroup>
 					<br />
 					<Form.Control
@@ -62,7 +63,11 @@ export function CreateList({ user, setListPath }: Props) {
 						aria-required="true" // Indicates that this field is required
 					/>
 					<br />
-					<Button aria-label="Create new shopping list">Create List</Button>
+					<div className="custom-button-wrapper">
+						<Button aria-label="Create new shopping list" type="submit">
+							Create List
+						</Button>
+					</div>
 				</InputGroup>
 			</Form>
 		</>

src/components/SingleList.scss

@@ -1,10 +1,15 @@
+@use "../styles/mixins.scss" as *;
+@import "../views/unauthenticated/UnauthenticatedHome.scss";
+
 .SingleList {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
+	@extend .custom-button-wrapper;
+	list-style-type: none;
 }
 
-.SingleList-label {
-	margin-left: 0.2em;
+.SingleList button {
+	width: 100%;
+	margin: 5px;
+	@include tablet {
+		margin: 5px;
+	}
 }

src/styles/_mixins.scss

@@ -0,0 +1,12 @@
+// ====== MEDIA ========
+@mixin tablet {
+	@media (min-width: 768px) {
+		@content;
+	}
+}
+
+@mixin mobile {
+	@media (min-width: 375px) {
+		@content;
+	}
+}

src/styles/_variables.scss

@@ -2,3 +2,4 @@
 $primary-beige: #f1e6cc;
 $primary-blue: #3f6476;
 $secondary-blue: #001f3f;
+$light-blue: #356481;

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";
 

src/views/Layout.scss

@@ -13,9 +13,9 @@
 	height: 100dvh;
 }
 
-.Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
-}
+// .Layout > * {
+// 	padding-inline: min(5dvw, 3.2rem);
+// }
 
 .Layout-header {
 	background-color: var(--color-bg);

src/views/authenticated/AuthenticatedHome.scss

@@ -0,0 +1,15 @@
+@use "../../styles/mixins.scss" as *;
+
+.lists {
+	display: block;
+	margin-top: 20px;
+	padding: 0;
+	margin: 0;
+
+	@include tablet {
+		padding: 0;
+		display: flex;
+		justify-content: space-between;
+		flex-flow: wrap;
+	}
+}

src/views/authenticated/AuthenticatedHome.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+// import React from "react";
 import { SingleList, CreateList } from "../../components";
 import { List, User } from "../../api";
+import "./AuthenticatedHome.scss";
 
 interface Props {
 	data: List[];
@@ -10,14 +11,12 @@ interface Props {
 
 export function AuthenticatedHome({ data, setListPath, user }: Props) {
 	return (
-		<>
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-
+		<div className="home">
 			{user && (
 				<>
-					<ul>
+					<CreateList user={user} setListPath={setListPath} />
+					<h3 className="heading-text">Your Lists</h3>
+					<ul className="lists">
 						{data.map((list, index) => (
 							<SingleList
 								key={index}
@@ -27,9 +26,8 @@ export function AuthenticatedHome({ data, setListPath, user }: Props) {
 							/>
 						))}
 					</ul>
-					<CreateList user={user} setListPath={setListPath} />
 				</>
 			)}
-		</>
+		</div>
 	);
 }

src/views/unauthenticated/UnauthenticatedHome.scss

@@ -0,0 +1,41 @@
+@use "../../styles/variables.scss" as *;
+
+.home {
+	background-color: rgba($primary-beige, 0.9);
+	border-radius: 5%;
+	padding: 40px;
+}
+
+.heading-text {
+	color: $secondary-blue;
+	text-align: center;
+	padding: 12px;
+}
+
+.normal-text {
+	color: $light-blue;
+	text-align: center;
+}
+
+.button {
+	background-color: $primary-blue;
+	border: none;
+	color: $primary-beige;
+	text-align: center;
+	padding: 10px 40px;
+	width: 170px;
+
+	&:hover {
+		background-color: $secondary-blue;
+	}
+}
+
+.custom-button-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.custom-button-wrapper button {
+	@extend .button;
+}

src/views/unauthenticated/UnauthenticatedHome.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+// import React from "react";
+import "./UnauthenticatedHome.scss";
 import { useNavigate } from "react-router-dom";
 import { SignInButton } from "../../api";
 import Button from "react-bootstrap/Button";
@@ -7,30 +8,34 @@ export function UnauthenticatedHome() {
 	const navigate = useNavigate();
 
 	return (
-		<div className="Home">
-			<h2>Welcome to GrocerEase</h2>
-			<p>
-				The next best thing to having someone else do the shopping for you!
+		<div className="home">
+			<h2 className="heading-text">Welcome to GrocerEase</h2>
+			<p className="normal-text">
+				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="heading-text">Welcome Back:</h3>
+				<div className="custom-button-wrapper">
+					<SignInButton />
+				</div>
 			</article>
 
 			<article>
-				<p>Welcome Back:</p>
-				<SignInButton />
+				<h5 className="heading-text">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>
 	);