style: Add gradient color to List Name disclosure, implement animatio…

…n on slideup and slidedown for disclosure

src/components/ListItem.jsx

@@ -131,7 +131,7 @@ export function ListItem({
 						<div className="break-all font-semibold">{name}</div>
 					</div>
 
-					<div className="flex items-center">
+					<div className="flex items-center gap-4">
 						<div
 							className={`${urgencyMap[sortCriteria.tag][mode]} text-2xl inline-flex items-center rounded-md p-2 text-2xl font-semibold ring-1 ring-inset mr-6`}
 						>

src/components/ModalDialog.jsx

@@ -24,12 +24,12 @@ export default function ModalDialog({ isOpen, onClose, children, title }) {
 								<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
 									<DialogTitle
 										as="h3"
-										className="text-2xl font-bold leading-6 text-gray-900"
+										className="text-3xl m-1 py-1 font-bold leading-6 text-txtPrimary"
 									>
 										{title}
 									</DialogTitle>
 									<div className="mt-2">
-										<p className="text-lg text-gray-500">{children}</p>
+										<p className="text-xl text-gray-500">{children}</p>
 									</div>
 								</div>
 							</div>

src/views/CreateList.jsx

@@ -43,15 +43,15 @@ export function CreateList({
 			onClose={() => setIsCreateListModalOpen(false)}
 			title={`Please enter a List Name`}
 			titleClassName="text-3xl font-bold"
-			className="p-8 rounded-lg shadow-lg bg-white max-w-lg mx-auto"
+			className="p-5 rounded-lg shadow-lg bg-white max-w-lg mx-auto"
 		>
 			<form onSubmit={handleSubmit}>
 				<input
 					id="list-name"
 					type="text"
 					value={listName}
 					onChange={handleChange}
-					className="m-6 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-lg py-3 px-4"
+					className="m-6 block w-[90%] rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-lg py-3 px-4"
 					placeholder="Add a list"
 				></input>
 

src/views/Disclosure.jsx

@@ -1,8 +1,3 @@
-// Allows users to expand and collapse content sections.
-//key features: toggles visibility of child elements based on open/closed
-// Uses a button to trigger the toggle(responds to both mouse and keyboard clicks)
-// Displays icon to indicate expand/colapsed (feel free to change icon if u like)
-// Manages accessibitity through aria attributes
 import { FaShareAlt } from 'react-icons/fa';
 import { NavLink } from 'react-router-dom';
 import { useEffect, useState } from 'react';
@@ -19,7 +14,6 @@ export function Disclosure({
 	selectedListPath,
 	listpath,
 	setListPath,
-	//setCurrentListPath,
 }) {
 	const [isOpen, setIsOpen] = useState(listpath === selectedListPath);
 	const [isShareModalOpen, setIsShareModalOpen] = useState(false);
@@ -50,18 +44,17 @@ export function Disclosure({
 		}
 	};
 
-	const handleShareClick = (listPath) => {
-		//setCurrentListPath(listPath);
+	const handleShareClick = () => {
 		setIsShareModalOpen(true);
 	};
 
 	return (
 		<div
-			className="border border-gray-300 rounded-md mb-2 w-[90%] mx-auto"
+			className="border border-gray-500 rounded-lg m-2 w-[90%] mx-auto shadow-md hover:shadow-lg"
 			id={id}
 		>
 			<button
-				className="flex items-center gap-4 justify-between cursor-pointer p-2 border-b border-gray-300 w-full relative break-all "
+				className="flex bg-list-gradient dark:bg-list-gradient-dark items-center gap-4 justify-between cursor-pointer p-2 border-b border-gray-500 w-full relative break-all rounded-lg "
 				id={`${id}-button`}
 				onClick={toggleDisclosure}
 				onKeyDown={handleKeyDown}
@@ -89,7 +82,10 @@ export function Disclosure({
 				/>
 			)}
 			{isOpen && (
-				<div id={`${id}-content`} hidden={!isOpen}>
+				<div
+					id={`${id}-content`}
+					className={`overflow-hidden ${isOpen ? 'animate-slideDown' : 'animate-slideUp'}`}
+				>
 					{children}
 				</div>
 			)}

src/views/List.jsx

@@ -31,7 +31,7 @@ export function List({ data, listPath }) {
 				>
 					Search dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
 				</label>
-				<div className="relative flex items-center  border-gray-300  px-2 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none dark:border-gray-600 mt-2 dark:placeholder-gray-400 dark:text-white has-[input:focus-visible]:outline has-[input:focus-visible]:outline-blue-300">
+				<div className="relative flex items-center  border-gray-300  px-2 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none dark:border-gray-600 mt-6 dark:placeholder-gray-400 dark:text-white has-[input:focus-visible]:outline has-[input:focus-visible]:outline-blue-300">
 					<FaSearch className="  w-5 h-5 mt-[3px] text-gray-500" />
 					<input
 						className=" border border-none bg-transparent grow focus:outline-0 p-2 "
@@ -65,7 +65,9 @@ export function List({ data, listPath }) {
 					))}
 				</div>
 			) : (
-				<p>No items to display</p>
+				<p className="flex items-center justify-center m-10">
+					No items to display
+				</p>
 			)}
 		</>
 	);

src/views/Share.jsx

@@ -41,7 +41,7 @@ export function Share({
 					<div className="mb-10">
 						<label
 							htmlFor="recipientEmail"
-							className="block text-2xl font-medium text-gray-800"
+							className="block text-2xl font-medium text-gray-800 mb-6"
 						>
 							{' '}
 							Please enter the email to share your list:{' '}

tailwind.config.js

@@ -31,6 +31,23 @@ export default {
 			backgroundImage: {
 				'radio-gradient':
 					'linear-gradient(to top, #34A0A4, #168AAD, #1A759F, #1E6091, #184E77)',
+				'list-gradient': 'radial-gradient(circle, #daf7dc, #A4D7E1)',
+				'list-gradient-dark':
+					'radial-gradient(circle, #184E77, #1A759F, #168AAD)',
+			},
+			keyframes: {
+				slideDown: {
+					'0%': { maxHeight: '0px', opacity: '0' },
+					'100%': { maxHeight: '1000px', opacity: '2' },
+				},
+				slideUp: {
+					'0%': { maxHeight: '1000px', opacity: '2' },
+					'100%': { maxHeight: '0px', opacity: '0' },
+				},
+			},
+			animation: {
+				slideDown: 'slideDown 0.5s ease-in-out forwards',
+				slideUp: 'slideUp 0.5s ease-in-out forwards',
 			},
 		},
 	},