Skip to content

Commit

Permalink
Merge pull request #51 from the-collab-lab/mm-feature/update-listitem…
Browse files Browse the repository at this point in the history 
…-singlelist-styling

Mm feature/update listitem singlelist styling
  • Loading branch information
@marshjaja
marshjaja authored Oct 12, 2024
2 parents e0db288 + 6a1fa8f commit 7eba74b
Show file tree
Hide file tree
Showing 15 changed files with 207 additions and 163 deletions.
Binary file added public/img/light-pink-underline.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/ruby-underline.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 18 additions & 12 deletions src/components/CreateShoppingList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from 'react';
import { createList } from '../api/firebase';
import { useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
import { Input } from './ui/input';

export default function CreateShoppingList({ user, setListPath }) {
const [listName, setListName] = useState('');
Expand All @@ -23,27 +24,32 @@ export default function CreateShoppingList({ user, setListPath }) {
};

return (
<form onSubmit={handleSubmit} className="flex flex-row space-x-3 items-end">
<div className="flex flex-col">
<label htmlFor="shoppingList" className="text-xs font-extralight">
<form
onSubmit={handleSubmit}
className="relative w-full flex items-center justify-center gap-4 max-w-lg mx-auto "
>
<div className="flex flex-col w-full max-w-xs ">
<label htmlFor="shoppingList" className="text-sm font-light ">
Create a new list
</label>
<input
className="border-[1px] rounded-lg h-[3rem] focus-visible:outline-none focus:ring-1 focus:ring-green-500"
<Input
className="border-[1px] rounded-[5px] text-[1em] h-[3rem] pl-10 focus-visible:outline-none focus:ring-1 focus:ring-primary-green text-black dark:text-white bg-white dark:bg-bg-black"
id="shoppingList"
type="text"
value={listName}
onChange={(e) => setListName(e.target.value)}
required
/>
</div>

<button
type="submit"
className="bg-green-500 hover:bg-green-500 hover:bg-opacity-80 text-black font-bold h-[3rem] p-3 rounded-lg align-bottom"
>
Create +
</button>
<div className="flex pt-5">
<button
type="submit"
className="bg-light-green hover:bg-light-green dark:bg-primary-green dark:hover:bg-primary-green hover:bg-opacity-75 dark:hover:bg-opacity-75 text-black font-bold h-[3rem] px-5 rounded-[5px] flex items-center space-x-2"
>
<span>Create</span>
<span>+</span>
</button>
</div>
</form>
);
}
45 changes: 28 additions & 17 deletions src/components/ListItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,33 +66,39 @@ export function ListItem({
}, []);

return (
<li className="flex flex-row items-center justify-between rounded-[5px] text-[1em] space-x-5 w-full bg-white text-black h-[3.3rem]">
<div className="flex items-center gap-3 ml-4">
<li className="flex flex-row align-middle justify-between px-2 py-[4px] rounded-[3px] text-[0.9em] space-x-4 w-full bg-white dark:bg-[#2f3031] text-black dark:text-gray-200 shadow-md shadow-slate-400 dark:shadow-gray-600 border border-gray-300 dark:border-gray-500 sm:py-[8px] sm:rounded-[5px] sm:text-[1.2em] sm:space-x-8">
<div className="flex items-center gap-2 ml-2 sm:gap-3 sm:ml-4">
<input
type="checkbox"
id={id}
onChange={handleOnChange}
checked={isChecked}
disabled={isChecked}
className="w-5 h-5 cursor-pointer"
className="w-4 h-4 cursor-pointer sm:w-5 sm:h-5"
/>
<div
className={`flex items-center gap-2 ${isChecked ? 'line-through' : ''}`}
className={`flex items-center gap-1 ${isChecked ? 'line-through' : ''} sm:gap-2`}
>
<label
htmlFor={`${id}`}
className="capitalize justify-self-end text-lg"
className="capitalize text-sm hover:font-bold sm:text-lg"
>
{name}
</label>
</div>
<div className="bg-pink w-6 h-6 flex items-center justify-center rounded-full">
<span className="font-bold text-xs">{quantity}</span>
</div>
{quantity && (
<div className="bg-primary-pink text-black w-5 h-5 flex items-center justify-center rounded-full sm:w-6 sm:h-6">
<span className="font-bold text-xs">{quantity}</span>
</div>
)}
</div>
<div className="flex items-center gap-2">
<div className={`${getIndicatorColor(indicator)} rounded-[5px] px-3`}>
<p className="capitalize justify-self-end text-base">{indicator}</p>
<div className="flex items-center gap-1 sm:gap-2">
<div
className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
>
<p className="capitalize text-xs sm:text-sm text-black dark:text-gray-800">
{indicator}
</p>
</div>
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
<AlertDialogTrigger asChild>
Expand All @@ -102,24 +108,29 @@ export function ListItem({
id={id}
onClick={() => setIsAlertOpen(true)}
>
<Trash2 className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 sm:w-6 sm:h-6 md:w-7 md:h-7" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogContent className="p-6 sm:p-10">
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription className="text-black">
This action cannot be undone. Do you really want to delete{' '}
{name}?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={() => setIsAlertOpen(false)}>
<AlertDialogCancel
className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
onClick={() => setIsAlertOpen(false)}
>
Cancel
</AlertDialogCancel>
<AlertDialogAction
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
onClick={handleDelete}
className="bg-primary-pink text-white"
>
Continue
</AlertDialogAction>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ManageListForms/AddItemForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
<div className="flex w-full">
<Button
type="submit"
className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
className="bg-primary-pink text-black rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-80 text-sm p-6"
>
Add Item
</Button>
Expand Down
194 changes: 95 additions & 99 deletions src/components/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,50 +10,104 @@ export function NavBar({ darkMode, toggleDarkMode }) {
const { user } = useAuth();
const linkClass = ({ isActive }) =>
isActive
? 'bg-light-green dark:bg-primary-green dark:hover:bg-primary-green rounded-xl px-3 py-2 p-4'
: 'hover:opacity-70 dark:hover:text-white rounded-xl px-3 py-2 p-4';

? 'text-black bg-light-green dark:bg-primary-green dark:text-black rounded-xl px-3 py-2 p-4'
: 'text-black dark:text-white hover:opacity-70 dark:hover:text-white rounded-xl px-3 py-2 p-4';
return (
<>
<header className="bg-white dark:bg-black px-8 md:px-8 lg:px-20 pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
{/* Desktop top nav */}
<nav className="hidden lg:flex items-center justify-between p-4">
<div className="w-full lg:w-auto text-center lg:text-left">
<div className="max-w-[1200px] mx-auto">
<header className="bg-white dark:bg-black px-8 md:px-8 lg:px-20 pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
{/* Desktop top nav */}
<nav className="hidden lg:flex items-center justify-between p-4">
<div className="w-full lg:w-auto text-center lg:text-left">
<NavLink to="/" className="Nav-link">
{darkMode ? (
<img
src="/src/LOGO-white.png"
alt="GrocerEase logo"
className="w-[200px]"
/>
) : (
<img
src="/src/LOGO-black.png"
alt="GrocerEase logo"
className="w-[200px]"
/>
)}
</NavLink>
</div>
<div className="flex items-center space-x-4">
{!!user && <p>Welcome, {user.displayName}</p>}
<NavLink to="/" className={linkClass}>
<Button variant="link" className="text-base">
Home
</Button>
</NavLink>

<NavLink to="/list" className={linkClass}>
<Button variant="link" className="text-base">
List
</Button>
</NavLink>
<div className=" pt-2 pl-2">
{!!user ? (
<abbr title="Sign out">
<SignOutButton />
</abbr>
) : (
<abbr title="Sign in">
<SignInButton />
</abbr>
)}
</div>
<Button
onClick={toggleDarkMode}
className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
>
<abbr
title={
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
}
>
<button className=" rounded-full text-primary-pink hover:text-opacity-60">
{darkMode ? <Eclipse /> : <Sun />}
</button>
</abbr>
</Button>
</div>
</nav>

{/* Mobile/Tablet bottom nav */}
<nav className="flex lg:hidden items-center justify-between p-4">
<NavLink to="/" className="Nav-link">
{darkMode ? (
<img
src="/src/LOGO-white.png"
alt="GrocerEase logo"
className="w-[200px]"
className="w-[170px]"
/>
) : (
<img
src="/src/LOGO-black.png"
alt="GrocerEase logo"
className="w-[200px]"
className="w-[170px]"
/>
)}
</NavLink>
</div>
<div className="flex items-center space-x-4">
{!!user && <p>Welcome, {user.displayName}</p>}
<NavLink to="/" className={linkClass}>
<div className="flex items-center space-x-2">
<Button
variant="link"
className="text-black dark:text-white text-base"
onClick={toggleDarkMode}
className="p-2 text-primary-pink hover:text-opacity-60 rounded-full font-semibold"
>
Home
</Button>
</NavLink>
<NavLink to="/list" className={linkClass}>
<Button
variant="link"
className="text-black dark:text-white text-base"
>
List
<abbr
title={
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
}
>
<button className="px-2 rounded-full text-primary-pink hover:text-opacity-60">
{darkMode ? <Eclipse /> : <Sun />}
</button>
</abbr>
</Button>
</NavLink>
<div className=" pt-2">
{!!user ? (
<abbr title="Sign out">
<SignOutButton />
Expand All @@ -64,82 +118,24 @@ export function NavBar({ darkMode, toggleDarkMode }) {
</abbr>
)}
</div>
<Button
onClick={toggleDarkMode}
className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
>
<abbr
title={
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
}
>
<button className=" rounded-full text-primary-pink hover:text-opacity-60">
{darkMode ? <Eclipse /> : <Sun />}
</button>
</abbr>
</Button>
</div>
</nav>
</nav>
</header>

{/* Mobile/Tablet bottom nav */}
<nav className="flex lg:hidden items-center justify-between p-4">
<NavLink to="/" className="Nav-link">
{darkMode ? (
<img
src="/src/LOGO-white.png"
alt="GrocerEase logo"
className="w-[170px]"
/>
) : (
<img
src="/src/LOGO-black.png"
alt="GrocerEase logo"
className="w-[170px]"
/>
)}
</NavLink>
<div className="flex items-center space-x-2">
{!!user ? (
<abbr title="Sign out">
<SignOutButton />
</abbr>
) : (
<abbr title="Sign in">
<SignInButton />
</abbr>
)}
<Button
onClick={toggleDarkMode}
className="p-2 text-primary-pink hover:text-opacity-60 rounded-full font-semibold"
>
<abbr
title={
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
}
>
<button className="px-2 rounded-full text-primary-pink hover:text-opacity-60">
{darkMode ? <Eclipse /> : <Sun />}
</button>
</abbr>
</Button>
<nav className="block z-10 lg:hidden fixed bottom-0 left-0 right-0 shadow-lg p-4 bg-white dark:bg-black">
<div className="flex justify-around items-center">
<NavLink to="/" className={linkClass}>
<Button className="text-black dark:text-white text-base">
<House />
</Button>
</NavLink>
<NavLink to="/list" className={linkClass}>
<Button className="text-black dark:text-white text-base">
<ListPlus />
</Button>
</NavLink>
</div>
</nav>
</header>

<nav className="block lg:hidden fixed bottom-0 left-0 right-0 shadow-lg p-4 bg-white dark:bg-black">
<div className="flex justify-around items-center">
<NavLink to="/" className={linkClass}>
<Button className="text-black dark:text-white text-base">
<House />
</Button>
</NavLink>
<NavLink to="/list" className={linkClass}>
<Button className="text-black dark:text-white text-base">
<ListPlus />
</Button>
</NavLink>
</div>
</nav>
</div>
</>
);
}
Loading

0 comments on commit 7eba74b

Please sign in to comment.