Style form to add list and individual lists

Author: zahrafalak

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,8 +1,11 @@
+@import "../views/unauthenticated/UnauthenticatedHome.scss";
+
 .SingleList {
+	@extend .custom-button-wrapper;
+	// @extend .button;
 	align-items: baseline;
-	display: flex;
-	flex-direction: row;
 	font-size: 1.2em;
+	width: 120px;
 }
 
 .SingleList-label {

src/views/authenticated/AuthenticatedHome.scss

@@ -0,0 +1,7 @@
+.lists {
+	margin-top: 20px;
+	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 { SingleList, CreateList } from "../../components";
 import { List, User } from "../../api";
+import "./AuthenticatedHome.scss";
 
 interface Props {
 	data: List[];
@@ -10,14 +11,11 @@ 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} />
+					<ul className="lists">
 						{data.map((list, index) => (
 							<SingleList
 								key={index}
@@ -27,9 +25,8 @@ export function AuthenticatedHome({ data, setListPath, user }: Props) {
 							/>
 						))}
 					</ul>
-					<CreateList user={user} setListPath={setListPath} />
 				</>
 			)}
-		</>
+		</div>
 	);
 }

src/views/unauthenticated/UnauthenticatedHome.scss

@@ -3,6 +3,7 @@
 .home {
 	background-color: rgba($primary-beige, 0.9);
 	border-radius: 5%;
+	padding: 40px;
 }
 
 .heading-text {