Skip to content

Commit 7eba74b

Browse files
marshjajamarshjaja
authored
Merge pull request #51 from the-collab-lab/mm-feature/update-listitem-singlelist-styling
Mm feature/update listitem singlelist styling
2 parents e0db288 + 6a1fa8f commit 7eba74b

File tree

15 files changed

+207
-163
lines changed

15 files changed

+207
-163
lines changed

‎public/img/light-pink-underline.png‎

771 Bytes
Loading

‎public/img/ruby-underline.png‎

705 Bytes
Loading

‎src/components/CreateShoppingList.jsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import { createList } from '../api/firebase';
33
import { useNavigate } from 'react-router-dom';
44
import toast from 'react-hot-toast';
5+
import { Input } from './ui/input';
56

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

2526
return (
26-
<form onSubmit={handleSubmit} className="flex flex-row space-x-3 items-end">
27-
<div className="flex flex-col">
28-
<label htmlFor="shoppingList" className="text-xs font-extralight">
27+
<form
28+
onSubmit={handleSubmit}
29+
className="relative w-full flex items-center justify-center gap-4 max-w-lg mx-auto "
30+
>
31+
<div className="flex flex-col w-full max-w-xs ">
32+
<label htmlFor="shoppingList" className="text-sm font-light ">
2933
Create a new list
3034
</label>
31-
<input
32-
className="border-[1px] rounded-lg h-[3rem] focus-visible:outline-none focus:ring-1 focus:ring-green-500"
35+
<Input
36+
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"
3337
id="shoppingList"
3438
type="text"
3539
value={listName}
3640
onChange={(e) => setListName(e.target.value)}
3741
required
3842
/>
3943
</div>
40-
41-
<button
42-
type="submit"
43-
className="bg-green-500 hover:bg-green-500 hover:bg-opacity-80 text-black font-bold h-[3rem] p-3 rounded-lg align-bottom"
44-
>
45-
Create +
46-
</button>
44+
<div className="flex pt-5">
45+
<button
46+
type="submit"
47+
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"
48+
>
49+
<span>Create</span>
50+
<span>+</span>
51+
</button>
52+
</div>
4753
</form>
4854
);
4955
}

‎src/components/ListItem.jsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -66,33 +66,39 @@ export function ListItem({
6666
}, []);
6767

