Skip to content

Commit c1ad2a6

Browse files
lukqwlukqw
authored
Add dark mode toggle and PR previews
2 parents 511e90f + c12aa23 commit c1ad2a6

File tree

18 files changed

+238
-144
lines changed

18 files changed

+238
-144
lines changed

‎.github/workflows/preview.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ jobs:
2929
make bootstrap-frontend
3030
make deploy-frontend
3131
distributionId=$(awslocal cloudfront list-distributions | jq -r '.DistributionList.Items[0].Id')
32-
echo "Open URL: $AWS_ENDPOINT_URL/cloudfront/$AWS_DEFAULT_REGION/$distributionId/"
32+
echo "PREVIEW_URL=$AWS_ENDPOINT_URL/cloudfront/$distributionId/" >> $GITHUB_ENV
3333
3434
- name: Finalize PR comment
35-
uses: LocalStack/setup-localstack/finish@main
35+
uses: LocalStack/setup-localstack/finish@pass-url-to-finish-step
3636
with:
3737
github-token: ${{ secrets.GITHUB_TOKEN }}
3838
include-preview: true
39+
preview-url: ${{ env.PREVIEW_URL }}

‎packages/frontend/index.html‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,7 @@
1212
<link rel="apple-touch-icon" href="logo192.png" />
1313
<link rel="manifest" href="/manifest.json" />
1414
<title>Notes App - modular AWS SDK for JavaScript (v3)</title>
15-
<link
16-
rel="stylesheet"
17-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
18-
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
19-
crossorigin="anonymous"
20-
/>
21-
</head>
15+
</head>
2216
<body>
2317
<noscript>You need to enable JavaScript to run this app.</noscript>
2418
<div id="root"></div>

‎packages/frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313
"@aws-sdk/s3-request-presigner": "3.245.0",
1414
"@aws-sdk/util-create-request": "3.234.0",
1515
"@aws-sdk/util-format-url": "3.226.0",
16+
"bootstrap": "^5.3.2",
1617
"buffer": "6.0.3",
1718
"events": "^3.3.0",
1819
"microphone-stream": "6.0.1",
1920
"process": "0.11.10",
2021
"react": "18.2.0",
21-
"react-bootstrap": "1.4.0",
22+
"react-bootstrap": "2.9.1",
2223
"react-dom": "18.2.0",
2324
"react-router-dom": "^6.20.0",
2425
"util": "^0.12.5"

‎packages/frontend/src/Routes.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,29 @@ import ShowNote from "./content/ShowNote";
77
import NotFound from "./content/NotFound";
88

99
import { BASE_URL } from "./config";
10+
import { useThemeContext } from "./hooks/useThemeContext";
1011

11-
const Routes = () => (
12-
<div className="mt-md-4 d-flex flex-column justify-content-center">
13-
<Suspense fallback={<div>Loading...</div>}>
14-
<BrowserRouter basename={BASE_URL}>
15-
<RouterRoutes>
16-
<Route path="/" element={<ListNotes/>} />
17-
<Route path="/note/new" element={<CreateNote/>} />
18-
<Route path="/notes/:noteId" element={<ShowNote/>} />
19-
<Route element={<NotFound/>} />
20-
</RouterRoutes>
21-
</BrowserRouter>
22-
</Suspense>
23-
</div>
24-
);
12+
const Routes = () => {
13+
const { darkMode } = useThemeContext();
14+
15+
return (
16+
<div data-bs-theme={darkMode ? "dark" : "light"} className={`${darkMode ? 'bg-dark' : ''}`} style={{ height: "100%", overflowY: 'hidden', minHeight: '100vh' }}>
17+
<div className="container">
18+
<div className="mt-md-4 d-flex flex-column justify-content-center">
19+
<Suspense fallback={<div>Loading...</div>}>
20+
<BrowserRouter basename={BASE_URL}>
21+
<RouterRoutes>
22+
<Route path="/" element={<ListNotes/>} />
23+
<Route path="/note/new" element={<CreateNote/>} />
24+
<Route path="/notes/:noteId" element={<ShowNote/>} />
25+
<Route element={<NotFound/>} />
26+
</RouterRoutes>
27+
</BrowserRouter>
28+
</Suspense>
29+
</div>
30+
</div>
31+
</div>
32+
);
33+
}
2534

2635
export { Routes };

