Skip to content

Commit c0181e3

Browse files
sar-mkosar-mko
authored
Merge pull request #69 from the-collab-lab/sm-accessibility-updates
Accessibility updates
2 parents 3bf1f50 + 06804a7 commit c0181e3

File tree

12 files changed

+258
-142
lines changed

12 files changed

+258
-142
lines changed

‎src/api/useAuth.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { addUserToDatabase } from './firebase.js';
88
* the button redirects the user to the Google OAuth sign-in page.
99
* After the user signs in, they are redirected back to the app.
1010
*/
11-
export const SignInButton = () => (
11+
export const SignInButton = ({ styles }) => (
1212
<button
1313
type="button"
1414
onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
15-
className="m-0 bg-accent"
15+
className={`m-0 bg-accent text-black font-bold hover:text-black hover:bg-third ${styles}`}
1616
>
1717
Sign In
1818
</button>
@@ -25,7 +25,7 @@ export const SignOutButton = () => (
2525
<button
2626
type="button"
2727
onClick={() => auth.signOut() && window.location.reload()}
28-
className="m-0 bg-accent"
28+
className="m-0 bg-accent text-black font-bold hover:text-black hover:bg-third "
2929
>
3030
Sign Out
3131
</button>

‎src/components/ListItem.jsx‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -54,49 +54,56 @@ export function ListItem({ item }) {
5454
};
5555

5656
return (
57-
<li className="ListItem space-x-3">
58-
<input
59-
type="checkbox"
60-
checked={checked}
61-
onChange={handleChange}
62-
disabled={checked}
63-
className="checkbox checkbox-primary"
64-
/>
65-
<h4 style={{ fontSize: '20px' }}>{name}</h4>
57+
<li
58+
className="ListItem space-x-3 flex items-center p-4 px-8 rounded-3xl shadow-md border border-primary space-x-10 justify-between"
59+
style={{ background: '#f8fdef' }}
60+
>
61+
<div className="flex items-center justify-between space-x-4">
62+
<input
63+
type="checkbox"
64+
checked={checked}
65+
onChange={handleChange}
66+
disabled={checked}
67+
className="checkbox checkbox-primary"
68+
/>
69+
<h4 style={{ fontSize: '20px' }}>{name}</h4>
70+
</div>
6671

67-
<button onClick={handleDelete} aria-label="Delete this Item">
68-
<DeleteIcon />
69-
</button>
70-
<div className="dropdown">
71-
<button
72-
onClick={() => setIsActive(!isActive)}
73-
className="focus:bg-secondary"
74-
aria-label="Get purchase details of this item"
75-
>
76-
<ExpandMoreIcon />
77-
</button>
78-
<div className="dropdown-content bg-base-200 rounded-box z-[1] w-60 p-4 shadow">
79-
<ul style={{ fontSize: '15px' }}>
80-
<li>
81-
<h4 className="font-bold">Last Purchase:</h4>
82-
<span>
83-
{' '}
84-
{dateLastPurchased
85-
? dateLastPurchased.toDate().toDateString()
86-
: 'N/A'}
87-
</span>
88-
</li>
89-
<li>
90-
<h4 className="font-bold">Next Purchase:</h4>
72+
<div className="flex space-x-6">
73+
<div className="dropdown">
74+
<button
75+
onClick={() => setIsActive(!isActive)}
76+
className="focus:bg-secondary"
77+
aria-label="Get purchase details of this item"
78+
>
79+
<ExpandMoreIcon />
80+
</button>
81+
<div className="dropdown-content bg-base-300 rounded-box z-[1] w-60 p-4 shadow">
82+
<ul style={{ fontSize: '15px' }}>
83+
<li>
84+
<h4 className="font-bold">Last Purchase:</h4>
85+
<span>
86+
{' '}
87+
{dateLastPurchased
88+
? dateLastPurchased.toDate().toDateString()
89+
: 'N/A'}
90+
</span>
91+
</li>
92+
<li>
93+
<h4 className="font-bold">Next Purchase:</h4>
9194

92-
<span> {dateNextPurchased?.toDate().toDateString()}</span>
93-
</li>
94-
<li>
95-
<h4 className="font-bold">Total Purchases: </h4>
96-
<span>{totalPurchases}</span>
97-
</li>
98-
</ul>
95+
<span> {dateNextPurchased?.toDate().toDateString()}</span>
96+
</li>
97+
<li>
98+
<h4 className="font-bold">Total Purchases: </h4>
99+
<span>{totalPurchases}</span>
100+
</li>
101+
</ul>
102+
</div>
99103
</div>
104+
<button onClick={handleDelete} aria-label="Delete this Item">
105+
<DeleteIcon />
106+
</button>
100107
</div>
101108
</li>
102109
);

‎src/components/ShareListComponent.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function ShareListComponent({ path, setListPath }) {
1212

1313
return (
1414
<>
15-
<button>
15+
<button aria-label="Share this item">
1616
<ShareIcon onClick={handleClick} />
1717
</button>
1818
</>

‎src/components/SingleList.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ export function SingleList({ name, path, setListPath }) {
1111

1212
return (
1313
<li className="SingleList">
14-
<button onClick={handleClick}>{name}</button>
14+
<button
15+
onClick={handleClick}
16+
className="font-bold text-white"
17+
style={{ background: '#676D16' }}
18+
>
19+
{name}
20+
</button>
1521
</li>
1622
);
1723
}

‎src/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@
2929
}
3030
button {
3131
@apply btn
32-
text-2xl font-sans font-normal btn-secondary m-2;
32+
text-2xl font-sans font-bold btn-secondary m-2 text-white border-none hover:bg-neutral;
3333
}
3434
/*temporary for the 'Hello from the [/list] Page' titles */
3535
p {
3636
@apply font-archivo text-4xl;
3737
}
3838
input[type='text'],
3939
select {
40-
@apply input input-bordered mx-3;
40+
@apply input input-bordered mx-3 text-2xl;
4141
}
4242
/* header {
4343
@apply navbar drop-shadow-lg

‎src/views/Home.jsx‎

Lines changed: 94 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import './Home.css';
22
import { SingleList, ShareListComponent } from '../components';
3-
import { createList, useAuth, deleteList, unfollowList } from '../api';
3+
import {
4+
createList,
5+
useAuth,
6+
deleteList,
7+
unfollowList,
8+
SignInButton,
9+
} from '../api';
410
import { Fragment, useState, useEffect } from 'react';
511
import { useNavigate } from 'react-router-dom';
612
import { useVoiceToText } from '../utils';
@@ -76,69 +82,94 @@ export function Home({ data, setListPath, setAllLists }) {
7682
console.log(error);
7783
}
7884
};
79-
8085
return (
81-
<div className="flex flex-col h-[70vh] my-8 p-8 bg-white rounded-3xl shadow-xl overflow-hidden mx-auto">
82-
<ul className="font-archivo flex-grow overflow-y-auto space-y-4">
83-
{data &&
84-
data.map((list) => {
85-
const uniqueId = crypto.randomUUID();
86-
return (
87-
<Fragment key={uniqueId}>
88-
<div className="flex items-center justify-between p-4 rounded-3xl shadow-md border">
89-
<SingleList
90-
name={list.name}
91-
setListPath={setListPath}
92-
path={list.path}
93-
/>
94-
<div className="flex items-center space-x-4">
95-
{!list.isShared && (
96-
<button
97-
onClick={() => handleDelete(list)}
98-
className="p-2"
99-
>
100-
<DeleteIcon />
101-
</button>
102-
)}
86+
<>
87+
{data.length ? (
88+
<div className="flex flex-col h-[70vh] my-8 p-8 rounded-3xl shadow-xl overflow-hidden mx-auto bg-neutral">
89+
<ul className="font-archivo flex-grow overflow-y-auto space-y-4 ">
90+
{data &&
91+
data.map((list) => {
92+
const uniqueId = crypto.randomUUID();
93+
return (
94+
<Fragment key={uniqueId}>
95+
<div
96+
className="flex items-center justify-between p-4 rounded-3xl shadow-md border border-primary"
97+
style={{ background: '#f8fdef' }}
98+
>
99+
<SingleList
100+
name={list.name}
101+
setListPath={setListPath}
102+
path={list.path}
103+
/>
104+
<div className="flex items-center space-x-4">
105+
{!list.isShared && (
106+
<button
107+
onClick={() => handleDelete(list)}
108+
aria-label="Delete this shopping list"
109+
>
110+
<DeleteIcon />
111+
</button>
112+
)}
113+
114+
{/* Remove button for shared lists */}
115+
{list.isShared && (
116+
<button
117+
onClick={() => handleUnfollowSharedList(list)}
118+
aria-label="Remove this shared list"
119+
>
120+
<RemoveCircleIcon />
121+
</button>
122+
)}
123+
<ShareListComponent
124+
name={list.name}
125+
setListPath={setListPath}
126+
path={list.path}
127+
/>
128+
</div>
129+
</div>
130+
</Fragment>
131+
);
132+
})}
133+
</ul>
134+
<form
135+
onSubmit={handleSubmit}
136+
className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 justify-center"
137+
>
138+
<label htmlFor="listName" className="text-white font-medium">
139+
Create a new list:
140+
</label>
141+
<div className="flex flex-col">
142+
<input
143+
type="text"
144+
id="listName"
145+
value={listName}
146+
onChange={(e) => setListName(e.target.value)}
147+
/>
148+
<span className="text-error">{error}</span>
149+
</div>
103150

