Skip to content

Commit 301cb4f

Browse files
GrannyYettaGrannyYetta
authored
Merge pull request #56 from the-collab-lab/rt-buttons
Rt buttons
2 parents b146d6b + d0eb255 commit 301cb4f

File tree

9 files changed

+163
-106
lines changed

9 files changed

+163
-106
lines changed

‎src/components/AddItem.jsx‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -68,49 +68,61 @@ export function AddItem({ data, listPath }) {
6868
};
6969

7070
return (
71-
<>
72-
<form onSubmit={handleNewItemSubmit} className="add-item-form">
71+
<div className="flex flex-col items-center justify-center mx-auto">
72+
<form onSubmit={handleNewItemSubmit} className="m-2 p-2 items-center">
7373
{/* Item Name Section */}
7474
<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-
/>
75+
<span className="text-center">
76+
<label htmlFor="name" className="mr-2">
77+
Item name:{' '}
78+
</label>
79+
<input
80+
id="name"
81+
type="text"
82+
placeholder="Enter new item name"
83+
value={formNewItem.name}
84+
onChange={handleNewItemChange}
85+
name="name"
86+
required
87+
className="border p-2"
88+
/>
89+
</span>
8890
</div>
8991

9092
{/* Urgency Section */}
9193
<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>
94+
<span className="text-center m-4">
95+
<label
96+
htmlFor="nextPurchase"
97+
className="justify-items-start m-2 p-2 mb-2"
98+
>
99+
Urgency:{' '}
100+
</label>
101+
<select
102+
name="nextPurchase"
103+
id="nextPurchase"
104+
onChange={handleNewItemChange}
105+
value={formNewItem.nextPurchase}
106+
required
107+
className="border p-2 rounded mb-4"
108+
>
109+
<option value="">Select Urgency</option>
110+
<option value={7}>Soon</option>
111+
<option value={14}>Kind of soon</option>
112+
<option value={30}>Not soon</option>
113+
</select>
114+
</span>
108115
</div>
109116

110-
<button type="submit">Add Item</button>
117+
<button
118+
type="submit"
119+
className="p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
120+
>
121+
Add Item
122+
</button>
111123

112124
<p>{messageItem}</p>
113125
</form>
114-
</>
126+
</div>
115127
);
116128
}