‎packages/frontend/src/components/ButtonSpinner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const ButtonSpinner = () => (
88
size="sm"
99
role="status"
1010
aria-hidden="true"
11-
className="mr-1"
11+
className="mr-2"
1212
/>
1313
);
1414

‎packages/frontend/src/components/Loading.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from "react";
22
import { Spinner } from "react-bootstrap";
33

44
const Loading = () => (
5-
<Spinner animation="border" role="status">
5+
<div className="d-flex align-items-center gap-2">
6+
<Spinner animation="border" role="status">
7+
</Spinner>
68
<span className="sr-only">Loading...</span>
7-
</Spinner>
9+
</div>
810
);
911

1012
export { Loading };

‎packages/frontend/src/components/PageContainer.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React from "react";
22
import { Card } from "react-bootstrap";
3+
import { ThemeSwitch } from "../content/ThemeSwitch";
34

45
const PageContainer = (props: {
56
header: React.ReactNode;
67
children: React.ReactNode;
7-
}) => (
8-
<Card>
9-
<Card.Header>{props.header}</Card.Header>
10-
<Card.Body>{props.children}</Card.Body>
11-
</Card>
12-
);
8+
}) => {
9+
return (
10+
<>
11+
<Card>
12+
<Card.Header>{props.header}</Card.Header>
13+
<Card.Body>{props.children}</Card.Body>
14+
</Card>
15+
<ThemeSwitch />
16+
</>
17+
)
18+
};
1319

1420
export { PageContainer };

‎packages/frontend/src/content/CreateNote.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, FormEvent } from "react";
2-
import { Form, Button, Alert } from "react-bootstrap";
2+
import Form from "react-bootstrap/Form";
3+
import {Button, Alert } from "react-bootstrap";
34
import { GATEWAY_URL, MAX_FILE_SIZE } from "../config";
45
import { putObject } from "../libs";
56
import { HomeButton, ButtonSpinner, PageContainer } from "../components";
@@ -58,7 +59,7 @@ const CreateNote = (): JSX.Element => {
5859
}}
5960
/>
6061
</Form.Group>
61-
<Button type="submit" disabled={!noteContent || isLoading} block>
62+
<Button type="submit" disabled={!noteContent || isLoading} className="mt-4">
6263
{isLoading ? <ButtonSpinner /> : ""}
6364
{isLoading ? "Creating..." : "Create"}
6465
</Button>

‎packages/frontend/src/content/DeleteNoteButton.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
4040
variant="danger"
4141
disabled={isDeleting}
4242
onClick={handleDelete}
43-
block
4443
>
4544
{isDeleting ? <ButtonSpinner /> : ""}
4645
{isDeleting ? "Deleting..." : "Delete"}

‎packages/frontend/src/content/ListNotes.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { GATEWAY_URL } from "../config";
3-
import { Card, Alert, CardColumns, Button } from "react-bootstrap";
3+
import { Card, Alert, Button } from "react-bootstrap";
44
import { Loading, PageContainer } from "../components";
55
import { Link } from "react-router-dom";
66
interface Note {
@@ -35,7 +35,7 @@ const ListNotes = (): JSX.Element => {
3535

3636
const renderNotes = (notes: Note[]) =>
3737
notes.map((note) => (
38-
<Link key={note.noteId} to={`/notes/${note.noteId}`}>
38+
<Link key={note.noteId} to={`/notes/${note.noteId}`} className="col-md-4 col-12 text-decoration-none">
3939
<Card>
4040
<Card.Body>
4141
<Card.Title>
@@ -56,7 +56,7 @@ const ListNotes = (): JSX.Element => {
5656

5757
const createNewNote = () => (
5858
<Link key="new" to="note/new">
59-
<Button variant="primary" block>
59+
<Button variant="primary" className="mt-4">
6060
Create a new note
6161
</Button>
6262
</Link>
@@ -68,8 +68,10 @@ const ListNotes = (): JSX.Element => {
6868
{isLoading ? (
6969
<Loading />
7070
) : (
71-
<div>
72-
<CardColumns>{renderNotes(notes)}</CardColumns>
71+
<div className="container">
72+
<div className="row row-cols-3 gx-3 gy-3">
73+
{renderNotes(notes)}
74+
</div>
7375
{createNewNote()}
7476
</div>
7577
)}

0 commit comments

Comments
 (0)