Merge pull request #53 from the-collab-lab/pc-final-styling

Final styling changes
the-collab-lab · Apr 6, 2024 · b5d4ce1 · b5d4ce1
2 parents 45f953a + 14d9446
commit b5d4ce1
Show file tree

Hide file tree

Showing 15 changed files with 189 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/StackedLogo.jsx b/src/assets/StackedLogo.jsx
@@ -1,4 +1,7 @@
+import { useContext } from 'react';
+import { DarkModeContext } from '../providers/DarkModeProvider';
 export default function StackedLogo() {
+	const { isDarkMode } = useContext(DarkModeContext);
 	return (
 		<div className="logo-stack-svg">
 			<svg
@@ -7,7 +10,7 @@ export default function StackedLogo() {
 				width="34"
 				height="34"
 			>
-				<g fill="#0C0C0C" clipPath="url(#a)">
+				<g fill={isDarkMode ? 'white' : 'black'} clipPath="url(#a)">
 					<path d="M11739 12905H1.469V0H11739v12905ZM822.752 12083.5H10917.5V821.478H822.752V12083.5Z" />
 					<path d="M1965.46 7865.44V5046.72h711.7v2818.72h-711.7Zm568.51 0v-612.21h1355.65v612.21H2533.97Zm1834.95 0 1097.37-2818.72h687.83l1085.44 2818.72h-747.49l-815.04-2369.52h254.42l-826.97 2369.52h-735.56Zm668-493.07v-564.48h1558.5v564.48h-1558.5Zm2676.43 493.07V5046.72h699.76v2818.72h-699.76Zm564.47 0v-528.87h592.37c105.92 0 192.2-31.75 258.47-95.45 66.27-63.7 99.31-144.47 99.31-242.5 0-68.84-15.24-127.76-45.71-176.96-30.47-49.01-72.33-88.11-125.19-117.3-53.05-29.19-118.04-43.69-194.77-43.69h-584.48v-508.86h540.61c95.45 0 172.92-23.86 232.58-71.59 59.66-47.73 89.4-119.32 89.4-214.78 0-95.46-29.74-170.9-89.4-218.63-59.66-47.73-135.84-71.59-228.54-71.59h-544.65v-528.87h715.55c177.51 0 330.05 33.23 457.27 99.31 127.21 66.27 225.23 155.12 294.26 266.36 68.83 111.25 103.34 237.17 103.34 377.79 0 185.59-64.24 340.52-192.74 465.17-128.5 124.64-314.82 202.84-558.6 234.6v-242.5c267.64 31.76 474.34 118.59 620.28 260.49 145.75 141.9 218.63 319.96 218.63 534.74 0 156.4-39.84 297.57-119.32 423.5-79.49 125.93-191.46 223.95-335.93 294.26s-314.82 105.37-510.87 105.37h-691.87ZM1932.97 11416.2V8597.52h711.7v2818.68h-711.7Zm568.51 0V10804h1355.65v612.2H2501.48Zm1835.13 0 1097.37-2818.68h687.83l1085.44 2818.68h-747.49l-815.04-2369.48h254.42l-826.97 2369.48h-735.56Zm668.01-493v-564.5h1558.49v564.5H5004.62Zm2719.37 493V8597.52h699.77v2818.68h-699.77Zm564.48 0v-528.8h592.37c105.92 0 192.2-31.8 258.46-95.5 66.27-63.5 99.31-144.4 99.31-242.5 0-68.8-15.23-127.7-45.7-176.9-30.48-49.1-72.33-88.2-125.2-117.3-53.05-29.2-118.03-43.7-194.76-43.7h-584.48v-508.89h540.6c95.46 0 172.93-23.86 232.59-71.59 59.65-47.73 89.39-119.32 89.39-214.78 0-95.45-29.74-170.9-89.39-218.63-59.66-47.73-135.85-71.59-228.55-71.59h-544.64v-528.87h715.54c177.51 0 330.06 33.23 457.27 99.31 127.21 66.27 225.24 155.12 294.26 266.36 68.84 111.25 103.35 237.18 103.35 377.79 0 185.59-64.25 340.53-192.75 465.17-128.49 124.64-314.81 202.82-558.59 234.62v-242.51c267.64 31.75 474.34 118.58 620.27 260.51 145.76 141.9 218.63 319.9 218.63 534.7 0 156.4-39.83 297.6-119.32 423.5-79.48 125.9-191.46 224-335.93 294.3-144.46 70.3-314.82 105.3-510.87 105.3h-691.86ZM3300.74 4297.38c-214.78 0-413.4-37.08-596.42-111.24-182.83-74.16-342.53-176.96-479.11-308.03-136.57-131.25-242.49-285.64-318.12-463.15s-113.26-371-113.26-580.45c0-209.45 37.08-398.16 111.24-574.57 74.16-176.23 179.53-329.33 316.1-459.11 136.58-129.79 295.55-231.85 477.1-306.2 181.55-74.16 379.62-111.24 594.39-111.24 214.78 0 422.76 35.24 600.27 105.37 177.51 70.3 333.91 166.31 469.2 288.2l-477.1 481.14c-69.02-74.16-152.36-132.54-250.38-174.94-98.03-42.41-212.02-63.52-341.99-63.52-111.24 0-215.32 19.28-312.07 57.64-96.74 38.55-178.97 93.44-246.53 165.03-67.55 71.6-120.6 157.69-158.97 258.47-38.36 100.78-57.64 212.02-57.64 333.91 0 121.9 19.28 241.22 57.64 342 38.37 100.78 91.42 186.87 158.97 258.46 67.56 71.6 149.06 127.22 244.52 167.05 95.45 39.84 200.08 59.66 314.08 59.66 132.54 0 248.55-20.56 347.86-61.68 99.31-41.12 186.14-98.76 260.48-172.92l477.1 477.1c-137.86 121.89-293.53 218.08-467.18 288.2-173.66 70.13-377.05 105.37-610.37 105.37l.19-.55Zm4715.13-47.72V1430.93h711.69v2818.73h-711.69Zm568.51 0v-612.21h1355.65v612.21H8584.38ZM7437.44 2257.55c-75.63-177.51-180.81-333.37-316.1-467.19-135.11-133.82-294.26-236.62-477.09-308.21-182.84-71.6-383.11-107.39-600.27-107.39-217.16 0-417.44 35.79-600.27 107.39-182.83 71.59-341.99 174.39-477.09 308.21-135.11 133.82-240.48 288.94-316.11 465.17-75.44 176.23-113.26 367.69-113.26 574.57 0 206.89 38.37 399.64 115.28 578.44 76.92 178.98 183.57 334.64 319.96 467.18 136.58 132.54 296.28 235.89 479.11 310.05 182.84 74.16 382.93 111.25 600.27 111.25 217.35 0 412.85-36.53 594.4-109.41 181.54-72.88 339.96-176.23 475.07-310.05 135.11-133.83 240.47-289.49 316.1-467.19 75.63-177.51 113.27-369.71 113.27-576.41s-37.82-398.9-113.27-576.59v.18Zm-1745.36 162.09-539.32 416.16 539.32 416.15v286.92l-737.21-598.99v-208.17l737.21-598.99v286.92Zm335.93 1119.78h-234.23l254.24-1404.86h230.74l-250.75 1404.86Zm1091.31-599.54-737.21 598.99v-286.92l539.32-416.15-539.32-416.16v-286.92l737.21 598.99v208.17Z" />
 				</g>

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
@@ -67,12 +67,16 @@ export function AddItem({ listPath, data }) {
 				<p>Please select an option:</p>
 
 				<RadioGroup.Root defaultValue={7}>
-					<RadioGroup.Item id="soon" onClick={handleDays} value={7}>
-						Soon (7 Days)
-					</RadioGroup.Item>
-					<RadioGroup.Item id="kind-of-soon" onClick={handleDays} value={14}>
-						Kind of Soon (14 Days)
-					</RadioGroup.Item>
+					<Box pb="4">
+						<RadioGroup.Item id="soon" onClick={handleDays} value={7}>
+							Soon (7 Days)
+						</RadioGroup.Item>
+					</Box>
+					<Box pb="4">
+						<RadioGroup.Item id="kind-of-soon" onClick={handleDays} value={14}>
+							Kind of Soon (14 Days)
+						</RadioGroup.Item>
+					</Box>
 					<RadioGroup.Item id="not-soon" onClick={handleDays} value={30}>
 						Not Soon (30 Days)
 					</RadioGroup.Item>

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -7,22 +7,11 @@
 
 .ListItem > li {
 	display: flex;
-	border-bottom: 0.5px solid var(--color-border);
 	width: 100%;
 	margin: auto;
 	align-items: center;
 }
 
-.ListItem > li:hover {
-	background-color: hsla(220, 13%, 98%, 0.25);
-}
-
-@media screen and (prefers-color-scheme: light) {
-	.ListItem > li:hover {
-		background-color: hsla(220, 13%, 25%, 0.25);
-	}
-}
-
 .ListItem-checkbox {
 	accent-color: var(--color-accent);
 }
@@ -37,10 +26,6 @@
 	margin-bottom: 0.5em;
 }
 
-.ListItem-badge > span {
-	color: black;
-}
-
 .column-name {
 	display: flex;
 	justify-content: space-between;

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -55,6 +55,7 @@ export function ListItem({ listPath, item, name }) {
 			case isInactive:
 				return {
 					badgeColor: 'blue',
+					variant: 'solid',
 					message: 'inactive (last purchased over 60 days ago)',
 				};
 			case isOverdue:

diff --git a/src/components/ListOwnerMessage.css b/src/components/ListOwnerMessage.css
@@ -1,8 +1,9 @@
 .owner-message {
 	position: fixed;
 	width: min(72ch, 100%);
-	bottom: 5.18rem;
+	bottom: 7.38rem;
 	padding: 0.4em 0.4em;
 	margin: 0 auto;
-	background-color: white;
+	/* background-color: white; */
+	/* z-index: 1; */
 }
diff --git a/src/components/ModalAlerts.jsx b/src/components/ModalAlerts.jsx
@@ -71,8 +71,8 @@ export function DeleteListConfirm({ name, onDelete }) {
 	return (
 		<AlertDialog.Root>
 			<AlertDialog.Trigger>
-				<button aria-label={`Delete ${name}`}>
-					<FontAwesomeIcon icon={faTrashCan} />
+				<button className="delete-btn" aria-label={`Delete ${name}`}>
+					<FontAwesomeIcon className="delete-icon" icon={faTrashCan} />
 				</button>
 			</AlertDialog.Trigger>
 			<AlertDialog.Content maxWidth="450px">

diff --git a/src/components/ShareList.jsx b/src/components/ShareList.jsx
@@ -23,7 +23,9 @@ export function ShareList({ listPath }) {
 			setEmailValidator(
 				'Please enter a valid email, e.g., [email protected].',
 			);
+			setIsValid(false);
 		}
+		console.log('email valid?', isValid);
 	};
 
 	const handleSubmit = async (e) => {
@@ -60,19 +62,12 @@ export function ShareList({ listPath }) {
 				value={recipientEmail}
 				onChange={handleChange}
 			/> */}
-			<Box maxWidth="22em" pb="2">
+			<Box maxWidth="22em" pb="5">
 				<TextField.Root
 					value={recipientEmail}
 					onChange={handleChange}
 				></TextField.Root>
 			</Box>
-			<Box as="div" py="2">
-				<Text as="p">
-					<Badge style={{ color: 'black' }} color="red">
-						{emailValidator}
-					</Badge>
-				</Text>
-			</Box>
 
 			{user ? (
 				<Button className="custom-button" type="submit">

diff --git a/src/components/SingleList.css b/src/components/SingleList.css
@@ -12,22 +12,12 @@
 .SingleList > li {
 	display: flex;
 	align-items: center;
-	border-bottom: 0.5px solid var(--color-border);
+	justify-content: space-between;
 	width: 100%;
 	height: 2em;
 	margin: auto;
 }
 
-.SingleList > li:hover {
-	background-color: hsla(220, 13%, 98%, 0.25);
-}
-
-@media screen and (prefers-color-scheme: light) {
-	.SingleList > li:hover {
-		background-color: hsla(220, 13%, 25%, 0.25);
-	}
-}
-
 .list-link {
 	margin-left: 1em;
 	color: var(--color-text);

diff --git a/src/custom-styles.css b/src/custom-styles.css
@@ -12,6 +12,7 @@
 
 			button.custom-button {
 				background-color: var(--color-accent-bg-dark);
+				color: var(--color-text-light);
 			}
 
 			button.custom-button:hover {
@@ -20,6 +21,38 @@
 
 			.Nav {
 				background-color: var(--color-accent-bg-dark);
+				color: var(--color-text-light);
+			}
+			.cross-icon-btn {
+				background-color: var(--color-accent-bg-dark);
+			}
+			.cross-icon {
+				color: var(--color-text-light);
+			}
+			.owner-message {
+				background-color: hsla(000, 0.5%, 20%, 1);
+				color: var(--color-text-dark);
+			}
+			.home-links > a {
+				color: var(--color-text-dark);
+			}
+			.logo-a > a {
+				background-color: var(--color-text-dark);
+			}
+			.SingleList > li:hover {
+				background-color: hsla(220, 13%, 98%, 0.25);
+			}
+			.SingleList > li {
+				border-bottom: 0.5px solid var(--color-accent-bg-dark);
+			}
+			.ListItem > li:hover {
+				background-color: hsla(220, 13%, 98%, 0.25);
+			}
+			.ListItem > li {
+				border-bottom: 0.5px solid var(--color-accent-bg-dark);
+			}
+			.ListItem-badge > span {
+				color: white;
 			}
 		}
 	}
@@ -31,7 +64,7 @@
 
 			button.custom-button {
 				background-color: var(--color-accent-bg-light);
-				color: var(--color-text-light);
+				color: var(--color-text-dark);
 			}
 
 			button.custom-button:hover {
@@ -40,6 +73,35 @@
 
 			.Nav {
 				background-color: var(--color-accent-bg-light);
+				color: var(--color-text-dark);
+			}
+			.cross-icon-btn {
+				background-color: var(--color-accent-bg-light);
+			}
+			.cross-icon {
+				color: var(--color-text-dark);
+			}
+			.owner-message {
+				background-color: white;
+				color: var(--color-text-light);
+			}
+			.home-links > a {
+				color: var(--color-text-light);
+			}
+			.SingleList > li:hover {
+				background-color: hsla(220, 13%, 25%, 0.25);
+			}
+			.SingleList > li {
+				border-bottom: 0.5px solid var(--color-accent-bg-light);
+			}
+			.ListItem > li:hover {
+				background-color: hsla(220, 13%, 25%, 0.25);
+			}
+			.ListItem > li {
+				border-bottom: 0.5px solid var(--color-accent-bg-light);
+			}
+			.ListItem-badge > span {
+				color: black;
 			}
 		}
 	}
@@ -51,6 +113,7 @@
 
 		button.custom-button {
 			background-color: var(--color-accent-bg-dark);
+			color: var(--color-text-light);
 		}
 
 		button.custom-button:hover {
@@ -59,6 +122,38 @@
 
 		.Nav {
 			background-color: var(--color-accent-bg-dark);
+			color: var(--color-text-light);
+		}
+		.cross-icon-btn {
+			background-color: var(--color-accent-bg-dark);
+		}
+		.cross-icon {
+			color: var(--color-text-light);
+		}
+		.owner-message {
+			background-color: hsla(000, 0.5%, 20%, 1);
+			color: var(--color-text-dark);
+		}
+		.home-links > a {
+			color: var(--color-text-dark);
+		}
+		.logo-a > a {
+			background-color: var(--color-text-dark);
+		}
+		.SingleList > li:hover {
+			background-color: hsla(220, 13%, 98%, 0.25);
+		}
+		.SingleList > li {
+			border-bottom: 0.5px solid var(--color-accent-bg-dark);
+		}
+		.ListItem > li:hover {
+			background-color: hsla(220, 13%, 98%, 0.25);
+		}
+		.ListItem > li {
+			border-bottom: 0.5px solid var(--color-accent-bg-dark);
+		}
+		.ListItem-badge > span {
+			color: white;
 		}
 	}
 
@@ -68,7 +163,7 @@
 
 		button.custom-button {
 			background-color: var(--color-accent-bg-light);
-			color: var(--color-text-light);
+			color: var(--color-text-dark);
 		}
 
 		button.custom-button:hover {
@@ -77,6 +172,35 @@
 
 		.Nav {
 			background-color: var(--color-accent-bg-light);
+			color: var(--color-text-dark);
+		}
+		.cross-icon-btn {
+			background-color: var(--color-accent-bg-light);
+		}
+		.cross-icon {
+			color: var(--color-text-dark);
+		}
+		.owner-message {
+			background-color: white;
+			color: var(--color-text-light);
+		}
+		.home-links > a {
+			color: var(--color-text-light);
+		}
+		.SingleList > li:hover {
+			background-color: hsla(220, 13%, 25%, 0.25);
+		}
+		.SingleList > li {
+			border-bottom: 0.5px solid var(--color-accent-bg-light);
+		}
+		.ListItem > li:hover {
+			background-color: hsla(220, 13%, 25%, 0.25);
+		}
+		.ListItem > li {
+			border-bottom: 0.5px solid var(--color-accent-bg-light);
+		}
+		.ListItem-badge > span {
+			color: black;
 		}
 	}
 

diff --git a/src/index.css b/src/index.css
@@ -9,8 +9,8 @@
 
 	--color-bg-dark: var(--color-dark);
 	--color-bg-light: var(--color-light);
-	--color-accent-bg-dark: var(--color-dark-blue-two);
-	--color-accent-bg-light: var(--color-powder-blue);
+	--color-accent-bg-light: var(--color-dark-blue-two);
+	--color-accent-bg-dark: var(--color-powder-blue);
 	--color-text-dark: var(--color-white);
 	--color-text-light: var(--color-black);
 }