From 76599407257dcaeb8a3c0a10dbd7d71e52096fb0 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 5 Jan 2019 13:02:55 +0100
Subject: [PATCH] minor fix on statistics page

---
 fittrackee_client/src/components/App.css      |   6 +-
 .../src/components/Statistics/index.jsx       | 124 +++++++++---------
 2 files changed, 70 insertions(+), 60 deletions(-)

diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css
index 5141c5d8..b1c576e6 100644
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@@ -138,6 +138,10 @@ label {
   margin-left: 60px;
 }
 
+.chart-arrows {
+  margin-top: 7px;
+}
+
 .chart-filters {
   padding-bottom: 10px;
 }
@@ -153,7 +157,7 @@ label {
 }
 
 .chart-radio label {
-  display: flex;
+  /* display: flex; */
 }
 
 .chart-radio input {
diff --git a/fittrackee_client/src/components/Statistics/index.jsx b/fittrackee_client/src/components/Statistics/index.jsx
index e537f264..adac5ec7 100644
--- a/fittrackee_client/src/components/Statistics/index.jsx
+++ b/fittrackee_client/src/components/Statistics/index.jsx
@@ -13,6 +13,7 @@ import {
   subYears
 } from 'date-fns'
 import React from 'react'
+import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import { activityColors } from '../../utils/activities'
@@ -110,69 +111,74 @@ class Statistics extends React.Component {
     const { displayedSports, statsParams } = this.state
     const { sports } = this.props
     return (
-      <div className="container dashboard">
-        <div className="card activity-card">
-          <div className="card-header">
-            Statistics
-          </div>
-          <div className="card-body">
-            <div className="chart-filters row">
-              <div className="col">
-                <p className="text-center">
-                  <i
-                    className="fa fa-chevron-left"
-                    aria-hidden="true"
-                    onClick={() => this.handleOnClickArrows(true)}
-                  />
-                </p>
-              </div>
-              <div className="col-md-3">
-                <select
-                  className="form-control input-lg"
-                  name="duration"
-                  defaultValue={statsParams.duration}
-                  onChange={e => this.handleOnChangeDuration(e)}
-                >
-                  {durations.map(d => (
-                    <option key={d} value={d}>
-                      {d}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div className="col">
-                <p className="text-center">
-                  <i
-                    className="fa fa-chevron-right"
-                    aria-hidden="true"
-                    onClick={() => this.handleOnClickArrows(false)}
-                  />
-                </p>
-                </div>
+      <>
+        <Helmet>
+          <title>FitTrackee - Statistics</title>
+        </Helmet>
+        <div className="container dashboard">
+          <div className="card activity-card">
+            <div className="card-header">
+              Statistics
             </div>
-            <Stats
-              displayEmpty
-              displayedSports={displayedSports}
-              statsParams={statsParams}
-            />
-            <div className="row chart-activities">
-              {sports.map(sport => (
-                <label className="col activity-label" key={sport.id}>
-                  <input
-                    type="checkbox"
-                    checked={displayedSports.includes(sport.id)}
-                    name={sport.label}
-                    onChange={() => this.handleOnChangeSports(sport.id)}
-                  />
-                  <span style={{ color: activityColors[sport.id - 1] }}>
-                    {` ${sport.label}`}
-                  </span>
-                </label>
-              ))}
+            <div className="card-body">
+              <div className="chart-filters row">
+                <div className="col chart-arrows">
+                  <p className="text-center">
+                    <i
+                      className="fa fa-chevron-left"
+                      aria-hidden="true"
+                      onClick={() => this.handleOnClickArrows(true)}
+                    />
+                  </p>
+                </div>
+                <div className="col-md-3">
+                  <select
+                    className="form-control input-lg"
+                    name="duration"
+                    defaultValue={statsParams.duration}
+                    onChange={e => this.handleOnChangeDuration(e)}
+                  >
+                    {durations.map(d => (
+                      <option key={d} value={d}>
+                        {d}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="col chart-arrows">
+                  <p className="text-center">
+                    <i
+                      className="fa fa-chevron-right"
+                      aria-hidden="true"
+                      onClick={() => this.handleOnClickArrows(false)}
+                    />
+                  </p>
+                </div>
+              </div>
+              <Stats
+                displayEmpty
+                displayedSports={displayedSports}
+                statsParams={statsParams}
+              />
+              <div className="row chart-activities">
+                {sports.map(sport => (
+                  <label className="col activity-label" key={sport.id}>
+                    <input
+                      type="checkbox"
+                      checked={displayedSports.includes(sport.id)}
+                      name={sport.label}
+                      onChange={() => this.handleOnChangeSports(sport.id)}
+                    />
+                    <span style={{ color: activityColors[sport.id - 1] }}>
+                      {` ${sport.label}`}
+                    </span>
+                  </label>
+                ))}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </>
     )
   }
 }