6868
return (
69-
<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]">
70-
<div className="flex items-center gap-3 ml-4">
69+
<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">
70+
<div className="flex items-center gap-2 ml-2 sm:gap-3 sm:ml-4">
7171
<input
7272
type="checkbox"
7373
id={id}
7474
onChange={handleOnChange}
7575
checked={isChecked}
7676
disabled={isChecked}
77-
className="w-5 h-5 cursor-pointer"
77+
className="w-4 h-4 cursor-pointer sm:w-5 sm:h-5"
7878
/>
7979
<div
80-
className={`flex items-center gap-2 ${isChecked ? 'line-through' : ''}`}
80+
className={`flex items-center gap-1 ${isChecked ? 'line-through' : ''} sm:gap-2`}
8181
>
8282
<label
8383
htmlFor={`${id}`}
84-
className="capitalize justify-self-end text-lg"
84+
className="capitalize text-sm hover:font-bold sm:text-lg"
8585
>
8686
{name}
8787
</label>
8888
</div>
89-
<div className="bg-pink w-6 h-6 flex items-center justify-center rounded-full">
90-
<span className="font-bold text-xs">{quantity}</span>
91-
</div>
89+
{quantity && (
90+
<div className="bg-primary-pink text-black w-5 h-5 flex items-center justify-center rounded-full sm:w-6 sm:h-6">
91+
<span className="font-bold text-xs">{quantity}</span>
92+
</div>
93+
)}
9294
</div>
93-
<div className="flex items-center gap-2">
94-
<div className={`${getIndicatorColor(indicator)} rounded-[5px] px-3`}>
95-
<p className="capitalize justify-self-end text-base">{indicator}</p>
95+
<div className="flex items-center gap-1 sm:gap-2">
96+
<div
97+
className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
98+
>
99+
<p className="capitalize text-xs sm:text-sm text-black dark:text-gray-800">
100+
{indicator}
101+
</p>
96102
</div>
97103
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
98104
<AlertDialogTrigger asChild>
@@ -102,24 +108,29 @@ export function ListItem({
102108
id={id}
103109
onClick={() => setIsAlertOpen(true)}
104110
>
105-
<Trash2 className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
111+
<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" />
106112
</Button>
107113
</AlertDialogTrigger>
108-
<AlertDialogContent>
114+
<AlertDialogContent className="p-6 sm:p-10">
109115
<AlertDialogHeader>
110-
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
111-
<AlertDialogDescription>
116+
<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
117+
Are you absolutely sure?
118+
</AlertDialogTitle>
119+
<AlertDialogDescription className="text-black">
112120
This action cannot be undone. Do you really want to delete{' '}
113121
{name}?
114122
</AlertDialogDescription>
115123
</AlertDialogHeader>
116124
<AlertDialogFooter>
117-
<AlertDialogCancel onClick={() => setIsAlertOpen(false)}>
125+
<AlertDialogCancel
126+
className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
127+
onClick={() => setIsAlertOpen(false)}
128+
>
118129
Cancel
119130
</AlertDialogCancel>
120131
<AlertDialogAction
132+
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
121133
onClick={handleDelete}
122-
className="bg-primary-pink text-white"
123134
>
124135
Continue
125136
</AlertDialogAction>

‎src/components/ManageListForms/AddItemForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
141141
<div className="flex w-full">
142142
<Button
143143
type="submit"
144-
className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
144+
className="bg-primary-pink text-black rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-80 text-sm p-6"
145145
>
146146
Add Item
147147
</Button>

‎src/components/NavBar.jsx‎

Lines changed: 95 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,104 @@ export function NavBar({ darkMode, toggleDarkMode }) {
1010
const { user } = useAuth();
1111
const linkClass = ({ isActive }) =>
1212
isActive
13-
? 'bg-light-green dark:bg-primary-green dark:hover:bg-primary-green rounded-xl px-3 py-2 p-4'
14-
: 'hover:opacity-70 dark:hover:text-white rounded-xl px-3 py-2 p-4';
15-
13+
? 'text-black bg-light-green dark:bg-primary-green dark:text-black rounded-xl px-3 py-2 p-4'
14+
: 'text-black dark:text-white hover:opacity-70 dark:hover:text-white rounded-xl px-3 py-2 p-4';
1615
return (
1716
<>
18-
<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">
19-
{/* Desktop top nav */}
20-
<nav className="hidden lg:flex items-center justify-between p-4">
21-
<div className="w-full lg:w-auto text-center lg:text-left">
17+
<div className="max-w-[1200px] mx-auto">
18+
<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">
19+
{/* Desktop top nav */}
20+
<nav className="hidden lg:flex items-center justify-between p-4">
21+
<div className="w-full lg:w-auto text-center lg:text-left">
22+
<NavLink to="/" className="Nav-link">
23+
{darkMode ? (
24+
<img
25+
src="/src/LOGO-white.png"
26+
alt="GrocerEase logo"
27+
className="w-[200px]"
28+
/>
29+
) : (
30+
<img
31+
src="/src/LOGO-black.png"
32+
alt="GrocerEase logo"
33+
className="w-[200px]"
34+
/>
35+
)}
36+
</NavLink>
37+
</div>
38+
<div className="flex items-center space-x-4">
39+
{!!user && <p>Welcome, {user.displayName}</p>}
40+
<NavLink to="/" className={linkClass}>
41+
<Button variant="link" className="text-base">
42+
Home
43+
</Button>
44+
</NavLink>
45+
46+
<NavLink to="/list" className={linkClass}>
47+
<Button variant="link" className="text-base">
48+
List
49+
</Button>
50+
</NavLink>
51+
<div className=" pt-2 pl-2">
52+
{!!user ? (
53+
<abbr title="Sign out">
54+
<SignOutButton />
55+
</abbr>
56+
) : (
57+
<abbr title="Sign in">
58+
<SignInButton />
59+
</abbr>
60+
)}
61+
</div>
62+
<Button
63+
onClick={toggleDarkMode}
64+
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"
65+
>
66+
<abbr
67+
title={
68+
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
69+
}
70+
>
71+
<button className=" rounded-full text-primary-pink hover:text-opacity-60">
72+
{darkMode ? <Eclipse /> : <Sun />}
73+
</button>
74+
</abbr>
75+
</Button>
76+
</div>
77+
</nav>
78+
79+
{/* Mobile/Tablet bottom nav */}
80+
<nav className="flex lg:hidden items-center justify-between p-4">
2281
<NavLink to="/" className="Nav-link">
2382
{darkMode ? (
2483
<img
2584
src="/src/LOGO-white.png"
2685
alt="GrocerEase logo"
27-
className="w-[200px]"
86+
className="w-[170px]"
2887
/>
2988
) : (
3089
<img
3190
src="/src/LOGO-black.png"
3291
alt="GrocerEase logo"
33-
className="w-[200px]"
92+
className="w-[170px]"
3493
/>
3594
)}
3695
</NavLink>
37-
</div>
38-
<div className="flex items-center space-x-4">
39-
{!!user && <p>Welcome, {user.displayName}</p>}
40-
<NavLink to="/" className={linkClass}>
96+
<div className="flex items-center space-x-2">
4197
<Button
42-
variant="link"
43-
className="text-black dark:text-white text-base"
98+
onClick={toggleDarkMode}
99+
className="p-2 text-primary-pink hover:text-opacity-60 rounded-full font-semibold"
44100
>
45-
Home
46-
</Button>
47-
</NavLink>
48-
<NavLink to="/list" className={linkClass}>
49-
<Button
50-
variant="link"
51-
className="text-black dark:text-white text-base"
52-
>
53-
List
101+
<abbr
102+
title={
103+
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
104+
}
105+
>
106+
<button className="px-2 rounded-full text-primary-pink hover:text-opacity-60">
107+
{darkMode ? <Eclipse /> : <Sun />}
108+
</button>
109+
</abbr>
54110
</Button>
55-
</NavLink>
56-
<div className=" pt-2">
57111
{!!user ? (
58112
<abbr title="Sign out">
59113
<SignOutButton />
@@ -64,82 +118,24 @@ export function NavBar({ darkMode, toggleDarkMode }) {
64118
</abbr>
65119
)}
66120
</div>
67-
<Button
68-
onClick={toggleDarkMode}
69-
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"
70-
>
71-
<abbr
72-
title={
73-
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
74-
}
75-
>
76-
<button className=" rounded-full text-primary-pink hover:text-opacity-60">
77-
{darkMode ? <Eclipse /> : <Sun />}
78-
</button>
79-
</abbr>
80-
</Button>
81-
</div>
82-
</nav>
121+
</nav>
122+
</header>
83123

84-
{/* Mobile/Tablet bottom nav */}
85-
<nav className="flex lg:hidden items-center justify-between p-4">
86-
<NavLink to="/" className="Nav-link">
87-
{darkMode ? (
88-
<img
89-
src="/src/LOGO-white.png"
90-
alt="GrocerEase logo"
91-
className="w-[170px]"
92-
/>
93-
) : (
94-
<img
95-
src="/src/LOGO-black.png"
96-
alt="GrocerEase logo"
97-
className="w-[170px]"
98-
/>
99-
)}
100-
</NavLink>
101-
<div className="flex items-center space-x-2">
102-
{!!user ? (
103-
<abbr title="Sign out">
104-
<SignOutButton />
105-
</abbr>
106-
) : (
107-
<abbr title="Sign in">
108-
<SignInButton />
109-
</abbr>
110-
)}
111-
<Button
112-
onClick={toggleDarkMode}
113-
className="p-2 text-primary-pink hover:text-opacity-60 rounded-full font-semibold"
114-
>
115-
<abbr
116-
title={
117-
darkMode ? 'Switch to light mode' : 'Switch to dark mode'
118-
}
119-
>
120-
<button className="px-2 rounded-full text-primary-pink hover:text-opacity-60">
121-
{darkMode ? <Eclipse /> : <Sun />}
122-
</button>
123-
</abbr>
124-
</Button>
124+
<nav className="block z-10 lg:hidden fixed bottom-0 left-0 right-0 shadow-lg p-4 bg-white dark:bg-black">
125+
<div className="flex justify-around items-center">
126+
<NavLink to="/" className={linkClass}>
127+
<Button className="text-black dark:text-white text-base">
128+
<House />
129+
</Button>
130+
</NavLink>
131+
<NavLink to="/list" className={linkClass}>
132+
<Button className="text-black dark:text-white text-base">
133+
<ListPlus />
134+
</Button>
135+
</NavLink>
125136
</div>
126137
</nav>
127-
</header>
128-
129-
<nav className="block lg:hidden fixed bottom-0 left-0 right-0 shadow-lg p-4 bg-white dark:bg-black">
130-
<div className="flex justify-around items-center">
131-
<NavLink to="/" className={linkClass}>
132-
<Button className="text-black dark:text-white text-base">
133-
<House />
134-
</Button>
135-
</NavLink>
136-
<NavLink to="/list" className={linkClass}>
137-
<Button className="text-black dark:text-white text-base">
138-
<ListPlus />
139-
</Button>
140-
</NavLink>
141-
</div>
142-
</nav>
138+
</div>
143139
</>
144140
);
145141
}

0 commit comments

Comments
 (0)