Skip to content

Commit ed975e4

Browse files
Wyna-7Wyna-7
committed
Merge branch 'feat/setup-tailwind-shadcn' into qg-feat-delete-list
2 parents 07e75a0 + 7eba74b commit ed975e4

18 files changed

+374
-175
lines changed

‎package-lock.json‎

Lines changed: 105 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"dependencies": {
1010
"@radix-ui/react-alert-dialog": "^1.1.2",
1111
"@radix-ui/react-dialog": "^1.1.1",
12+
"@radix-ui/react-radio-group": "^1.2.1",
1213
"@radix-ui/react-select": "^2.1.2",
1314
"@radix-ui/react-slot": "^1.1.0",
1415
"@radix-ui/react-tooltip": "^1.1.3",
@@ -20,6 +21,7 @@
2021
"react": "^18.3.1",
2122
"react-dom": "^18.3.1",
2223
"react-hot-toast": "^2.4.1",
24+
"react-icon": "^1.0.0",
2325
"react-icons": "^5.3.0",
2426
"react-router-dom": "^6.26.0",
2527
"tailwind-merge": "^2.5.2",

‎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: 31 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,22 +108,30 @@ export function ListItem({
102108
id={id}
103109
onClick={() => setIsAlertOpen(true)}
104110
>
105-
<Trash2 className="text-main-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>
120-
<AlertDialogAction onClick={handleDelete}>
131+
<AlertDialogAction
132+
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
133+
onClick={handleDelete}
134+
>
121135
Continue
122136
</AlertDialogAction>
123137
</AlertDialogFooter>

‎src/components/ManageListForms/AddItemForm.jsx‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@ import { addItem } from '../../api/firebase';
33
import toast from 'react-hot-toast';
44
import { Button } from '../ui/button';
55
import { Input } from '../ui/input';
6-
import {
7-
Select,
8-
SelectTrigger,
9-
SelectContent,
10-
SelectItem,
11-
SelectValue,
12-
} from '../ui/select';
6+
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
137

148
export default function AddItemForm({ listPath, data, handleOpenModal }) {
159
const [formData, setFormData] = useState({
@@ -30,7 +24,9 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
3024

3125
const formattedItemName = formData.itemName
3226
.toLowerCase()
33-
.replace(/[^a-z]/g, '');
27+
.replace(/^\s\s*/, '')
28+
.replace(/\s\s*$/, '')
29+
.replace(/[^a-zA-Z ]/g, '');
3430

3531
const match = data.find((item) => item.name === formattedItemName);
3632

@@ -60,7 +56,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
6056
setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
6157
};
6258

63-
const handleSelectChange = (value) => {
59+
const handleRadioChange = (value) => {
6460
setFormData((prevFormData) => ({
6561
...prevFormData,
6662
daysUntilNextPurchase: value,
@@ -90,16 +86,40 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
9086
<label htmlFor="daysUntilNextPurchase" className="text-md font-medium">
9187
How soon would you like to buy this again?
9288
</label>
93-
<Select onValueChange={handleSelectChange}>
94-
<SelectTrigger>
95-
<SelectValue placeholder="Select Time" />
96-
</SelectTrigger>
97-
<SelectContent>
98-
<SelectItem value="7">Soon (7 days)</SelectItem>
99-
<SelectItem value="14">Kind of soon (14 days)</SelectItem>
100-
<SelectItem value="30">Not soon (30 days)</SelectItem>
101-
</SelectContent>
102-
</Select>
89+
<RadioGroup
90+
onValueChange={handleRadioChange}
91+
className="flex my-2 items-center justify-center gap-4"
92+
id="daysUntilNextPurchase"
93+
>
94+
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
95+
<RadioGroupItem
96+
value="7"
97+
id="soon"
98+
name="timeFrame"
99+
className="border border-soon text-soon"
100+
/>
101+
<label htmlFor="soon" className="font-semibold text-sm">
102+
Soon
103+
</label>
104+
</div>
105+
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
106+
<RadioGroupItem
107+
value="14"
108+
id="kind-of-soon"
109+
name="timeFrame"
110+
className="border border-kind-of-soon text-kind-of-soon"
111+
/>
112+
<label htmlFor="kind-of-soon" className="font-semibold text-sm">
113+
Kind of soon
114+
</label>
115+
</div>
116+
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
117+
<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
118+
<label htmlFor="not of soon" className="font-semibold text-sm">
119+
Not soon
120+
</label>
121+
</div>
122+
</RadioGroup>
103123
</div>
104124
<div className="flex flex-col items-start gap-2 w-full">
105125
<label htmlFor="quantity" className="text-md font-medium">
@@ -121,7 +141,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
121141
<div className="flex w-full">
122142
<Button
123143
type="submit"
124-
className="bg-pink text-white rounded-xl w-full hover:bg-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"
125145
>
126146
Add Item
127147
</Button>

0 commit comments

Comments
 (0)