104-
{/* Remove button for shared lists */}
105-
{list.isShared && (
106-
<button
107-
onClick={() => handleUnfollowSharedList(list)}
108-
className="p-2"
109-
>
110-
<RemoveCircleIcon />
111-
</button>
112-
)}
113-
<ShareListComponent
114-
name={list.name}
115-
setListPath={setListPath}
116-
path={list.path}
117-
/>
118-
</div>
119-
</div>
120-
</Fragment>
121-
);
122-
})}
123-
</ul>
124-
<form
125-
action=""
126-
onSubmit={handleSubmit}
127-
className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4"
128-
>
129-
<label htmlFor="listName">Create a new list:</label>
130-
<input
131-
type="text"
132-
id="listName"
133-
value={listName}
134-
onChange={(e) => setListName(e.target.value)}
135-
/>
136-
<button type="button" onClick={startListening}>
137-
{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
138-
</button>
139-
<button>Submit</button>
140-
<p>{error}</p>
141-
</form>
142-
</div>
151+
<button
152+
type="button"
153+
onClick={startListening}
154+
aria-label="Use microphone to add a new list"
155+
className="bg-accent text-black hover:bg-third"
156+
>
157+
{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
158+
</button>
159+
<button className="bg-accent text-black hover:bg-third">
160+
Submit
161+
</button>
162+
</form>
163+
</div>
164+
) : (
165+
<div className="flex flex-col h-[80vh] my-8 p-8 rounded-3xl overflow-hidden mx-auto place-content-center items-center ">
166+
<h1 className="text-center my-8 text-neutral text-6xl">
167+
{' '}
168+
Welcome to SnapShop!
169+
</h1>
170+
<SignInButton styles={'bg-neutral text-white btn-lg text-2xl'} />
171+
</div>
172+
)}
173+
</>
143174
);
144175
}

‎src/views/Layout.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useAuth, SignInButton, SignOutButton } from '../api';
66
const handleActive = ({ isActive }) => {
77
return {
88
fontWeight: isActive ? '900' : '',
9-
color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)',
9+
color: isActive ? 'rgb(237 208 0)' : 'white',
1010
};
1111
};
1212

@@ -28,7 +28,7 @@ export function Layout() {
2828
</div>
2929

3030
{/* Navbar on Desktop */}
31-
<div className="space-x-8 navbar-end hidden sm:block">
31+
<div className="space-x-8 hidden sm:block">
3232
<NavLink to="/" style={handleActive}>
3333
Home
3434
</NavLink>
@@ -154,3 +154,4 @@ export function Layout() {
154154
</>
155155
);
156156
}
157+
// style={{background:'#969877'}}

0 commit comments

Comments
 (0)