Skip to content

Commit 6d8843b

Browse files
eternalmahaeternalmaha
authored
Merge branch 'main' into ma/designing-responsive-listview
2 parents b998305 + 101c350 commit 6d8843b

25 files changed

+415
-254
lines changed

‎src/api/useAuth.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
2222

2323
return (
2424
<Button
25+
className="custom-button"
2526
type="button"
2627
onClick={() => {
2728
signInWithPopup(auth, new GoogleAuthProvider())
@@ -37,7 +38,6 @@ export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
3738
);
3839
});
3940
}}
40-
className="m-2"
4141
>
4242
{isSignIn ? "Sign In" : "Sign Up"}
4343
</Button>
@@ -69,7 +69,6 @@ export const SignOutButton = () => {
6969
);
7070
});
7171
}}
72-
className="m-2"
7372
>
7473
Sign Out
7574
</Button>

‎src/icons/GithubLogo.svg ‎src/assets/icons/GithubLogo.svg

File renamed without changes.

‎src/icons/LinkedInLogo.svg ‎src/assets/icons/LinkedInLogo.svg

File renamed without changes.

‎src/assets/images/sample.png

184 KB
Loading

‎src/components/AuthenticatedNavBar.tsx

-26
This file was deleted.

‎src/components/CreateList.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@ export function CreateList({ user, setListPath }: Props) {
6464
/>
6565
<br />
6666
<div className="custom-button-wrapper">
67-
<Button aria-label="Create new shopping list" type="submit">
67+
<Button
68+
className="custom-button"
69+
aria-label="Create new shopping list"
70+
type="submit"
71+
>
6872
Create List
6973
</Button>
7074
</div>

‎src/components/FilterListInput.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ export function FilterListInput({
3838
aria-label="Filter items in the list"
3939
placeholder="Search items..."
4040
/>
41-
<Button onClick={handleClear}>Clear</Button>
41+
<Button className="custom-button" onClick={handleClear}>
42+
Clear
43+
</Button>
44+
4245
</InputGroup>
4346
</Form>
4447
);

‎src/components/ListItem.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export function ListItemCheckBox({ item, listPath }: Props) {
122122
};
123123

124124
return (
125+
125126
<div className="d-flex flex-column justify-content-center mt-5">
126127
<span
127128
className={`UrgencyStatus text-nowrap ms-5 px-5 ${urgencyStatus.replace(/\s/g, "-")}`}

‎src/components/NavBar.scss

+48-27
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,56 @@
1-
.Nav {
2-
background-color: var(--color-bg);
3-
border-top: 1px solid var(--color-border);
4-
bottom: 0;
5-
display: flex;
6-
flex-direction: row;
7-
padding-bottom: max(env(safe-area-inset-bottom), 1rem);
8-
padding-top: 1rem;
9-
place-content: center;
10-
position: fixed;
11-
width: 100%;
12-
13-
&__container {
14-
display: flex;
15-
flex-direction: row;
16-
justify-content: space-evenly;
17-
width: min(72ch, 100%);
1+
@import "../styles/variables.scss";
2+
3+
.navbar {
4+
.navbar-brand {
5+
font-size: 3.5rem !important;
6+
7+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
8+
9+
@media (max-width: 430px) {
10+
font-size: 3rem !important;
11+
}
12+
@media (max-width: 375px) {
13+
font-size: 2.5rem !important;
14+
}
1815
}
1916

20-
&__link {
21-
--color-text: var(--color-accent);
22-
color: var(--color-text);
23-
font-size: 1.4em;
24-
flex: 0 1 auto;
17+
.nav-link {
18+
color: $primary-beige;
19+
font-size: 1.5rem;
2520
line-height: 1;
26-
padding: 0.8rem;
27-
text-align: center;
28-
text-underline-offset: 0.1em;
2921

3022
&.active {
31-
text-decoration-thickness: 0.22em;
32-
text-underline-offset: 0.1em;
23+
text-decoration: underline;
24+
color: $primary-beige !important;
25+
text-underline-offset: 0.3em;
26+
}
27+
28+
&:hover {
29+
color: $secondary-blue;
3330
}
3431
}
32+
33+
.navbar .navbar-toggler {
34+
background-color: $primary-beige;
35+
}
36+
}
37+
38+
.navbar button {
39+
background-color: $primary-beige;
40+
color: $secondary-blue;
41+
font-weight: bold;
42+
border: none;
43+
44+
@media (hover: hover) {
45+
background-color: $secondary-blue;
46+
color: $primary-beige;
47+
}
48+
49+
@media (min-width: 431px) {
50+
font-size: 1.5rem;
51+
text-align: center;
52+
border: none;
53+
padding: 0.5rem;
54+
width: 11rem;
55+
}
3556
}

‎src/components/SingleList.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export function SingleList({ name, path, setListPath }: Props) {
1919

2020
return (
2121
<li className="SingleList">
22-
<Button onClick={handleClick}>{name}</Button>
22+
<Button className="custom-button" onClick={handleClick}>
23+
{name}
24+
</Button>
2325
</li>
2426
);
2527
}

‎src/components/authenticated/AuthenticatedNavBar.tsx

+33-14
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,40 @@ import "../NavBar.scss";
99

1010
export function AuthenticatedNavBar() {
1111
return (
12-
<Navbar expand="lg" fixed="bottom" className="Nav">
13-
<Container className="d-flex justify-content-around Nav_container">
12+
<Navbar
13+
collapseOnSelect
14+
expand="md"
15+
className="bg-secondary rounded-bottom-3 pt-0"
16+
>
17+
<Container className="align-items-center justify-content-evenly">
18+
<Navbar.Brand className="bg-primary rounded-bottom-3 text-center mb-3 px-3 text-dark fw-bolder shadow">
19+
GrocerEase
20+
</Navbar.Brand>
21+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
22+
<Navbar.Collapse>
23+
<Nav className="flex-grow-1 justify-content-evenly align-items-center fw-bolder p-1 text-center">
24+
<Nav.Link as={NavLink} to="/" aria-label="Home" eventKey={"1"}>
25+
Home
26+
</Nav.Link>
27+
<Nav.Link
28+
as={NavLink}
29+
to="/manage-list"
30+
aria-label="Manage List"
31+
eventKey={"2"}
32+
>
33+
Manage List
34+
</Nav.Link>
35+
<Nav.Link
36+
as={NavLink}
37+
to="/about"
38+
aria-label="About"
39+
eventKey={"3"}
40+
>
41+
About
42+
</Nav.Link>
43+
</Nav>
44+
</Navbar.Collapse>
1445
<SignOutButton />
15-
<Nav.Link as={NavLink} to="/" className="Nav__link" aria-label="Home">
16-
Home
17-
</Nav.Link>
18-
19-
<Nav.Link
20-
as={NavLink}
21-
to="/manage-list"
22-
className="Nav__link"
23-
aria-label="Manage List"
24-
>
25-
Manage List
26-
</Nav.Link>
2746
</Container>
2847
</Navbar>
2948
);

‎src/components/forms/AddItemForm.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -180,11 +180,13 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
180180
/>
181181
Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
182182
</Form.Label>
183-
<Button type="submit" aria-label="Add item to shopping list">
183+
<Button className="custom-button" type="submit" aria-label="Add item to shopping list">
184184
Add Item
185185
</Button>
186186
</fieldset>
187+
187188
</Form>
189+
188190
</section>
189191
);
190192
}

‎src/components/forms/ItemQuantityForm.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -59,25 +59,27 @@ export function ItemQuantityForm({
5959
onChange={(e) => setItemQuantity(Number(e.target.value))}
6060
disabled={!edit}
6161
/>
62+
6263
<div>
6364
{edit ? (
6465
<>
65-
<Button onClick={updateItemQuantity}>
66+
<Button className="custom-button" onClick={updateItemQuantity}>
6667
<span className="d-none d-md-inline"> Save </span>
6768
<IoMdCheckmark className="d-block d-md-none" />
6869
</Button>{" "}
69-
<Button onClick={toggleEdit}>
70+
<Button className="custom-button" onClick={toggleEdit}>
7071
<span className="d-none d-md-inline">Cancel</span>
7172
<GiCancel className="d-block d-md-none" />
7273
</Button>
7374
</>
7475
) : (
75-
<Button onClick={toggleEdit}>
76+
<Button className="custom-button" onClick={toggleEdit}>
7677
<span className="d-none d-md-inline">Edit</span>
7778
<FaEdit className="d-block d-md-none" />
7879
</Button>
7980
)}
8081
</div>
8182
</div>
83+
8284
);
8385
}

‎src/components/forms/ShareListForm.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,11 @@ const ShareListForm = ({ listPath }: Props) => {
6666
aria-label="Enter the user email address to share list"
6767
aria-required
6868
/>
69-
<Button type="submit" aria-label="submits form to share shopping list">
69+
70+
<Button className="custom-button" type="submit" aria-label="submits form to share shopping list">
7071
<FaRegShareSquare />
7172
<span>Share</span>
73+
7274
</Button>
7375
</InputGroup>
7476
</Form>

‎src/components/unauthenticated/UnauthenticatedNavBar.tsx

+25-13
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,31 @@ import "../NavBar.scss";
88

99
export function UnauthenticatedNavBar() {
1010
return (
11-
<Navbar expand="lg" fixed="bottom" className="Nav">
12-
<Container className="d-flex justify-content-around Nav-container">
13-
<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
14-
Home
15-
</Nav.Link>
16-
<Nav.Link
17-
as={NavLink}
18-
to="/about"
19-
className="Nav-link"
20-
aria-label="About"
21-
>
22-
About
23-
</Nav.Link>
11+
<Navbar
12+
collapseOnSelect
13+
expand="md"
14+
className="bg-secondary rounded-bottom-3 pt-0"
15+
>
16+
<Container>
17+
<Navbar.Brand className="bg-primary rounded-bottom-3 text-center mb-3 px-3 text-dark fw-bolder shadow">
18+
GrocerEase
19+
</Navbar.Brand>
20+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
21+
<Navbar.Collapse id="basic-navbar-nav">
22+
<Nav className="flex-grow-1 justify-content-evenly align-items-center fw-bolder p-1 text-center">
23+
<Nav.Link as={NavLink} to="/" aria-label="Home" eventKey={"1"}>
24+
Home
25+
</Nav.Link>
26+
<Nav.Link
27+
as={NavLink}
28+
to="/about"
29+
aria-label="About"
30+
eventKey={"2"}
31+
>
32+
About
33+
</Nav.Link>
34+
</Nav>
35+
</Navbar.Collapse>
2436
</Container>
2537
</Navbar>
2638
);

‎src/declarations.d.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Declare modules for image types
2+
declare module "*.png" {
3+
const value: string;
4+
export default value;
5+
}
6+
7+
declare module "*.jpg" {
8+
const value: string;
9+
export default value;
10+
}
11+
12+
declare module "*.jpeg" {
13+
const value: string;
14+
export default value;
15+
}
16+
17+
declare module "*.gif" {
18+
const value: string;
19+
export default value;
20+
}
21+
22+
declare module "*.svg" {
23+
const value: string;
24+
export default value;
25+
}
26+
27+
declare module "*.webp" {
28+
const value: string;
29+
export default value;
30+
}

‎src/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import { createRoot } from "react-dom/client";
33
import { BrowserRouter as Router } from "react-router-dom";
44
import { App } from "./App";
55

6-
import "bootstrap/dist/css/bootstrap.min.css";
76
import "./styles/global.scss";
87

9-
108
const root = createRoot(document.getElementById("root") as HTMLElement);
119
root.render(
1210
<StrictMode>

‎src/styles/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
$primary-beige: #f1e6cc;
33
$primary-blue: #3f6476;
44
$secondary-blue: #001f3f;
5+
$tertiary-blue: #356481;
56
$light-blue: #356481;

0 commit comments

Comments
 (0)