Merge pull request #48 from the-collab-lab/rs-style-list-component

Style List component
the-collab-lab · Apr 4, 2024 · 82e9486 · 82e9486
2 parents 0f1218b + f767aca
commit 82e9486
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 31 deletions.
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -30,14 +30,11 @@
 .ListItem-label {
 	margin-left: 0.2em;
 	width: 100%;
-	display: flex;
-	justify-content: space-between;
 }
 
 .ListItem-badge {
-	display: flex;
-	margin: 0px 10px;
-	align-items: center;
+	margin: 0;
+	margin-bottom: 0.5em;
 }
 
 .ListItem-badge > span {
@@ -51,6 +48,17 @@
 	margin: auto;
 	font-size: 1.3em;
 	font-weight: bold;
-	text-decoration: underline;
 	text-underline-offset: 5px;
 }
+
+.ListItem-container {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.ListItem-row {
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -86,22 +86,33 @@ export function ListItem({ listPath, item, name }) {
 
 	return (
 		<div className="ListItem">
-			<li>
-				<input
-					checked={isChecked}
-					onChange={handleChange}
-					type="checkbox"
-					id={item.id}
-				/>
-
-				<label className="ListItem-label" htmlFor={item.id}>
-					<p>{name}</p>
+			<li className="ListItem-container">
+				<div className="ListItem-row">
+					<input
+						checked={isChecked}
+						onChange={handleChange}
+						type="checkbox"
+						id={item.id}
+					/>
+					<label className="ListItem-label" htmlFor={item.id}>
+						<p>{name}</p>
+					</label>
+					<button
+						className="delete-btn"
+						aria-label={`Delete ${name}`}
+						onClick={handleDelete}
+					>
+						<FontAwesomeIcon className="delete-icon" icon={faTrashCan} />
+					</button>
+				</div>
+				<div className="ListItem-row">
 					{getUrgencyBadgeInfo && (
 						<p
 							className="ListItem-badge"
 							aria-describedby={`Item purchase urgency ${getUrgencyBadgeInfo.message}`}
 						>
 							<Badge
+								aria-describedby={`Item purchase urgency ${getUrgencyBadgeInfo.message}`}
 								radius="full"
 								size="3"
 								color={getUrgencyBadgeInfo.badgeColor}
@@ -110,10 +121,7 @@ export function ListItem({ listPath, item, name }) {
 							</Badge>
 						</p>
 					)}
-				</label>
-				<button aria-label={`Delete ${name}`} onClick={handleDelete}>
-					<FontAwesomeIcon icon={faTrashCan} /> Delete
-				</button>
+				</div>
 			</li>
 		</div>
 	);

diff --git a/src/components/ListOwnerMessage.css b/src/components/ListOwnerMessage.css
@@ -0,0 +1,8 @@
+.owner-message {
+	position: fixed;
+	width: min(72ch, 100%);
+	bottom: 5.18rem;
+	padding: 0.4em 0.4em;
+	margin: 0 auto;
+	background-color: white;
+}
diff --git a/src/components/ListOwnerMessage.jsx b/src/components/ListOwnerMessage.jsx
@@ -1,12 +1,17 @@
 import { useListOwnerDetails } from '../utils';
+import './ListOwnerMessage.css';
 
 export function ListOwnerMessage({ currentUserId, userIdFromPath, listName }) {
 	const sharedListOwner = useListOwnerDetails(userIdFromPath, listName);
 
 	if (currentUserId === userIdFromPath) {
-		return <p>You own this list.</p>;
+		return <p className="owner-message">You own this list.</p>;
 	} else if (sharedListOwner) {
-		return <p>This list belongs to {sharedListOwner.ownerName}.</p>;
+		return (
+			<p className="owner-message">
+				This list belongs to {sharedListOwner.ownerName}.
+			</p>
+		);
 	} else {
 		return null; // Handle the case where there's no owner information available
 	}

diff --git a/src/index.css b/src/index.css
@@ -57,8 +57,19 @@ html {
 body {
 	background-color: var(--color-bg);
 	color: var(--color-text);
-	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
-		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
 	font-size: 1.8rem;
 	line-height: 1.4;
 	margin: 0;
@@ -75,7 +86,12 @@ code {
 	border-radius: 4px;
 	color: var(--color-text);
 	display: inline-block;
-	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
 		monospace;
 	font-size: 0.9em;
 	padding: 0.15em 0.15em;
@@ -90,3 +106,18 @@ code {
 :root.theme-light code {
 	--color-bg: var(--color-gray-light);
 }
+
+.delete-btn {
+	box-sizing: border-box;
+	background-color: unset;
+	border: none;
+}
+
+.delete-icon {
+	height: 1.5em;
+}
+
+input[type='checkbox'] {
+	height: 1.4em;
+	width: 1.4em;
+}
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -10,7 +10,7 @@
 .Layout {
 	display: flex;
 	flex-direction: column;
-	height: 100dvh;
+	height: 100%;
 }
 
 .Layout > * {

diff --git a/src/views/List.css b/src/views/List.css
@@ -0,0 +1,3 @@
+.checkbox-prompt {
+	font-style: italic;
+}
diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -3,6 +3,7 @@ import { ListItem, ListOwnerMessage } from '../components';
 import { Link } from 'react-router-dom';
 import { comparePurchaseUrgency } from '../utils/comparePurchaseUrgency';
 import { useAuth } from '../api';
+import './List.css';
 import { Flex, Box, TextField, IconButton } from '@radix-ui/themes';
 import { MagnifyingGlassIcon, Cross1Icon } from '@radix-ui/react-icons';
 
@@ -21,12 +22,20 @@ export function List({ listPath, data, listName, userIdFromPath }) {
 
 	const sortedItems = filteredItems.sort(comparePurchaseUrgency);
 
+	if (!currentUserId) {
+		return (
+			<div>
+				<p>Sign in to view your list items.</p>
+			</div>
+		);
+	}
+
 	if (!data.length) {
 		return (
 			<div>
 				{currentUserId && listName && <p>List name: {listName}</p>}
 				<label htmlFor="add-first-item">
-					There are no items in this list. Click this button to add your first
+					There are no items in this list. Click this link to add your first
 					items!
 				</label>
 				<Link id="add-first-item" to="/manage-list">
@@ -75,13 +84,11 @@ export function List({ listPath, data, listName, userIdFromPath }) {
 					</IconButton>
 				)}
 			</Flex>
-			<p>Check off items as you shop, your list will reset after 24hrs.</p>
-			<p>Only manually uncheck if you didn't make the purchase.</p>
+			<p className="checkbox-prompt">Checked items will reset after 24hrs.</p>
 			<>
 				<ul>
 					<div className="column-name">
-						<p>Item Name</p>
-						<p>Purchase Priority</p>
+						<p>Item Name & Priority</p>
 					</div>
 					{sortedItems.map((item) => (
 						<ListItem