Skip to content

Commit 80476f9

Browse files
author
Steve Hobbs
authored
Updates to the quickstart theme (#132)
* Added bootstrap assets * Updated styles for 01-Login * Updated styles for 02-Calling-an-API
1 parent 48f8aac commit 80476f9

17 files changed

Lines changed: 119 additions & 82 deletions

File tree

‎01-Login/public/index.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="h-100">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -22,11 +22,19 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25+
26+
<link
27+
rel="stylesheet"
28+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
29+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
30+
crossorigin="anonymous"
31+
/>
32+
2533
<title>Login</title>
2634
</head>
27-
<body>
35+
<body class="h-100">
2836
<noscript>You need to enable JavaScript to run this app.</noscript>
29-
<div id="root"></div>
37+
<div id="root" class="h-100"></div>
3038
<!--
3139
This HTML file is a template.
3240
If you open it directly in the browser, you will see an empty page.

‎01-Login/src/App.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@ const App = () => {
2626
}
2727

2828
return (
29-
<div id="app">
30-
<Router>
29+
<Router>
30+
<div id="app" className="d-flex flex-column h-100">
3131
<NavBar />
32-
<Container className="mt-5">
32+
<Container className="flex-grow-1 mt-5">
3333
<Switch>
3434
<Route path="/" exact component={Home} />
3535
<PrivateRoute path="/profile" component={Profile} />
3636
</Switch>
3737
</Container>
3838
<Footer />
39-
</Router>
40-
</div>
39+
</div>
40+
</Router>
4141
);
4242
};
4343

