Merge pull request #10 from wkdewey/add_reactstrap_styling

Add reactstrap styling

package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "bootstrap": "^4.5.3",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "reactstrap": "^8.6.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0"

src/components/Home.js

@@ -1,15 +1,22 @@
-
 import React from "react";
+import { Jumbotron } from "reactstrap";
 
 const Home = () => {
-  console.log("in Home component")
-  return(
+  console.log("in Home component");
+  return (
     <div>
-      <header className="App-header">
-        <p>Welcome to American Ancestries.</p>
-      </header>
+      <Jumbotron className="App-header">
+        <h1 className="display-3">Welcome to American Ancestries!</h1>
+        <h3>Explore the cultural diversity of the United States</h3>
+        <p className="lead">
+          View different places and see how different ethnic origins are
+          represented there, or view ancestry groups and where they are most
+          strongly represented. If you have Census data you can also input new
+          places with ancestry information.
+        </p>
+      </Jumbotron>
     </div>
   );
-}
+};
 
-export default Home;
+export default Home;

src/components/NavBar.js

@@ -1,14 +1,33 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
+import {
+  Nav,
+  Navbar,
+  NavLink,
+  NavItem,
+  NavbarBrand,
+  NavbarToggler,
+} from "reactstrap";
 
 const NavBar = () => {
   return (
-    <div className="navbar">
-      <NavLink to="/">Home</NavLink>
-      <NavLink to="/places">Places</NavLink>
-      <NavLink to="/ancestry_groups">Ancestry Groups</NavLink>
-      <NavLink to="/places/new">New Place</NavLink>
-    </div>
+    <Navbar color="light">
+      <NavbarBrand>American Ancestries</NavbarBrand>
+      <NavbarToggler></NavbarToggler>
+      <Nav class="mr-auto" tabs>
+        <NavItem>
+          <NavLink href="/">Home</NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink href="/places">Places</NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink href="/ancestry_groups">Ancestry Groups</NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink href="/places/new">New Place</NavLink>
+        </NavItem>
+      </Nav>
+    </Navbar>
   );
 };
 

src/components/ancestry_groups/AncestryGroup.js

@@ -1,5 +1,13 @@
 import React from "react";
 import { useParams } from "react-router-dom";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  Table,
+  Spinner,
+} from "reactstrap";
 
 const AncestryGroup = (props) => {
   console.log(props);
@@ -13,21 +21,35 @@ const AncestryGroup = (props) => {
     );
     const ancestryGroupCard = ancestryGroup ? (
       <div className="ancestry group">
-        <h3>{ancestryGroup.attributes.name}</h3>
-        <p>
-          Population in the United States:{" "}
-          {ancestryGroup.attributes.national_pop}
-        </p>
-        {places.map((place) => {
-          return (
-            <div className="place" key={place.id}>
-              <p>
-                {place.attributes.place.name}: {place.attributes.percent}%,{" "}
-                {place.attributes.relative_to_national}x national average
-              </p>
-            </div>
-          );
-        })}
+        <Card>
+          <CardBody>
+            <CardTitle>
+              <h3>{ancestryGroup.attributes.name}</h3>
+            </CardTitle>
+            <CardText>
+              Population in the United States:{" "}
+              {ancestryGroup.attributes.national_pop.toLocaleString()}
+            </CardText>
+          </CardBody>
+        </Card>
+        <Table>
+          <thead>
+            <tr>
+              <th>Place</th>
+              <th>Percent</th>
+              <th>Relative to overall US population</th>
+            </tr>
+          </thead>
+          {places.map((place) => {
+            return (
+              <tr className="place" key={place.id}>
+                <td>{place.attributes.place.name}</td>
+                <td>{place.attributes.percent}%</td>
+                <td>{place.attributes.relative_to_national}x</td>
+              </tr>
+            );
+          })}
+        </Table>
       </div>
     ) : (
       "Place not found"
@@ -37,6 +59,7 @@ const AncestryGroup = (props) => {
     return (
       <div>
         <h3>Loading, please wait.</h3>
+        <Spinner />
       </div>
     );
 };