‎src/components/AddList.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,23 @@ export function AddList({ setListPath, userId, userEmail }) {
2525

2626
return (
2727
<>
28-
<form onSubmit={handleCreateListButton}>
29-
<label htmlFor="listName">List Name:</label>
28+
<form className="m-2" onSubmit={handleCreateListButton}>
29+
<label htmlFor="listName" className="text-2xl text-center m-2">
30+
List Name:
31+
</label>
3032
<input
33+
className="m-4"
3134
type="text"
3235
id="listName"
3336
value={listName}
3437
onChange={(e) => setListName(e.target.value)}
3538
placeholder="Enter the name of your new list"
3639
required
3740
/>
38-
<button type="submit" className="button">
41+
<button
42+
type="submit"
43+
className="m-4 p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
44+
>
3945
Create list
4046
</button>
4147
</form>

‎src/components/ListItem.jsx‎

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

65
export function ListItem({
76
name,
@@ -43,7 +42,7 @@ export function ListItem({
4342
};
4443

4544
return (
46-
<div className="list-item flex items-center justify-between p-3">
45+
<div className="list-item items-center justify-between p-3 rounded-xl">
4746
<div className="flex items-center justify-between space-x-2">
4847
<label className="flex items-center space-x-2">
4948
<input
@@ -60,7 +59,7 @@ export function ListItem({
6059
</label>
6160
<div className="flex items-center space-x-2">
6261
<span
63-
className={`px-2 py-1 border text-sm font-medium ${categoryColor[category]}`}
62+
className={`px-2 py-1 border text-sm font-medium uppercase ${categoryColor[category]}`}
6463
style={{ color: categoryColor[category] }}
6564
>
6665
{category}

‎src/components/SingleList.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import './SingleList.css';
1+
// import './SingleList.css';
22
import { useNavigate } from 'react-router-dom';
33
import { deleteList } from '../api';
4+
import { FaTrashCan } from 'react-icons/fa6';
45

56
export function SingleList({ name, path, setListPath, userId, userEmail }) {
67
const navigate = useNavigate();
@@ -24,10 +25,15 @@ export function SingleList({ name, path, setListPath, userId, userEmail }) {
2425
};
2526

2627
return (
27-
<li className="SingleList">
28+
<li className="flex flex-row items-baseline text-lg m-4 p-2 border-2 rounded-xl border-yellow-300 hover:shadow-lg">
2829
<button onClick={handleClick}>{name}</button>
2930
{isUsersList && (
30-
<button onClick={() => handleDelete(path, userEmail)}>X</button>
31+
<button
32+
className="flex place-self-center pl-2"
33+
onClick={() => handleDelete(path, userEmail)}
34+
>
35+
<FaTrashCan className="" />
36+
</button>
3137
)}
3238
</li>
3339
);

‎src/components/SingleListOld.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.SingleList {
2+
align-items: baseline;
3+
display: flex;
4+
flex-direction: row;
5+
font-size: 1.2em;
6+
}
7+
8+
.SingleList-label {
9+
margin-left: 0.2em;
10+
}

‎src/views/Home.jsx‎

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,52 @@ export function Home({ data, setListPath, userId, userEmail }) {
88

99
return (
1010
<div className="Home">
11-
{!!user ? (
12-
<>
13-
<p>Welcome back {auth.currentUser.displayName.split(' ')[0]}!</p>
14-
{data.length === 0 && (
15-
<p>
16-
{' '}
17-
You don&apos;t have any shopping lists yet. Start by creating your
18-
first one!
11+
<div className="container mx-auto px-2 flex flex-col items-center justify-center justify-items-center">
12+
{!!user ? (
13+
<>
14+
<p className="text-3xl ">
15+
Welcome back {auth.currentUser.displayName.split(' ')[0]}!
1916
</p>
20-
)}
21-
{data.length > 0 && (
22-
<ul>
23-
{data.map((list, id) => (
24-
<SingleList
25-
key={id}
26-
name={list.name}
27-
path={list.path}
28-
setListPath={setListPath}
29-
userId={userId}
30-
userEmail={userEmail}
31-
/>
32-
))}
33-
</ul>
34-
)}
35-
<AddList
36-
setListPath={setListPath}
37-
userId={userId}
38-
userEmail={userEmail}
39-
/>
40-
</>
41-
) : (
42-
<>
43-
<p>
44-
Welcome to the Shopping List app. Some catchy phrase / intro
45-
message. Picture below?
46-
</p>
47-
<SignInButton></SignInButton>
48-
</>
49-
)}
17+
{data.length === 0 && (
18+
<p>
19+
{' '}
20+
You don&apos;t have any shopping lists yet. Start by creating
21+
your first one!
22+
</p>
23+
)}
24+
{data.length > 0 && (
25+
<ul>
26+
{data.map((list, id) => (
27+
<SingleList
28+
key={id}
29+
name={list.name}
30+
path={list.path}
31+
setListPath={setListPath}
32+
userId={userId}
33+
userEmail={userEmail}
34+
/>
35+
))}
36+
</ul>
37+
)}
38+
<AddList
39+
setListPath={setListPath}
40+
userId={userId}
41+
userEmail={userEmail}
42+
/>
43+
</>
44+
) : (
45+
<>
46+
<p className="text-2xl text-center">
47+
Welcome to Shop&apos;n Go the smart app that keeps track of your
48+
shopping lists and schedule.
49+
</p>
50+
<p className="text-lg italic mt-5 text-center">
51+
Smart Choices, Swift Shopping!
52+
</p>
53+
<SignInButton className="rounded-full border-yellow-300 border-2 hover:bg-yellow-300"></SignInButton>
54+
</>
55+
)}
56+
</div>
5057
</div>
5158
);
5259
}

‎src/views/Layout.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Outlet, NavLink, Link } from 'react-router-dom';
22
import { SignInButton, SignOutButton, useAuth } from '../api/useAuth';
33

44
import {
5-
FaShoppingCart,
65
FaHome,
76
FaClipboardList,
87
FaShareAlt,
@@ -47,7 +46,7 @@ export function Layout() {
4746
{user && (
4847
<NavLink to="/manage-list" className="Nav-link">
4948
<FaShareAlt />
50-
<span className="hidden md:inline">Manage List</span>
49+
<span className="hidden md:inline">Settings</span>
5150
</NavLink>
5251
)}
5352
<NavLink to="/about" className="Nav-link">

‎src/views/List.jsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import { ListItem, AddItem } from '../components';
4+
import { FiDelete } from 'react-icons/fi';
45
import {
56
comparePurchaseUrgency,
67
updateItem,
@@ -9,6 +10,7 @@ import {
910

1011
export function List({ data, listPath, lists }) {
1112
const [searchItem, setSearchItem] = useState('');
13+
// eslint-disable-next-line no-unused-vars
1214
const [items, setItems] = useState([]);
1315

1416
const listTitle = listPath ? listPath.split('/')[1] : null;
@@ -66,8 +68,8 @@ export function List({ data, listPath, lists }) {
6668
};
6769

6870
return (
69-
<>
70-
<h2>{fixedListTitle}</h2>
71+
<div className="container mx-auto px-4 min-h-screen flex flex-col items-center justify-center justify-items-center mb-40">
72+
<h2 className="text-3xl">{fixedListTitle}</h2>
7173
{!listPath && lists.length > 0 && data.length > 0 && (
7274
<p>
7375
Oops! No list selected yet. Head to the <Link to="/">home page</Link>{' '}
@@ -99,20 +101,29 @@ export function List({ data, listPath, lists }) {
99101

100102
<form onSubmit={handleSearch}>
101103
<div>
102-
<label htmlFor="search-item-in-list"> Search items:</label>
103-
<input
104-
onChange={handleSearch}
105-
type="text"
106-
id="search-item-in-list"
107-
value={searchItem}
108-
placeholder="Search an item..."
109-
aria-label="Search for items"
110-
/>
111-
{searchItem && (
112-
<button type="button" onClick={clearSearch}>
113-
x
114-
</button>
115-
)}
104+
<span className="flex flex-col m-2 p-2 justify-evenly">
105+
<label
106+
htmlFor="search-item-in-list"
107+
className="text-center m-4"
108+
>
109+
{' '}
110+
Search items:
111+
</label>
112+
<input
113+
className="border"
114+
onChange={handleSearch}
115+
type="text"
116+
id="search-item-in-list"
117+
value={searchItem}
118+
placeholder="Search an item..."
119+
aria-label="Search for items"
120+
/>
121+
{searchItem && (
122+
<button type="button" onClick={clearSearch}>
123+
<FiDelete />
124+
</button>
125+
)}
126+
</span>
116127
</div>
117128
</form>
118129

@@ -152,6 +163,6 @@ export function List({ data, listPath, lists }) {
152163
)}
153164
</>
154165
)}
155-
</>
166+
</div>
156167
);
157168
}

0 commit comments

Comments
 (0)