Merge pull request #125 from the-collab-lab/feature/updateButtonsWith…

…Component Feature/update buttons with component
the-collab-lab · Apr 6, 2024 · e970f96 · e970f96
2 parents ca13b84 + c3562a0
commit e970f96
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 84 deletions.
diff --git a/src/components/AddItemForm.jsx b/src/components/AddItemForm.jsx
@@ -66,15 +66,14 @@ export default function AddItemForm({ listPath, data }) {
 	return (
 		<section className="addItemSection">
 			<header className="addItemHeader">
-				<div className="squareButtonContainer">
-					<div className="buttonBackSquare"></div>
-					<button
-						className={(addItemToggle, 'addItemButton, buttonSquare')}
-						onClick={(e) => handleAddItemToggle(e)}
-					>
-						{addItemToggle}
-					</button>
-				</div>
+				<Button
+					className={(addItemToggle, 'addItemButton')}
+					fn={(e) => handleAddItemToggle(e)}
+					color="#89D2FF"
+					text={addItemToggle}
+					buttonWidth="55px"
+					shadowAndContainerWidth="63px"
+				/>
 
 				<h2 data-testid="addItemForm-header" id="addItemH2">
 					Add Item
@@ -100,37 +99,49 @@ export default function AddItemForm({ listPath, data }) {
 				</div>
 				<h4>When would you like a reminder to buy this item?</h4>
 				<div className="addItemButtonGroup">
-					<button
-						className={'durationButton'}
-						onClick={(e) => {
+					<Button
+						className="durationButton"
+						fn={(e) => {
 							handleSelection(e);
 						}}
 						value={7}
-						data-testId="replaceTime"
-					>
-						7 Days
-					</button>
-					<button
-						className={'durationButton'}
-						onClick={(e) => {
+						testId="replaceTime"
+						text="7 Days"
+						shadowAndContainerWidth="110px"
+						buttonWidth="102px"
+					/>
+
+					<Button
+						className="durationButton"
+						fn={(e) => {
 							handleSelection(e);
 						}}
 						value={14}
-					>
-						14 Days
-					</button>
-					<button
-						className={'durationButton'}
-						onClick={(e) => {
+						text="14 Days"
+						shadowAndContainerWidth="110px"
+						buttonWidth="102px"
+					/>
+
+					<Button
+						className="durationButton"
+						fn={(e) => {
 							handleSelection(e);
 						}}
 						value={30}
-					>
-						30 Days
-					</button>
+						text="30 Days"
+						shadowAndContainerWidth="110px"
+						buttonWidth="102px"
+					/>
 				</div>
-				<div>
-					<Button text="Add Item" testId="submit-button" color="#DCFF4B" />
+				<div className="formButtonContainer">
+					<Button
+						color="#DCFF4B"
+						value={7}
+						testId="submit-button"
+						text="Add Item"
+						shadowAndContainerWidth="163px"
+						buttonWidth="155px"
+					/>
 				</div>
 				<div>
 					<h6 data-testid="addItemFormMessage">{message}</h6>

diff --git a/src/components/AddListForm.jsx b/src/components/AddListForm.jsx
@@ -52,8 +52,16 @@ export default function AddListForm({ setListPath }) {
 						List Name
 					</label>
 					<input id="newListName" name="newListName" onChange={handleChange} />
-					<Button text="Create List" type="submit" color="#89D2FF" />
-					{message && <small>{message}</small>}
+					<div className="formButtonContainer">
+						<Button
+							text="Create List"
+							type="submit"
+							color="#89D2FF"
+							shadowAndContainerWidth="163px"
+							buttonWidth="155px"
+						/>
+					</div>
+					<h6>{message}</h6>
 				</form>
 			</div>
 		</div>

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -7,17 +7,24 @@ export default function Button({
 	fn,
 	testId,
 	buttonWidth,
+	shadowAndContainerWidth,
 }) {
 	return (
-		<button
-			className={className}
-			value={value}
-			type={type}
-			onClick={fn}
-			style={{ backgroundColor: color, width: buttonWidth }}
-			data-testid={testId}
-		>
-			{text}
-		</button>
+		<div className="buttonContainer" style={{ width: shadowAndContainerWidth }}>
+			<span
+				className="buttonBack"
+				style={{ width: shadowAndContainerWidth }}
+			></span>
+			<button
+				className={className}
+				value={value}
+				type={type}
+				onClick={fn}
+				style={{ backgroundColor: color, width: buttonWidth }}
+				data-testid={testId}
+			>
+				{text}
+			</button>
+		</div>
 	);
 }
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { updateItem } from '../api/firebase';
 import { useMutation } from 'react-query';
-import Button from './Button';
 import { getNextPurchasedDate } from '../utils';
 import { deleteItem } from '../api/firebase';
 import { compareIfDateIsLessThan24Hours, getDaysBetweenDates } from '../utils';
@@ -94,23 +93,24 @@ export function ListItem({ item, listPath }) {
 
 	return (
 		<div className="listItemRow">
-			<div className="checkboxBackground">
+			<span className="checkboxBackground">
 				<input
 					type="checkbox"
 					id={id}
 					name="item"
 					checked={isDisabled}
 					onChange={handleCheckboxCheck}
 				/>
-			</div>
+			</span>
 			<div className="nameAndUrgency">
 				<p className="listItemName">{name}</p>
 				<p className="listItemUrgency">{urgency}</p>
 			</div>
-			<div className="squareButtonContainer">
+			<div className="deleteButtonContainer">
 				<div className="buttonBackSquare"></div>
+
 				<button
-					className="buttonSquare buttonDelete"
+					className="buttonDelete"
 					onClick={() => {
 						handleDeleteItem();
 					}}

diff --git a/src/components/ListSearchItems.jsx b/src/components/ListSearchItems.jsx
@@ -42,7 +42,13 @@ export default function ListSearchItems({ data, listPath }) {
 						/>
 					</form>
 
-					<Button text="Clear" fn={clearSearch} color="#DCFF4B" />
+					<Button
+						text="Clear"
+						fn={clearSearch}
+						color="#DCFF4B"
+						shadowAndContainerWidth="100px"
+						buttonWidth="92px"
+					/>
 				</div>
 			)}
 

diff --git a/src/components/SelectListForm.jsx b/src/components/SelectListForm.jsx
@@ -40,11 +40,15 @@ export default function SelectListForm({
 								);
 							})}
 						</select>
-						<Button
-							text="View List"
-							fn={() => navigate('/list')}
-							color="#DCFF4B"
-						/>
+						<div className="formButtonContainer">
+							<Button
+								text="View List"
+								fn={() => navigate('/list')}
+								color="#DCFF4B"
+								shadowAndContainerWidth="163px"
+								buttonWidth="155px"
+							/>
+						</div>
 					</form>
 				</div>
 			)}

diff --git a/src/components/ShareForm.jsx b/src/components/ShareForm.jsx
@@ -53,11 +53,15 @@ const ShareForm = ({ listPath }) => {
 					</div>
 
 					<div>
-						<Button
-							text="Send List"
-							color="#89D2FF"
-							testId="shareForm-submit-button"
-						/>
+						<div className="formButtonContainer">
+							<Button
+								text="Send List"
+								color="#89D2FF"
+								testId="shareForm-submit-button"
+								shadowAndContainerWidth="163px"
+								buttonWidth="155px"
+							/>
+						</div>
 					</div>
 					<h6 data-testid="shareForm-validation-message">{message}</h6>
 					{isSuccess && (

diff --git a/src/index.css b/src/index.css
@@ -66,7 +66,8 @@ select,
 option,
 label,
 small,
-button {
+button,
+p {
 	font-family: 'Work Sans';
 	margin: 0px;
 }
@@ -112,28 +113,44 @@ small {
 form {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	justify-content: center;
+	width: 90%;
+}
+.form {
+	display: flex;
+	justify-content: center;
+}
+
+.formButtonContainer {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.formButtonContainer {
+	display: flex;
 	justify-content: center;
 	width: 100%;
 }
 
 .buttonContainer,
-.squareButtonContainer {
+.deleteButtonContainer {
 	display: grid;
-	justify-content: center;
 }
 
 .buttonContainer > *,
-.squareButtonContainer > * {
+.deleteButtonContainer > * {
 	grid-column-start: 1;
 	grid-row-start: 1;
 }
 
 button {
-	width: 150px;
+	/* width: 150px; */
 	height: 55px;
+	/* padding: 0px 30px 0px 30px; */
 	font-size: 20px;
 	border: 2px solid black;
+	white-space: nowrap;
 }
 .buttonBack {
 	width: 158px;
@@ -145,14 +162,6 @@ button:hover {
 	transform: translate(8px, 8px);
 }
 
-.buttonSquare {
-	height: 55px;
-	width: 55px;
-	background-color: var(--blue);
-	color: white;
-	font-size: 40px;
-}
-
 .buttonBackSquare {
 	width: 63px;
 	height: 63px;
@@ -166,12 +175,17 @@ button:hover {
 input,
 select {
 	border: solid 2px black;
+	width: 100%;
+	padding: 15px;
 }
 
 input:focus {
 	outline: var(--black);
 }
 
+#itemName {
+	width: clamp(200px, 80%, 600px);
+}
 .form {
 	padding-bottom: 10px;
 }
@@ -181,11 +195,7 @@ input:focus {
 }
 
 form > * {
-	margin: 10px;
-}
-
-.sideBySide-section {
-	border: 1px solid black;
+	margin: 10px 0px 10px 0px;
 }
 
 @media screen and (min-width: 780px) {
@@ -210,13 +220,9 @@ form > * {
 	h4,
 	label {
 		font-size: 22px;
-		text-align: left;
+		text-align: center;
 	}
 
-	/* input {
-		font-size: 40px;
-	} */
-
 	h5,
 	label[for='email'],
 	label[for='itemName'],

diff --git a/src/views/Home.css b/src/views/Home.css
@@ -0,0 +1,4 @@
+h4,
+label {
+	text-align: center;
+}