‎01-Login/src/components/Content.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ import contentData from "../utils/contentData";
88
class Content extends Component {
99
render() {
1010
return (
11-
<div className="next-steps">
12-
<h2 className="mt-5 text-center">What can I do next?</h2>
13-
<Row className="d-flex justify-content-between">
14-
{contentData.map((col, i) => (
15-
<Col key={i} md={5}>
16-
<h6 className="mb-3">
17-
<a href={col.link}>
18-
<FontAwesomeIcon icon="link" />
19-
{col.title}
20-
</a>
21-
</h6>
22-
<p>{col.description}</p>
23-
</Col>
24-
))}
25-
</Row>
11+
<div className="next-steps my-5">
12+
<h2 className="my-5 text-center">What can I do next?</h2>
13+
<Row className="d-flex justify-content-between">
14+
{contentData.map((col, i) => (
15+
<Col key={i} md={5} className="mb-4">
16+
<h6 className="mb-3">
17+
<a href={col.link}>
18+
<FontAwesomeIcon icon="link" className="mr-2" />
19+
{col.title}
20+
</a>
21+
</h6>
22+
<p>{col.description}</p>
23+
</Col>
24+
))}
25+
</Row>
2626
</div>
2727
);
2828
}

‎01-Login/src/components/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
const Footer = () => (
4-
<footer>
4+
<footer className="bg-light p-3 text-center">
55
<div className="logo" />
66
<p>
77
Sample project provided by <a href="https://auth0.com">Auth0</a>

‎01-Login/src/components/Hero.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React from "react";
33
import logo from "../assets/logo.svg";
44

55
const Hero = () => (
6-
<div className="text-center hero">
7-
<img className="mb-3 app-logo" src={logo} alt="React logo" />
6+
<div className="text-center hero my-5">
7+
<img className="mb-3 app-logo" src={logo} alt="React logo" width="120" />
88
<h1 className="mb-4">React.js Sample Project</h1>
99

1010
<p className="lead">

‎01-Login/src/components/NavBar.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from "react";
22
import { NavLink as RouterNavLink } from "react-router-dom";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
34

45
import {
56
Collapse,
@@ -22,10 +23,7 @@ import { useAuth0 } from "../react-auth0-spa";
2223
const NavBar = () => {
2324
const [isOpen, setIsOpen] = useState(false);
2425
const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();
25-
26-
const toggle = () => {
27-
setIsOpen({ isOpen: !isOpen });
28-
};
26+
const toggle = () => setIsOpen(!isOpen);
2927

3028
const logoutWithRedirect = () =>
3129
logout({
@@ -70,24 +68,26 @@ const NavBar = () => {
7068
<img
7169
src={user.picture}
7270
alt="Profile"
73-
className="nav-user-profile"
71+
className="nav-user-profile rounded-circle"
72+
width="50"
7473
/>
7574
</DropdownToggle>
76-
<DropdownMenu right>
75+
<DropdownMenu>
7776
<DropdownItem header>{user.name}</DropdownItem>
7877
<DropdownItem
7978
tag={RouterNavLink}
8079
to="/profile"
8180
className="dropdown-profile"
8281
activeClassName="router-link-exact-active"
8382
>
84-
<span className="icon icon-profile" /> Profile
83+
<FontAwesomeIcon icon="user" className="mr-3" /> Profile
8584
</DropdownItem>
8685
<DropdownItem
8786
id="qsLogoutBtn"
8887
onClick={() => logoutWithRedirect()}
8988
>
90-
<span className="icon icon-power" /> Log out
89+
<FontAwesomeIcon icon="power-off" className="mr-3" /> Log
90+
out
9191
</DropdownItem>
9292
</DropdownMenu>
9393
</UncontrolledDropdown>
@@ -108,19 +108,24 @@ const NavBar = () => {
108108
</Nav>
109109
)}
110110
{isAuthenticated && (
111-
<Nav className="d-md-none" navbar>
111+
<Nav
112+
className="d-md-none justify-content-between"
113+
navbar
114+
style={{ minHeight: 170 }}
115+
>
112116
<NavItem>
113117
<span className="user-info">
114118
<img
115119
src={user.picture}
116120
alt="Profile"
117-
className="nav-user-profile d-inline-block"
121+
className="nav-user-profile d-inline-block rounded-circle mr-3"
122+
width="50"
118123
/>
119124
<h6 className="d-inline-block">{user.name}</h6>
120125
</span>
121126
</NavItem>
122127
<NavItem>
123-
<span className="icon icon-profile" />
128+
<FontAwesomeIcon icon="user" className="mr-3" />
124129
<RouterNavLink
125130
to="/profile"
126131
activeClassName="router-link-exact-active"
@@ -129,7 +134,7 @@ const NavBar = () => {
129134
</RouterNavLink>
130135
</NavItem>
131136
<NavItem>
132-
<span className="icon icon-power" />
137+
<FontAwesomeIcon icon="power-off" className="mr-3" />
133138
<RouterNavLink
134139
to="#"
135140
id="qsLogoutBtn"

‎01-Login/src/utils/initFontAwesome.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { library } from "@fortawesome/fontawesome-svg-core";
2-
import { faLink } from "@fortawesome/free-solid-svg-icons";
2+
import { faLink, faPowerOff, faUser } from "@fortawesome/free-solid-svg-icons";
33

44
function initFontAwesome() {
55
library.add(faLink);
6+
library.add(faUser);
7+
library.add(faPowerOff);
68
}
79

810
export default initFontAwesome;

‎01-Login/src/views/Profile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ const Profile = () => {
1414

1515
return (
1616
<Container className="mb-5">
17-
<Row className="align-items-center profile-header">
17+
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
1818
<Col md={2}>
1919
<img
2020
src={user.picture}
2121
alt="Profile"
22-
className="rounded-circle img-fluid profile-picture"
22+
className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
2323
/>
2424
</Col>
2525
<Col md>

‎02-Calling-an-API/public/index.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="h-100">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -22,11 +22,18 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25+
<link
26+
rel="stylesheet"
27+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
28+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
29+
crossorigin="anonymous"
30+
/>
31+
2532
<title>Calling an API</title>
2633
</head>
27-
<body>
34+
<body class="h-100">
2835
<noscript>You need to enable JavaScript to run this app.</noscript>
29-
<div id="root"></div>
36+
<div id="root" class="h-100"></div>
3037
<!--
3138
This HTML file is a template.
3239
If you open it directly in the browser, you will see an empty page.

‎02-Calling-an-API/src/App.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,11 @@
2929
left: 0;
3030
right: 0;
3131
}
32+
33+
.result-block-container .result-block {
34+
opacity: 0;
35+
}
36+
37+
.result-block-container .result-block.show {
38+
opacity: 1;
39+
}

0 commit comments

Comments
 (0)