Merge pull request #127 from the-collab-lab/enhancement/padding-color…

…s-borders

Enhancement/padding, colors, borders

src/components/AddItemForm.css

@@ -0,0 +1,3 @@
+.addItemSection div {
+	background-color: var(--lightblue);
+}

src/components/AddItemForm.jsx

@@ -3,6 +3,7 @@ import { useState, useMemo } from 'react';
 import { useMutation } from 'react-query';
 import { normalizeInput } from '../utils';
 import Button from './Button';
+import './AddItemForm.css';
 
 async function addItemToList({ listPath, userItem, itemDuration }) {
 	return await addItem(listPath, {
@@ -69,7 +70,7 @@ export default function AddItemForm({ listPath, data }) {
 				<Button
 					className={(addItemToggle, 'addItemButton')}
 					fn={(e) => handleAddItemToggle(e)}
-					color="#89D2FF"
+					color="#DCFF4B"
 					text={addItemToggle}
 					buttonWidth="55px"
 					shadowAndContainerWidth="63px"

src/components/AddListForm.css

@@ -1,14 +1,134 @@
+.createList-header {
+	background-color: #dcff4b;
+	padding: 10px;
+}
+
 .green-background {
 	background-color: #dcff4b;
 }
 
-.createList-header {
+.createList-section {
+	background-color: #dcff4b;
+	padding: 33px 20px 0 20px;
+	border: 3px solid black;
+	border-top: 0;
+}
+
+.addItemSection {
+	padding: 20px;
+	background-color: var(--blue);
+	border: black 3px solid;
+	border-top: 0;
+}
+
+.addItemForm {
+	display: flex;
+	text-align: center;
+	margin-top: 30px;
+}
+
+.addItemForm > :nth-child(1) {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 30px;
+}
+
+.addItemMinimized {
+	display: none;
+	animation-name: slideUp;
+	animation-duration: 0.2;
+	animation-timing-function: linear;
+	animation-fill-mode: forwards;
+}
+
+.addItemMaximized {
+	overflow: hidden;
+	animation-name: slideDown;
+	animation-duration: 0.2s;
+	animation-timing-function: linear;
+}
+
+.addItemHeader {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 1em;
+}
+
+.addItemHeader button {
+	color: black;
+	font-size: 40px;
+}
+
+.addItemForm span {
+	margin-bottom: 1em;
+}
+
+.addItemButtonGroup {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 2em;
+	margin: 30px;
+}
+
+.durationButton {
+	width: 100px;
+	background-color: var(--yellow);
+}
+
+.createListBtnDiv {
 	background-color: #dcff4b;
-	padding: 10px;
 }
 
 @media screen and (min-width: 780px) {
 	.createList-header {
 		background-color: #ffffff;
 	}
+	.createList-section {
+		padding: 0;
+	}
+
+	.addItemForm {
+		min-width: 100%;
+	}
+	.addItemButtonGroup {
+		margin-top: 3em;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		max-width: 80%;
+		margin: auto;
+	}
+
+	.submitButton {
+		width: 14em;
+	}
+
+	@keyframes slideDown {
+		from {
+			height: 5em;
+		}
+
+		to {
+			height: 45em;
+		}
+	}
+
+	.addItemMinimized {
+		overflow: hidden;
+		animation-name: slideUp;
+		animation-duration: 0.2;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	.addItemMaximized {
+		overflow: hidden;
+		animation-name: slideDown;
+		animation-duration: 0.2s;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
 }

src/components/AddListForm.jsx

@@ -52,7 +52,7 @@ export default function AddListForm({ setListPath }) {
 						List Name
 					</label>
 					<input id="newListName" name="newListName" onChange={handleChange} />
-					<div className="formButtonContainer">
+					<div className="formButtonContainer createListBtnDiv">
 						<Button
 							text="Create List"
 							type="submit"

src/components/ListItem.css

@@ -0,0 +1,80 @@
+.listItemRow {
+	display: flex;
+	width: 100%;
+	background-color: white;
+}
+
+.listItemRow:hover {
+	background-color: #ddf2ff;
+}
+
+.listItemRow input {
+	cursor: pointer;
+	width: 60px;
+}
+
+.checkboxBackground {
+	border: black solid 2px;
+	background-color: black;
+}
+
+input[type='checkbox'] {
+	width: 60px;
+	height: 55px;
+	border: 1px solid black;
+	box-shadow: 3px 3px 0px 3px rgba(0, 0, 0, 1);
+	background-color: white;
+}
+
+input[type='checkbox']:checked {
+	accent-color: #89d2ff;
+}
+
+.nameAndUrgency {
+	display: flex;
+	flex-direction: column;
+	padding-left: 28px;
+	text-align: left;
+	width: 100%;
+	justify-content: center;
+	border-top: 3px solid black;
+}
+
+.buttonDelete {
+	height: 55px;
+	width: 55px;
+	background-color: var(--blue);
+	color: white;
+	font-size: 40px;
+}
+
+.buttonDelete p {
+	transform: rotate(45deg);
+}
+
+@media screen and (min-width: 780px) {
+	.listItemRow {
+		height: max-content;
+	}
+
+	.nameAndUrgency {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+	}
+
+	.nameAndUrgency > * {
+		height: 100%;
+		padding: 10px;
+	}
+
+	.listItemUrgency {
+		border-left: 3px solid black;
+	}
+
+	.nameAndUrgency :nth-child(1),
+	.nameAndUrgency :nth-child(2) {
+		font-size: 30px;
+		font-weight: 400;
+	}
+}

src/components/ListItem.jsx

@@ -4,6 +4,7 @@ import { useMutation } from 'react-query';
 import { getNextPurchasedDate } from '../utils';
 import { deleteItem } from '../api/firebase';
 import { compareIfDateIsLessThan24Hours, getDaysBetweenDates } from '../utils';
+import './ListItem.css';
 
 export function ListItem({ item, listPath }) {
 	const { id, totalPurchases, name, dateLastPurchased, dateNextPurchased } =

src/components/ListSearchItems.css

@@ -0,0 +1,54 @@
+.listSearchItems {
+	width: 100%;
+	background-color: var(--green);
+}
+
+.searchSection {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 33px 20px 48px 20px;
+	border: 3px solid black;
+	border-top: 0;
+	margin: 0;
+	width: 100%;
+}
+
+.searchSection label {
+	padding-bottom: 10px;
+}
+
+.searchSection input {
+	background-color: #f9ffde;
+}
+
+@media screen and (min-width: 780px) {
+	.listSearchItems {
+		display: flex;
+		min-width: 100%;
+	}
+
+	.searchSection {
+		display: flex;
+		flex-direction: row;
+		height: max-content;
+		justify-content: space-between;
+		gap: 0;
+		margin: 0;
+		width: 100%;
+		padding: 0;
+		border-bottom: 0;
+	}
+
+	.searchSection label {
+		font-size: 30px;
+		font-weight: 500;
+		width: 50%;
+		padding: 0;
+	}
+
+	.searchSection form {
+		height: 100%;
+		width: 100%;
+	}
+}

src/components/ListSearchItems.jsx

@@ -2,6 +2,7 @@ import { comparePurchaseUrgency } from '../api';
 import { ListItem } from './ListItem';
 import { useState } from 'react';
 import Button from './Button';
+import './ListSearchItems.css';
 
 export default function ListSearchItems({ data, listPath }) {
 	const [input, setInput] = useState('');
@@ -45,7 +46,7 @@ export default function ListSearchItems({ data, listPath }) {
 					<Button
 						text="Clear"
 						fn={clearSearch}
-						color="#DCFF4B"
+						color="#89D2FF"
 						shadowAndContainerWidth="100px"
 						buttonWidth="92px"
 					/>

src/components/LoggedOut.css

@@ -19,6 +19,9 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 }
+.loggedOut-message {
+	background-color: white;
+}
 
 @media screen and (min-width: 780px) {
 	.loggedOut-message > * {

src/components/SelectListForm.css

@@ -4,11 +4,17 @@
 .select-section {
 	display: flex;
 	flex-direction: column-reverse;
+	padding: 33px 20px 0 20px;
+	background-color: #89d2ff;
+	border: black solid 3px;
+	border-top: 0;
 }
 .selectList-header {
-	background-color: #89d2ff;
 	padding: 10px;
 }
+.viewListBtnDiv {
+	background-color: #89d2ff;
+}
 
 @media screen and (min-width: 780px) {
 	.selectList-header {
@@ -20,5 +26,6 @@
 		height: 50vh;
 		width: 100%;
 		border-top: none;
+		padding: 0;
 	}
 }

src/components/SelectListForm.jsx

@@ -40,7 +40,7 @@ export default function SelectListForm({
 								);
 							})}
 						</select>
-						<div className="formButtonContainer">
+						<div className="formButtonContainer viewListBtnDiv">
 							<Button
 								text="View List"
 								fn={() => navigate('/list')}

src/components/ShareForm.css

@@ -0,0 +1,21 @@
+.shareForm {
+	border: 3px black solid;
+	display: flex;
+	padding: 36px 20px 15px 20px;
+	background-color: white;
+}
+
+.formContainer > * {
+	margin: auto;
+}
+
+@media screen and (min-width: 780px) {
+	.shareFormHeader {
+		background-color: white;
+	}
+
+	.shareForm {
+		padding: 0;
+		background-color: var(--green);
+	}
+}