style: stlying the add item form inside the listpage

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/components/forms/AddItemForm.scss

@@ -0,0 +1,20 @@
+@import "../../styles/variables";
+
+.custom-borders {
+	border: 2px solid $secondary-blue !important;
+	border-radius: 4px !important;
+	padding: 20px;
+	margin-top: 20px;
+	position: relative;
+}
+
+.legend-text {
+	font-weight: bold;
+	padding: 0 10px; /* Creates space between the border and text */
+	color: #001f3f; /* Optional: text color */
+	position: relative;
+	top: -40px;
+	left: 10px;
+	background-color: #f3ecd3;
+	width: 80%;
+}

src/components/forms/AddItemForm.tsx

@@ -4,8 +4,8 @@ import { validateItemName } from "../../utils";
 import toast from "react-hot-toast";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
-
 import { useNavigate } from "react-router-dom";
+import "./AddItemForm.scss";
 
 interface Props {
 	listPath: string;
@@ -104,27 +104,29 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 	};
 
 	return (
-		<section>
+		<section className="custom-borders d-flex flex-column align-items-center p-2 ">
 			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
-				<h3>First, add your item!</h3>
+				<h3>New Item</h3>
 				<Form.Label htmlFor="item-name">
-					Item:
+					<h5>Item Name:</h5>
 					<Form.Control
 						id="item-name"
 						type="text"
 						name="item"
+						placeholder="Item Name..."
 						value={itemName}
 						onChange={handleItemNameTextChange}
 						aria-label="Enter the item name"
 						aria-required
 					/>
 				</Form.Label>
 				<label htmlFor="item-quantity">
-					Quantity:
+					<h5>Item Quantity: </h5>
 					<Form.Control
 						id="item-quantity"
 						type="number"
 						name="quantity"
+						placeholder="Quantity..."
 						min="1"
 						max="100"
 						value={addedQuantity}
@@ -134,10 +136,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 					/>
 				</label>
 				<br />
-				<h3>Next, pick when you plan on buying this item again!</h3>
-				<fieldset>
-					<legend>When to buy:</legend>
-					<Form.Label htmlFor={PurchaseTime.soon}>
+				<fieldset className="custom-borders ">
+					<legend className="legend-text">When to buy:</legend>
+
+					<Form.Label htmlFor={PurchaseTime.soon} className="d-flex gap-2 ">
 						<Form.Check
 							type="radio"
 							id={PurchaseTime.soon}
@@ -151,7 +153,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
 					</Form.Label>
 					<br />
-					<Form.Label htmlFor={PurchaseTime.kindOfSoon}>
+					<Form.Label
+						htmlFor={PurchaseTime.kindOfSoon}
+						className="d-flex gap-2"
+					>
 						<Form.Check
 							type="radio"
 							id={PurchaseTime.kindOfSoon}
@@ -166,7 +171,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						days!
 					</Form.Label>
 					<br />
-					<label htmlFor={PurchaseTime.notSoon}>
+					<Form.Label htmlFor={PurchaseTime.notSoon} className="d-flex gap-2">
 						<Form.Check
 							type="radio"
 							id={PurchaseTime.notSoon}
@@ -178,14 +183,13 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 							aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
 						/>
 						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
-					</label>
+					</Form.Label>
+					<Button type="submit" aria-label="Add item to shopping list">
+						Submit Item
+					</Button>
 				</fieldset>
-				<Button type="submit" aria-label="Add item to shopping list">
-					Submit Item
-				</Button>
 			</Form>
-			<h4>Let&apos;s go look at your list!</h4>
-			<Button onClick={navigateToListPage}>{"View List"}</Button>
+			{/*<Button onClick={navigateToListPage}>{"View List"}</Button>*/}
 		</section>
 	);
 }

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/authenticated/List.tsx

@@ -98,7 +98,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 				</div>
 
 				{/* Width of this section should be 50%. */}
-				<section className="ItemFunctions">
+				<section className="ItemFunctions d-flex flex-column">
 					<div>
 						<Header />
 					</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>
 	);