convert styles to tailwind on home and layout

the-collab-lab · Oct 9, 2024 · be69d2d · be69d2d
1 parent 1d71354
commit be69d2d
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 38 deletions.
diff --git a/src/components/IconButton.jsx b/src/components/IconButton.jsx
@@ -8,7 +8,7 @@ export function IconButton({
 	return (
 		<Component
 			{...props}
-			className={`flex items-center justify-center px- py-4 rounded-md shadow-md transition duration-200 ease-in-out 
+			className={`flex items-center justify-center px-4 py-4 rounded-md shadow-md transition duration-200 ease-in-out 
 			${props.className} 
 			${props.disabled ? 'bg-[#184E77] text-black cursor-not-allowed' : 'bg-[#184E77] text-white hover:bg-[#1E6091]'}`}
 			disabled={props.disabled}

diff --git a/src/views/Disclosure.css b/src/views/Disclosure.css
@@ -1,4 +1,4 @@
-.Accordion {
+/* .Accordion {
 	border: 1px solid #ccc;
 	border-radius: 4px;
 	margin-bottom: 10px;
@@ -31,4 +31,4 @@
 
 .share-icon:hover {
 	transform: scale(1.2);
-}
+} */
diff --git a/src/views/Disclosure.jsx b/src/views/Disclosure.jsx
@@ -45,24 +45,23 @@ export function Disclosure({
 	};
 
 	return (
-		<div className="Accordion" id={id}>
+		<div
+			className="border border-gray-300 rounded-md mb-2 w-[70%] mx-auto"
+			id={id}
+		>
 			<button
-				className="Disclosure-header"
+				className="flex items-center justify-between cursor-pointer p-2 border-b border-gray-300 w-full relative"
 				id={`${id}-button`}
 				onClick={toggleDisclosure}
 				onKeyDown={handleKeyDown}
 				aria-controls={`${id}-content`}
 				aria-expanded={isOpen}
 			>
 				{isOpen ? iconExpanded : iconCollapsed}
-				<span>{listofNames}</span>
+				<span className="flex-grow text-center">{listofNames}</span>
 			</button>
 			{isOpen && (
-				<div
-					className="Disclosure-content"
-					id={`${id}-content`}
-					hidden={!isOpen}
-				>
+				<div id={`${id}-content`} hidden={!isOpen}>
 					{children}
 				</div>
 			)}

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Disclosure } from './Disclosure';
 import { List } from './List';
 import { IconButton } from '../components/IconButton';
-import './Home.css';
+//import './Home.css';
 import { Share } from './Share';
 import { CreateList } from './CreateList';
 import { ToastContainer } from 'react-toastify';
@@ -27,7 +27,7 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 	};
 
 	return (
-		<div className="Home">
+		<div className="Home flex flex-col space-y-2 p-4">
 			<ToastContainer />
 			{isCreateListModalOpen && (
 				<CreateList
@@ -50,22 +50,27 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 			) : (
 				<ul>
 					{lists.map((list) => (
-						<div key={list.path} className="list-container">
-							<Disclosure
-								key={`disclosure-${list.path}`}
-								listofNames={list.name}
-								iconExpanded={<FaAngleDown />}
-								iconCollapsed={<FaAngleRight />}
-								listpath={list.path}
-								currentListPath={listPath}
-								setListPath={setListPath}
-							>
-								<List data={data} listPath={list.path} />
-							</Disclosure>
+						<div
+							key={list.path}
+							className="flex items-start justify-between py-2"
+						>
+							<div className="flex-grow">
+								<Disclosure
+									key={`disclosure-${list.path}`}
+									listofNames={list.name}
+									iconExpanded={<FaAngleDown />}
+									iconCollapsed={<FaAngleRight />}
+									listpath={list.path}
+									currentListPath={listPath}
+									setListPath={setListPath}
+								>
+									<List data={data} listPath={list.path} />
+								</Disclosure>
+							</div>
 							<IconButton
 								aria-label="share list"
 								as={NavLink}
-								className="p-4"
+								className="flex items-center justify-center cursor-pointer p-2 border border-gray-300 rounded-md transition-transform duration-200 ease-in-out hover:scale-110"
 								label="Share"
 								key={`icon-${list.path}`}
 								IconComponent={FaShareAlt}

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -10,7 +10,7 @@ import { IconButton } from '../components/IconButton';
 import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
 import logo from '../assets/logo.png';
-import './Layout.css';
+//import './Layout.css';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -24,42 +24,40 @@ export function Layout() {
 	const { user } = useAuth();
 	return (
 		<>
-			<div className="Layout">
-				<header className="Layout-header">
+			<div className="flex flex-col min-h-screen">
+				<header className="bg-[var(--color-bg)] pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
 					{!!user && (
 						<div>
-							<img src={logo} alt="Logo" className="logo" />
+							<img src={logo} alt="Logo" className="mx-auto" />
 							<span>Signed in as {auth.currentUser.displayName}</span>
 						</div>
 					)}
 				</header>
-				<main className="Layout-main">
+				<main className="p-0 pb-[6.26rem] w-[min(72ch,100%)] mx-auto">
 					<Outlet />
 				</main>
-				<nav className="Nav">
-					<div className="Nav-container">
+				<nav className="bg-[var(--color-bg)] border-t border-[var(--color-border)] bottom-0 flex flex-row pb-[max(env(safe-area-inset-bottom),1rem)] pt-4 justify-center fixed w-full">
+					<div className="flex flex-row justify-evenly w-[min(72ch,100%)]">
 						{user ? (
 							<>
 								<IconButton
 									aria-label="View Lists"
 									as={NavLink}
-									className="Nav-link"
 									IconComponent={FaList}
 									label="View Lists"
 									to="/"
 								/>
 								<IconButton
 									aria-label="Add Item"
 									as={NavLink}
-									className="Nav-link"
 									IconComponent={FaCartPlus}
+									//className
 									label="Add Item"
 									to="/manage-list"
 								/>
 								<IconButton
 									aria-label="Sign Out"
 									as={SignOutButton}
-									className="Nav-link"
 									IconComponent={FaSignOutAlt}
 									label="Sign Out"
 								/>
@@ -68,7 +66,6 @@ export function Layout() {
 							<>
 								<IconButton
 									as={NavLink}
-									className="Nav-link"
 									IconComponent={FaInfoCircle}
 									label="Developers"
 									to="/developers"

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -23,7 +23,7 @@ export function List({ data, listPath }) {
 
 	return (
 		<>
-			<div className="listSearch">
+			<div>
 				<label htmlFor="search">Search Items </label>
 				<input
 					type="text"