Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mm feature/update listitem singlelist styling #51

Merged
merged 5 commits into from
Oct 12, 2024
Merged

Mm feature/update listitem singlelist styling #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
65885a3
style: Re-apply missing styles to `Home`, `List` pages and elements w…
marshjaja Oct 7, 2024
27b8308
add: Update styles and fix z-index issue on `Home` page for `SingleLi…
marshjaja Oct 7, 2024
b96f7d9
fix: Adjust styling for Home and List views and related files to alig…
marshjaja Oct 10, 2024
deaad99
add: Requested changes
marshjaja Oct 12, 2024
6a1fa8f
Merge branch 'feat/setup-tailwind-shadcn' into mm-feature/update-list…
marshjaja Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/img/light-pink-underline.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading