Small CSS tweaks. Begin migration to date-fns from moment.

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "d3": "^5.16.0",
+    "date-fns": "^2.14.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.5.0",

src/App.css

@@ -18,8 +18,9 @@ body {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    align-self: stretch;
     text-align: center;
-    min-width: 100%; }
+    padding: 0 20px; }
     .root .page-container .page-content {
       display: flex;
       flex-direction: column;
@@ -28,7 +29,8 @@ body {
 
 .map-layout {
   display: flex;
-  flex-direction: row; }
+  flex-direction: row;
+  padding: 0 10px; }
 
 .chart-layout {
   display: flex;

src/App.js

@@ -27,7 +27,7 @@ export class App extends Component {
     const { router, dispatch } = this.props;
     const nextRoute = findKey(
       router.routes,
-      route => route.index === router.result.index + 1
+      (route) => route.index === router.result.index + 1
     );
     dispatch(push(nextRoute));
   }
@@ -36,15 +36,15 @@ export class App extends Component {
     const { router, dispatch } = this.props;
     const prevRoute = findKey(
       router.routes,
-      route => route.index === router.result.index - 1
+      (route) => route.index === router.result.index - 1
     );
     dispatch(push(prevRoute));
   }
 
   goToNextChild() {
     const { router, dispatch } = this.props;
     const currentRoute = router.result;
-    const nextRoute = findKey(router.routes, route => {
+    const nextRoute = findKey(router.routes, (route) => {
       if (currentRoute.hasChildren) {
         return (
           route.childIndex === 0 && route.parent.index === currentRoute.index
@@ -61,7 +61,7 @@ export class App extends Component {
   goToPreviousChild() {
     const { router, dispatch } = this.props;
     const currentRoute = router.result;
-    const prevRoute = findKey(router.routes, route => {
+    const prevRoute = findKey(router.routes, (route) => {
       if (!currentRoute.childIndex) {
         return route.index === currentRoute.parent.index;
       }
@@ -104,11 +104,14 @@ export class App extends Component {
 
   render() {
     const { maps } = this.props;
-    return maps.fetchingData ? (
-      <div />
-    ) : (
+
+    if (maps.fetchingData) {
+      return null;
+    }
+
+    return (
       <Fragment forRoute={'/'}>
-        <React.Fragment>
+        <>
           <Chevron
             direction="up"
             path={ChevronPaths.ChevronUp}
@@ -158,13 +161,13 @@ export class App extends Component {
             visible={this.getChevronVisibility('down')}
             onClick={this.goToNextChild}
           />
-        </React.Fragment>
+        </>
       </Fragment>
     );
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   maps: state.mapReducer,
   router: state.router,
 });

src/App.scss

@@ -18,8 +18,9 @@ body {
     @include flex-row;
     justify-content: space-between;
     align-items: center;
+    align-self: stretch;
     text-align: center;
-    min-width: 100%;
+    padding: 0 20px;
 
     .page-content {
       @include flex-column;
@@ -31,6 +32,7 @@ body {
 
 .map-layout {
   @include flex-row;
+  padding: 0 10px;
 }
 
 .chart-layout {

src/components/home/Home.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import moment from 'moment';
+import differenceInDays from 'date-fns/differenceInDays';
 
 import '../../App.css';
 import '../../stylesheets/Home.css';
@@ -17,7 +17,10 @@ class Home extends React.Component {
     const { maps } = this.props;
     // get the total and average number of shootings per day
     const total = `${maps.shootingsData.length}`;
-    const numDays = moment('2016-12-31').diff(moment('2015-01-01'), 'days');
+    const numDays = differenceInDays(
+      new Date(2016, 11, 31),
+      new Date(2015, 0, 1)
+    );
     const average = (maps.shootingsData.length / numDays).toFixed(1);
     return {
       total,
@@ -31,7 +34,7 @@ class Home extends React.Component {
       <div className="home-text">
         Between January 1, 2015 and December 31, 2016
       </div>,
-      <div className="home-text-large">
+      <div className="home-text home-text--large">
         <b>{total}</b> people
       </div>,
       <div className="home-text">
@@ -77,7 +80,7 @@ class Home extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   maps: state.mapReducer,
 });
 

src/components/maps/DataTable/DataTable.js

@@ -87,8 +87,9 @@ export class DataTable extends React.Component {
       // order states by per million count
       const states = orderBy(
         maps.geoData.objects.states.geometries,
-        state =>
-          state.properties.numShootings / state.properties.population * 1000000,
+        (state) =>
+          (state.properties.numShootings / state.properties.population) *
+          1000000,
         ascDesc
       ).slice(0, 5);
 
@@ -103,8 +104,7 @@ export class DataTable extends React.Component {
       const stateStats = states.map((state, i) => (
         <div className="row" key={i}>
           {round(
-            state.properties.numShootings /
-              state.properties.population *
+            (state.properties.numShootings / state.properties.population) *
               1000000,
             2
           )}
@@ -161,7 +161,7 @@ export class DataTable extends React.Component {
     return (
       <div className="data-table">
         <div className="table-button-container">
-          <div
+          <button
             className="button"
             id="highest"
             style={highest}
@@ -170,8 +170,8 @@ export class DataTable extends React.Component {
             onClick={this.onClickHandler}
           >
             Highest
-          </div>
-          <div
+          </button>
+          <button
             className="button"
             id="lowest"
             style={lowest}
@@ -180,7 +180,7 @@ export class DataTable extends React.Component {
             onClick={this.onClickHandler}
           >
             Lowest
-          </div>
+          </button>
         </div>
         <div className="table">
           <div>
@@ -199,7 +199,7 @@ export class DataTable extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   maps: state.mapReducer,
 });
 

src/stylesheets/Chevron.css

@@ -20,6 +20,9 @@
     .chevron {
       height: 40px;
       width: 40px; } }
+  .chevron svg {
+    fill-opacity: 1;
+    transition: fill-opacity 0.3s ease-out; }
   .chevron:hover {
     cursor: pointer; }
     .chevron:hover svg {

src/stylesheets/Chevron.scss

@@ -1,10 +1,10 @@
-@import "./_constants";
+@import './_constants';
 
 $chevron-sizes: (
   null: 30px,
   mobile: 30px,
   tablet: 40px,
-  desktop: 40px
+  desktop: 40px,
 );
 
 @mixin chevron-size($svg-map, $svg-breakpoints: $breakpoints) {
@@ -31,6 +31,11 @@ $chevron-sizes: (
   align-items: center;
   flex: 0 0 auto;
 
+  svg {
+    fill-opacity: 1;
+    transition: fill-opacity 0.3s ease-out;
+  }
+
   &:hover {
     cursor: pointer;
 

src/stylesheets/DataTable.css

@@ -7,33 +7,32 @@
   .data-table .table-button-container {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
-    width: 60%; }
+    justify-content: space-around; }
     .data-table .table-button-container .button {
       font-size: 10px;
+      flex: 1;
       font-family: "HelveticaNeue", "Helvetica", sans-serif;
-      width: 40%;
-      height: auto;
       background: #50505e;
-      flex: 0 0 auto;
-      padding: 5px 5px 5px 5px;
+      padding: 10px;
       text-align: center;
-      cursor: pointer; }
+      cursor: pointer;
+      outline: 0;
+      border: 0; }
       @media screen and (min-width: 480px) {
         .data-table .table-button-container .button {
           font-size: 12px; } }
       @media screen and (min-width: 768px) {
         .data-table .table-button-container .button {
-          font-size: 15px; } }
+          font-size: 14px; } }
       @media screen and (min-width: 1024px) {
         .data-table .table-button-container .button {
-          font-size: 18px; } }
-    .data-table .table-button-container div:first-child {
-      border-top-left-radius: 20px;
-      border-bottom-left-radius: 20px; }
-    .data-table .table-button-container div:last-child {
-      border-top-right-radius: 20px;
-      border-bottom-right-radius: 20px; }
+          font-size: 16px; } }
+      .data-table .table-button-container .button:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px; }
+      .data-table .table-button-container .button:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px; }
   .data-table .table {
     display: flex;
     flex-direction: row;

src/stylesheets/DataTable.scss

@@ -3,8 +3,8 @@
 $button-font-sizes: (
   null: 10px,
   mobile: 12px,
-  tablet: 15px,
-  desktop: 18px
+  tablet: 14px,
+  desktop: 16px,
 );
 
 .data-table {
@@ -14,28 +14,27 @@ $button-font-sizes: (
   .table-button-container {
     @include flex-row;
     justify-content: space-around;
-    width: 60%;
 
     .button {
       @include font-size($button-font-sizes);
+      flex: 1;
       font-family: $helvetica;
-      width: 40%;
-      height: auto;
       background: #50505e;
-      flex: 0 0 auto;
-      padding: 5px 5px 5px 5px;
+      padding: 10px;
       text-align: center;
       cursor: pointer;
-    }
+      outline: 0;
+      border: 0;
 
-    div:first-child {
-      border-top-left-radius: 20px;
-      border-bottom-left-radius: 20px;
-    }
+      &:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
 
-    div:last-child {
-      border-top-right-radius: 20px;
-      border-bottom-right-radius: 20px;
+      &:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
     }
   }
 

src/stylesheets/Home.css

@@ -57,16 +57,14 @@ by the react-transition-group add-on */
   @media screen and (min-width: 1024px) {
     .home-text {
       font-size: 28px; } }
-
-.home-text-large {
-  font-size: 16px;
-  font-family: "Source Code Pro", monospace, sans-serif; }
-  @media screen and (min-width: 480px) {
-    .home-text-large {
-      font-size: 22px; } }
-  @media screen and (min-width: 768px) {
-    .home-text-large {
-      font-size: 28px; } }
-  @media screen and (min-width: 1024px) {
-    .home-text-large {
-      font-size: 36px; } }
+  .home-text--large {
+    font-size: 16px; }
+    @media screen and (min-width: 480px) {
+      .home-text--large {
+        font-size: 22px; } }
+    @media screen and (min-width: 768px) {
+      .home-text--large {
+        font-size: 28px; } }
+    @media screen and (min-width: 1024px) {
+      .home-text--large {
+        font-size: 36px; } }