Skip to content

Commit 1acfd64

Browse files
didemydndidemydn
authored
Merge pull request #52 from the-collab-lab/dc-ListPage-css
2 parents e42f865 + 6a4c027 commit 1acfd64

File tree

3 files changed

+88
-79
lines changed

3 files changed

+88
-79
lines changed

‎src/components/AddItem.jsx‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -69,33 +69,45 @@ export function AddItem({ data, listPath }) {
6969

7070
return (
7171
<>
72-
<form onSubmit={handleNewItemSubmit}>
73-
<label htmlFor="name">Item name</label>
74-
<input
75-
id="name"
76-
type="text"
77-
placeholder="Enter item name"
78-
value={formNewItem.name}
79-
onChange={handleNewItemChange}
80-
name="name"
81-
required
82-
/>
72+
<form onSubmit={handleNewItemSubmit} className="add-item-form">
73+
{/* Item Name Section */}
74+
<div className="flex items-center mb-4">
75+
<label htmlFor="name" className="mr-2">
76+
Item name:{' '}
77+
</label>
78+
<input
79+
id="name"
80+
type="text"
81+
placeholder="Enter new item name"
82+
value={formNewItem.name}
83+
onChange={handleNewItemChange}
84+
name="name"
85+
required
86+
className="border p-2"
87+
/>
88+
</div>
8389

84-
<label htmlFor="nextPurchase">Urgency</label>
85-
<select
86-
name="nextPurchase"
87-
id="nextPurchase"
88-
onChange={handleNewItemChange}
89-
value={formNewItem.nextPurchase}
90-
required
91-
>
92-
<option value="">Select Urgency</option>
93-
<option value={7}>Soon</option>
94-
<option value={14}>Kind of soon</option>
95-
<option value={30}>Not soon</option>
96-
</select>
90+
{/* Urgency Section */}
91+
<div className="flex items-center mb-4">
92+
<label htmlFor="nextPurchase" className="mb-2">
93+
Urgency:{' '}
94+
</label>
95+
<select
96+
name="nextPurchase"
97+
id="nextPurchase"
98+
onChange={handleNewItemChange}
99+
value={formNewItem.nextPurchase}
100+
required
101+
className="border p-2 rounded mb-4"
102+
>
103+
<option value="">Select Urgency</option>
104+
<option value={7}>Soon</option>
105+
<option value={14}>Kind of soon</option>
106+
<option value={30}>Not soon</option>
107+
</select>
108+
</div>
97109

98-
<button>Add Item</button>
110+
<button type="submit">Add Item</button>
99111

100112
<p>{messageItem}</p>
101113
</form>

‎src/components/ListItem.css‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,14 @@
1-
.ListItem {
2-
display: flex;
3-
align-items: center;
4-
justify-content: space-between;
5-
padding: 5px;
6-
background-color: rgb(247, 238, 238);
7-
border: 1px solid #b9afaf;
8-
}
9-
10-
.item-info {
11-
display: flex;
12-
align-items: center;
13-
flex-grow: 1;
14-
}
15-
16-
.ListItem-checkbox {
17-
accent-color: var(--color-accent);
18-
}
19-
20-
.ListItem-label {
21-
margin-left: 0.2em;
22-
}
23-
24-
.item-category {
25-
font-weight: bold;
26-
margin-right: 20px;
27-
}
28-
29-
ul {
30-
list-style-type: none;
31-
padding: 0;
1+
.list-item {
2+
background-color: #ffe5cf;
3+
border: 2px solid #e5e7eb;
4+
border-color: #ff885b;
5+
margin: 5px;
6+
transition:
7+
background-color 0.3s,
8+
box-shadow 0.3s;
9+
}
10+
11+
.list-item:hover {
12+
background-color: #ff885b;
13+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
3214
}

‎src/components/ListItem.jsx‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import './ListItem.css';
3+
import { FaTrashCan } from 'react-icons/fa6';
4+
import { FaCartShopping } from 'react-icons/fa6';
35

46
export function ListItem({
57
name,
@@ -33,31 +35,44 @@ export function ListItem({
3335
};
3436

3537
const categoryColor = {
36-
soon: 'purple',
37-
'kind of soon': 'orange',
38-
'not soon': 'green',
39-
overdue: 'red',
40-
inactive: 'gray',
38+
soon: 'bg-purple-100 text-purple-600 border-purple-300',
39+
'kind of soon': 'bg-orange-100 text-orange-600 border-orange-300',
40+
'not soon': 'bg-green-100 text-green-600 border-green-300',
41+
overdue: 'bg-red-100 text-red-600 border-red-300',
42+
inactive: 'bg-gray-100 text-gray-600 border-gray-300',
4143
};
4244

4345
return (
44-
<li className="ListItem">
45-
<label>
46-
<input
47-
type="checkbox"
48-
checked={isChecked}
49-
onChange={onCheck}
50-
disabled={isChecked}
51-
/>
52-
<span className="item-name">{name}</span>
53-
</label>
54-
<span
55-
className="item-category"
56-
style={{ color: categoryColor[category] }}
57-
>
58-
{category}
59-
</span>
60-
<button onClick={handleDeleteButton}>delete</button>
61-
</li>
46+
<div className="list-item flex items-center justify-between p-3">
47+
<div className="flex items-center justify-between space-x-2">
48+
<label className="flex items-center space-x-2">
49+
<input
50+
type="checkbox"
51+
checked={isChecked}
52+
onChange={onCheck}
53+
disabled={isChecked}
54+
className="form-checkbox h-5 w-5 hover:text-red-700"
55+
/>
56+
<div className="flex items-center space-x-2">
57+
<FaCartShopping />
58+
<span className="item-name">{name}</span>
59+
</div>
60+
</label>
61+
<div className="flex items-center space-x-2">
62+
<span
63+
className={`px-2 py-1 border text-sm font-medium ${categoryColor[category]}`}
64+
style={{ color: categoryColor[category] }}
65+
>
66+
{category}
67+
</span>
68+
<button
69+
onClick={handleDeleteButton}
70+
className="text-light-500 hover:text-red-700"
71+
>
72+
<FaTrashCan />
73+
</button>
74+
</div>
75+
</div>
76+
</div>
6277
);
6378
}

0 commit comments

Comments
 (0)