Merge pull request #64 from the-collab-lab/normalize-font-sizes

Updated font sizing in all views, removed unused code from index.css

src/components/ContainerItems.jsx

@@ -22,7 +22,7 @@ export const ContainerItems = ({
 
 	return filteredItemsList[0] ? (
 		<section className="text-left">
-			<h2 className="font-poppins uppercase font-bold text-darkPurple pt-8">
+			<h2 className="font-poppins uppercase font-bold text-darkPurple pt-8 text-lg sm:text-xl">
 				{category}
 			</h2>
 			<ul>

src/components/ErrorMessage.jsx

@@ -1,5 +1,7 @@
 const ErrorMessage = ({ errorMessage }) => {
-	return <p className="text-alertRed mt-10">{errorMessage}</p>;
+	return (
+		<p className="text-alertRed mt-10 text-base sm:text-lg">{errorMessage}</p>
+	);
 };
 
 export default ErrorMessage;

src/components/ListButtons.jsx

@@ -5,7 +5,7 @@ const ListButtons = (props) => {
 	const buttonVariants = {
 		purple: 'flex items-center justify-center rounded-lg bg-lightPurple',
 		white:
-			'flex items-center justify-center  rounded-lg bg-puurWhite border text-darkPurple',
+			'flex items-center justify-center rounded-lg bg-white border text-darkPurple',
 	};
 
 	const iconVariants = {
@@ -14,12 +14,12 @@ const ListButtons = (props) => {
 	};
 
 	const textVariants = {
-		purple: 'ps-2 text-lg text-offWhite font-poppins',
-		white: 'ps-2 text-lg text-darkPurple font-poppins',
+		purple: 'ps-2 text-offWhite font-poppins',
+		white: 'ps-2 text-darkPurple font-poppins',
 	};
 
 	return (
-		<div className="grid sm:grid-cols-3 grid-cols-2 gap-x-2 py-6">
+		<div className="grid sm:grid-cols-3 grid-cols-2 gap-x-2 py-6 text-base sm:text-lg">
 			<button
 				className={`sm:col-span-2  py-5 ${buttonVariants[props.colorAdd]}`}
 				onClick={() => navigate('/manage-list')}

src/components/ListItem.jsx

@@ -21,7 +21,7 @@ export function ListItem({
 	return (
 		<div
 			href="/"
-			className="bg-lightGrey hover:bg-white rounded-lg p-5 my-3 font-poppins"
+			className="bg-lightGrey hover:bg-white rounded-lg p-5 my-3 font-poppins text-base sm:text-lg"
 		>
 			<li className="flex items-center justify-between">
 				<div className=" flex items-center justify-start">
@@ -53,7 +53,7 @@ export function ListItem({
 					</label>
 
 					<span
-						className={`text-lg ps-5 text-darkPurple ${isRecentlyPurchased && 'line-through'}`}
+						className={`ps-5 text-darkPurple ${isRecentlyPurchased && 'line-through'}`}
 					>
 						{name}
 					</span>

src/components/NavBar/NavBar.jsx

@@ -7,10 +7,10 @@ export function NavBar({ user, lists, listPath }) {
 	return (
 		<>
 			{/* DESKTOP MENU */}
-			<nav className="h-16 hidden fixed z-20 w-full lg:flex shadow-md bg-offWhite text-darkPurple">
+			<nav className="h-16 hidden fixed z-20 w-full lg:flex shadow-md bg-offWhite text-darkPurple text-lg sm:text-xl">
 				<div className="h-full w-full flex flex-row justify-between items-center xl:w-9/12 xl:mx-auto ">
 					<div className="h-full flex items-center pl-12">
-						<h2 className="font-amiri text-2xl font-bold">
+						<h2 className="font-amiri text-xl sm:text-2xl font-bold">
 							Smart Shopping List
 						</h2>
 					</div>
@@ -26,10 +26,12 @@ export function NavBar({ user, lists, listPath }) {
 				</div>
 			</nav>
 
-			<nav className="h-12 w-full flex flex-row justify-between lg:hidden relative shadow-md text-darkPurple bg-offWhite">
+			<nav className="h-12 w-full flex flex-row justify-between lg:hidden relative shadow-md text-darkPurple bg-offWhite text-lg sm:text-xl">
 				{/* MOBILE-MENU */}
 				<div className="h-full flex items-center pl-12">
-					<h2 className="font-amiri text-2xl font-bold">Smart Shopping List</h2>
+					<h2 className="font-amiri text-xl sm:text-2xl font-bold">
+						Smart Shopping List
+					</h2>
 				</div>
 				{!!user && (
 					<div className="flex items-center h-full pr-4">

src/components/NavBar/NavigationLink.jsx

@@ -7,7 +7,7 @@ export function NavigationLink({ text, destination, handleClick, icon }) {
 			to={destination}
 			className={({ isActive }) =>
 				[
-					'flex flex-row lg:pr-12 lg:pt-0 pt-6 text-darkPurple font-poppins text-lg',
+					'flex flex-row lg:pr-12 lg:pt-0 pt-6 text-darkPurple font-poppins',
 					isActive ? 'font-bold underline' : '',
 				].join(' ')
 			}

src/components/SearchList.jsx

@@ -25,7 +25,7 @@ export const SearchList = ({ data, setNewList }) => {
 		<form>
 			<div className="relative flex items-center ">
 				<input
-					className="bg-puurWhite border text-darkPurple rounded-lg col-span-1 w-full	font-poppins text-base p-5 "
+					className="bg-white border rounded-lg col-span-1 w-full	font-poppins p-5 "
 					id="search"
 					type="text"
 					onChange={(e) => handleFiltering(e)}

src/components/SingleList.jsx

@@ -30,7 +30,7 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) {
 	}
 
 	return (
-		<li className="mb-8 bg-lightPurple w-full text-puurWhite flex justify-end shadow-lg rounded-md transition ease-in-out relative text-lg sm:text-xl md:text-regular hover:bg-hoverPurple">
+		<li className="mb-8 bg-lightPurple w-full text-puurWhite flex justify-end shadow-lg rounded-md transition ease-in-out relative text-lg sm:text-xl hover:bg-hoverPurple">
 			<button
 				onClick={handleClick}
 				className="w-full px-4 py-2 overflow-x-hidden rounded-md"

src/index.css

@@ -7,61 +7,23 @@
 	font-style: normal;
 	font-weight: 400;
 	font-display: swap;
-	src: url(../public/fonts/Poppins/Poppins-Regular.ttf);
+	src: url(../fonts/Poppins/Poppins-Regular.ttf);
 }
 
 @font-face {
 	font-family: 'Poppins';
 	font-style: bold;
 	font-weight: 900;
 	font-display: swap;
-	src: url(../public/fonts/Poppins/Poppins-Bold.ttf);
+	src: url(../fonts/Poppins/Poppins-Bold.ttf);
 }
 
 @font-face {
 	font-family: 'Amiri';
 	font-style: normal;
 	font-weight: 400;
 	font-display: swap;
-	src: url(../public/fonts/Amiri/Amiri-Regular.ttf);
-}
-
-:root {
-	/* --color-black: hsla(220, 13%, 18%, 1);
-	--color-gray-dark: hsla(220, 13%, 25%, 1);
-	--color-white: hsla(210, 20%, 98%, 1);
-	--color-gray-light: hsla(220, 13%, 94%, 1);
-	--color-gray-medium-dark: hsla(0, 0%, 72%, 1);
-	--color-gray-medium-light: hsla(222, 7%, 34%, 1);
-	--color-emerald-green: hsla(168, 92%, 25%, 1);
-	--color-vermillion-green: hsla(168, 92%, 43%, 1);
-	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
-	--color-pastel-blue: hsla(215, 100%, 73%, 1);
-	--color-red: hsl(0, 68%, 42%);
-
-	--color-accent: var(--color-pastel-blue);
-	--color-bg: var(--color-black);
-	--color-border: hsla(220, 13%, 32%, 1);
-	--color-error: var(--color-red);
-	--color-text: var(--color-white);
-	--color-checked: var(--color-gray-medium-dark); */
-}
-
-@media screen and (prefers-color-scheme: light) {
-	:root {
-		/* --color-accent: var(--color-cobalt-blue);
-		--color-bg: var(--color-white);
-		--color-border: hsla(220, 13%, 78%, 1);
-		--color-text: var(--color-black);
-		--color-checked: var(--color-gray-medium-light); */
-	}
-}
-
-:root.theme-light {
-	/* --color-accent: var(--color-cobalt-blue);
-	--color-bg: var(--color-white);
-	--color-border: hsla(220, 13%, 78%, 1);
-	--color-text: var(--color-black); */
+	src: url(../fonts/Amiri/Amiri-Regular.ttf);
 }
 
 *,
@@ -79,17 +41,13 @@ body {
 }
 
 /**
- * Set the value of 1rem to 10px to make relative units
- * easier to work with.
- * (The default is 16px. 16 * 62.5% = 10)
+ * Keep 1 rem as 16px for better Tailwind integration.
  */
 html {
 	font-size: 16px;
 }
 
 body {
-	background-color: var(--color-bg);
-	color: var(--color-text);
 	font-family:
 		-apple-system,
 		BlinkMacSystemFont,
@@ -112,12 +70,7 @@ body {
 }
 
 code {
-	/* --color-bg: var(--color-gray-dark);
-	--color-text: var(--color-accent); */
-
-	/* background-color: var(--color-bg); */
 	border-radius: 4px;
-	/* color: var(--color-text); */
 	display: inline-block;
 	font-family:
 		Menlo,
@@ -129,13 +82,3 @@ code {
 	font-size: 0.9em;
 	padding: 0.15em 0.15em;
 }
-
-@media screen and (prefers-color-scheme: light) {
-	code {
-		/* --color-bg: var(--color-gray-light); */
-	}
-}
-
-:root.theme-light code {
-	/* --color-bg: var(--color-gray-light); */
-}

src/views/Layout.jsx

@@ -20,13 +20,13 @@ export function Layout({ lists, listPath }) {
 				) : (
 					<div className="flex justify-evenly m-20 lg:pt-0 lg:flex-row">
 						<div className="lg:w-fit flex flex-col items-center	ps-10">
-							<h3 className="w-96 font-amiri text-4xl text-darkPurple leading-[3.5rem]	">
+							<h1 className="max-w-sm font-amiri text-3xl sm:text-4xl text-darkPurple leading-[3rem] sm:leading-[3rem]">
 								Simplify your shopping with{' '}
 								<span className="font-semibold">SmartShoppingList</span>, the
 								intuitive list organizer.
-							</h3>
+							</h1>
 							<button
-								className="w-80 mt-8 p-2 rounded-md font-poppins text-lg  text-puurWhite bg-lightPurple"
+								className="w-80 mt-8 p-2 rounded-md font-poppins text-base sm:text-lg  text-puurWhite bg-lightPurple"
 								type="button"
 								onClick={handleClickSignIn}
 							>
@@ -44,7 +44,7 @@ export function Layout({ lists, listPath }) {
 					</div>
 				)}
 			</main>
-			<footer className="w-full fixed bottom-0  bg-offWhite text-darkPurple p-4 font-poppins text-xl">
+			<footer className="w-full fixed bottom-0  bg-offWhite text-darkPurple p-4 font-poppins text-lg sm:text-xl">
 				<div className="ps-8">
 					<a
 						href="https://github.com/the-collab-lab/tcl-71-smart-shopping-list/tree/main"

src/views/List.jsx

@@ -43,23 +43,25 @@ export function List({ data, lists, listPath, isLoadingListData }) {
 
 	return (
 		<div className="text-center flex flex-col py-2 min-w-96 justify-center items-center align-center mx-auto">
-			<h1 className="font-amiri text-4xl text-darkPurple p-8">{path}</h1>
+			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple p-8">
+				{path[0].toUpperCase() + path.slice(1)}
+			</h1>
 
 			{data.length === 0 ? (
-				<div className="text-2xl py-8 md:w-2/4 w-3/4">
+				<div className="text-xl sm:text-2xl py-8 md:w-2/4 w-3/4">
 					<p className="pb-12 text-darkPurple font-poppins">
 						This is your new list. There are no items added yet...
 					</p>
 					<p className="pb-12 text-darkPurple font-poppins">
 						You can now add items, specify when you need to purchase them,
 						and/or share the list with other users
 					</p>
-					<ListButtons colorAdd={'purple'} colorShare={'white'}></ListButtons>
+					<ListButtons colorAdd={'purple'} colorShare={'white'} />
 				</div>
 			) : (
-				<div className="py-8 md:w-2/4 w-3/4">
+				<div className="py-8 md:w-2/4 w-3/4 text-base sm:text-lg">
 					<SearchList data={sortedList} setNewList={setNewList} />
-					<ListButtons colorAdd={'white'} colorShare={'white'}></ListButtons>
+					<ListButtons colorAdd={'white'} colorShare={'white'} />
 					{categoryArray.map((category, i) => (
 						<ContainerItems
 							key={i}

src/views/ManageList.jsx

@@ -14,7 +14,6 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 	const [shareListErrMessage, setShareListErrMessage] = useState('');
 	let displayName;
 	for (let i = 0; i < listPath.length; i++) {
-		console.log(listPath[i]);
 		if (listPath[i] === '/') {
 			displayName = listPath.slice(i + 1);
 			break;
@@ -102,16 +101,21 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 
 	return (
 		<div className="my-16 flex flex-col text-center items-center text-darkPurple font-poppins px-4">
-			<h1 className="font-amiri text-4xl text-darkPurple p-8">{displayName}</h1>
-			{console.log(listPath)}
-			<div className="text-xl mx-auto py-8 md:w-2/4 w-3/4">
-				<p className="pb-12 text-darkPurple font-poppins">
+			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple p-8">
+				{displayName[0].toUpperCase() + displayName.slice(1)}
+			</h1>
+			<div className="mx-auto py-8 md:w-2/4 w-3/4">
+				<p className="pb-12 text-darkPurple font-poppins text-xl sm:text-2xl">
 					Add new items and share your list with other users
 				</p>
 			</div>
 			<section className="flex flex-col">
 				<div className="flex flex-col">
-					<form method="post" onSubmit={handleSubmit} className="flex flex-col">
+					<form
+						method="post"
+						onSubmit={handleSubmit}
+						className="flex flex-col text-base sm:text-lg"
+					>
 						<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
 							ADD A NEW ITEM
 						</h2>
@@ -172,7 +176,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 					<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
 						SHARE THE LIST
 					</h2>
-					<div className="flex flex-col sm:flex-row gap-4 text-base sm:text-2xl">
+					<div className="flex flex-col sm:flex-row gap-4">
 						<input
 							aria-label="Share the list"
 							type="email"