Client - minor style change

fittrackee_client/src/components/Admin/AdminApplication.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Helmet } from 'react-helmet'
 
 import Message from '../Common/Message'
 import { updateAppConfig } from '../../actions/application'
@@ -56,16 +55,15 @@ class AdminApplication extends React.Component {
     const { formData, isInEdition } = this.state
     return (
       <div>
-        <Helmet>
-          FitTrackee - {t('administration:Application configuration')}
-        </Helmet>
         {message && <Message message={message} t={t} />}
         {Object.keys(formData).length > 0 && (
           <div className="row">
             <div className="col-md-12">
               <div className="card">
                 <div className="card-header">
-                  {t('administration:Application configuration')}
+                  <strong>
+                    {t('administration:Application configuration')}
+                  </strong>
                 </div>
                 <div className="card-body">
                   <form

fittrackee_client/src/components/Admin/AdminDashboard.jsx

@@ -1,67 +1,63 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { Helmet } from 'react-helmet'
 
 import AdminStats from './AdminStats'
 
 export default function AdminDashboard(props) {
   const { t } = props
   return (
-    <>
+    <div className="card activity-card">
-      <Helmet>
+      <div className="card-header">
-        <title>{t('administration:FitTrackee administration')}</title>
+        <strong>{t('administration:Administration')}</strong>
-      </Helmet>
-      <div className="card activity-card">
-        <div className="card-header">{t('administration:Administration')}</div>
-        <div className="card-body">
-          <AdminStats />
-          <br />
-          <dl className="admin-items">
-            <dt>
-              <Link
-                to={{
-                  pathname: '/admin/application',
-                }}
-              >
-                {t('administration:Application')}
-              </Link>
-            </dt>
-            <dd>
-              {t(
-                'administration:Update application configuration ' +
-                  '(maximum number of registered users, maximum files size).'
-              )}{' '}
-            </dd>
-            <br />
-            <dt>
-              <Link
-                to={{
-                  pathname: '/admin/sports',
-                }}
-              >
-                {t('administration:Sports')}
-              </Link>
-            </dt>
-            <dd>{t('administration:Enable/disable sports.')}</dd>
-            <br />
-            <dt>
-              <Link
-                to={{
-                  pathname: '/admin/users',
-                }}
-              >
-                {t('administration:Users')}
-              </Link>
-            </dt>
-            <dd>
-              {t(
-                'administration:Add/remove admin rigths, ' +
-                  'delete user account.'
-              )}
-            </dd>
-          </dl>
-        </div>
       </div>
-    </>
+      <div className="card-body">
+        <AdminStats />
+        <br />
+        <dl className="admin-items">
+          <dt>
+            <Link
+              to={{
+                pathname: '/admin/application',
+              }}
+            >
+              {t('administration:Application')}
+            </Link>
+          </dt>
+          <dd>
+            {t(
+              'administration:Update application configuration ' +
+                '(maximum number of registered users, maximum files size).'
+            )}{' '}
+          </dd>
+          <br />
+          <dt>
+            <Link
+              to={{
+                pathname: '/admin/sports',
+              }}
+            >
+              {t('administration:Sports')}
+            </Link>
+          </dt>
+          <dd>{t('administration:Enable/disable sports.')}</dd>
+          <br />
+          <dt>
+            <Link
+              to={{
+                pathname: '/admin/users',
+              }}
+            >
+              {t('administration:Users')}
+            </Link>
+          </dt>
+          <dd>
+            {t(
+              'administration:Add/remove admin rigths, ' +
+                'delete user account.'
+            )}
+          </dd>
+        </dl>
+      </div>
+    </div>
   )
 }

fittrackee_client/src/components/Admin/AdminSports.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Helmet } from 'react-helmet'
 
 import Message from '../Common/Message'
 import { getOrUpdateData } from '../../actions'
@@ -15,14 +14,13 @@ class AdminSports extends React.Component {
     const { message, sports, t, updateSport } = this.props
     return (
       <div>
-        <Helmet>
-          <title>FitTrackee - {t('administration:Administration')}</title>
-        </Helmet>
         {message && <Message message={message} t={t} />}
         <div className="row">
           <div className="col">
             <div className="card">
-              <div className="card-header">{t('administration:Sports')}</div>
+              <div className="card-header">
+                <strong>{t('administration:Sports')}</strong>
+              </div>
               <div className="card-body">
                 {sports.length > 0 && (
                   <table className="table">

fittrackee_client/src/components/Admin/AdminUsers.jsx

@@ -1,7 +1,6 @@
 import { format } from 'date-fns'
 import React from 'react'
 import { connect } from 'react-redux'
-import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
 
 import Message from '../Common/Message'
@@ -70,15 +69,14 @@ class AdminUsers extends React.Component {
     const translatedSortOrders = translateValues(t, sortOrders)
     return (
       <div>
-        <Helmet>
-          <title>FitTrackee - {t('administration:Administration')}</title>
-        </Helmet>
         {message && <Message message={message} t={t} />}
         <div className="container">
           <div className="row">
             <div className="col">
               <div className="card">
-                <div className="card-header">{t('administration:Users')}</div>
+                <div className="card-header">
+                  <strong>{t('administration:Users')}</strong>
+                </div>
                 <div className="card-body">
                   <div className="row user-filters">
                     <div className="col-lg-4 col-md-6 col-sm-12">

fittrackee_client/src/components/App.css

@@ -428,7 +428,7 @@ label {
 }
 
 .no-picture {
-  color: #40578a;
+  color: #405976;
 }
 
 .page-title {
@@ -524,49 +524,11 @@ label {
 
 .user-filters {
   font-size: 0.9em;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 
-
+.user-label {
-
+  font-weight: bold;
-/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
-.heading-span {
-    background: #eee;
-    color: dimgrey;
-    display: none;
-    font-size: 10px;
-    font-weight: bold;
-    padding: 5px;
-    position: absolute;
-    text-transform: uppercase;
-    top: 0;
-    left: 0;
-}
-
-@media(max-width: 1024px) {
-    table thead {
-        left: -9999px;
-        position: absolute;
-        visibility: hidden;
-    }
-    table tr {
-        border-bottom: 0;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        margin-bottom: 40px;
-    }
-    table td {
-        border: 1px solid lightgrey;
-        margin: 0 -1px -1px 0;
-        padding-top: 35px !important;
-        position: relative;
-        text-align: center;
-        width: 50%;
-    }
-    .heading-span  {
-        display: block;
-    }
 }
 
 .weather-img {
@@ -588,8 +550,45 @@ label {
   padding: 0.1em;
 }
 
-.user-table {
+/* responsive table */
-  font-size: 0.9em;
+/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
+.heading-span {
+  background: #eee;
+  color: dimgrey;
+  display: none;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 5px;
+  position: absolute;
+  text-transform: uppercase;
+  top: 0;
+  left: 0;
+}
+
+@media(max-width: 1024px) {
+  table thead {
+    left: -9999px;
+    position: absolute;
+    visibility: hidden;
+  }
+  table tr {
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+  }
+  table td {
+    border: 1px solid lightgrey;
+    margin: 0 -1px -1px 0;
+    padding-top: 35px !important;
+    position: relative;
+    text-align: center;
+    width: 50%;
+  }
+  .heading-span  {
+    display: block;
+  }
 }
 
 /* calendar */

fittrackee_client/src/components/Dashboard/index.jsx

@@ -49,6 +49,7 @@ class DashBoard extends React.Component {
           <Message message={message} t={t} />
         ) : (
           activities &&
+          user.total_duration &&
           sports.length > 0 && (
             <div className="container dashboard">
               <UserStatistics user={user} t={t} />

fittrackee_client/src/components/NavBar/index.jsx

@@ -117,14 +117,20 @@ class NavBar extends React.PureComponent {
                     </Link>
                   </li>
                 )}
-                {picture === true && (
-                  <img
-                    alt="Avatar"
-                    src={`${apiUrl}users/${username}/picture?${Date.now()}`}
-                    className="img-fluid App-nav-profile-img"
-                  />
-                )}
                 {isAuthenticated && (
+                <>
+                  {picture === true ? (
+                    <img
+                      alt="Avatar"
+                      src={`${apiUrl}users/${username}/picture?${Date.now()}`}
+                      className="img-fluid App-nav-profile-img"
+                    />
+                  ) : (
+                    <i
+                      className="fa fa-user-circle-o fa-2x no-picture"
+                      aria-hidden="true"
+                    />
+                  )}
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -135,8 +141,6 @@ class NavBar extends React.PureComponent {
                       {username}
                     </Link>
                   </li>
-                )}
-                {isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -147,6 +151,7 @@ class NavBar extends React.PureComponent {
                       {t('common:Logout')}
                     </Link>
                   </li>
+                </>
                 )}
                 <li><LanguageDropdown /></li>
               </ul>

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 
 import Message from '../Common/Message'
 import { deletePicture, uploadPicture } from '../../actions/user'
@@ -40,57 +39,64 @@ function ProfileDetail({
           <div className="col-md-12">
             <div className="card">
               <div className="card-header userName">
-                {user.username}{' '}
+                <strong>{user.username}</strong>
-                {editable && (
-                  <Link
-                    to={{
-                      pathname: '/profile/edit',
-                    }}
-                  >
-                    <i className="fa fa-pencil-square-o" aria-hidden="true" />
-                  </Link>
-                )}{' '}
-                {isDeletable && (
-                  <i
-                    className="fa fa-user-times fa-as-link"
-                    aria-hidden="true"
-                    onClick={() => displayModal(true)}
-                  />
-                )}
               </div>
               <div className="card-body">
                 <div className="row">
                   <div className="col-md-8">
                     <p>
-                      {t('user:Email')}: {user.email}
+                      {/* eslint-disable-next-line max-len */}
+                      <span className="user-label">
+                        {t('user:Email')}
+                      </span>: {user.email}
                     </p>
                     <p>
-                      {t('user:Registration Date')}: {createdAt}
+                      <span className="user-label">
+                        {t('user:Registration Date')}
+                      </span>
+                      : {createdAt}
                     </p>
                     <p>
-                      {t('user:First Name')}: {user.first_name}
+                      <span className="user-label">{t('user:First Name')}</span>
+                      : {user.first_name}
                     </p>
                     <p>
-                      {t('user:Last Name')}: {user.last_name}
+                      {/* eslint-disable-next-line max-len */}
+                      <span className="user-label">
+                        {t('user:Last Name')}
+                      </span>: {user.last_name}
                     </p>
                     <p>
-                      {t('user:Birth Date')}: {birthDate}
+                      <span className="user-label">{t('user:Birth Date')}</span>
+                      : {birthDate}
                     </p>
                     <p>
-                      {t('user:Location')}: {user.location}
+                      {/* eslint-disable-next-line max-len */}
+                      <span className="user-label">
+                        {t('user:Location')}
+                      </span>: {user.location}
                     </p>
                     <p>
-                      {t('user:Bio')}: {user.bio}
+                      <span className="user-label">{t('user:Bio')}</span>:{' '}
+                      {user.bio}
                     </p>
                     <p>
-                      {t('user:Language')}: {user.language}
+                      {/* eslint-disable-next-line max-len */}
+                      <span className="user-label">
+                        {t('user:Language')}
+                      </span>: {user.language}
                     </p>
                     <p>
-                      {t('user:Timezone')}: {user.timezone}
+                      {/* eslint-disable-next-line max-len */}
+                      <span className="user-label">
+                        {t('user:Timezone')}
+                      </span>: {user.timezone}
                     </p>
                     <p>
-                      {t('user:First day of week')}:{' '}
+                      <span className="user-label">
-                      {user.weekm ? t('user:Monday') : t('user:Sunday')}
+                        {t('user:First day of week')}
+                      </span>
+                      : {user.weekm ? t('user:Monday') : t('user:Sunday')}
                     </p>
                   </div>
                   <div className="col-md-4">
@@ -136,12 +142,28 @@ function ProfileDetail({
                     )}{' '}
                   </div>
                 </div>
-                <input
+                {editable && (
-                  type="submit"
+                  <button
+                    className="btn btn-primary"
+                    onClick={() => history.push('/profile/edit')}
+                  >
+                    {t('common:Edit')}
+                  </button>
+                )}
+                {isDeletable && (
+                  <button
+                    className="btn btn-danger"
+                    onClick={() => displayModal(true)}
+                  >
+                    {t('user:Delete user account')}
+                  </button>
+                )}
+                <button
                   className="btn btn-secondary"
-                  onClick={() => history.go(-1)}
+                  onClick={() => history.push('/')}
-                  value={t('common:Back')}
+                >
-                />
+                  {t('common:Back to home')}
+                </button>
               </div>
             </div>
           </div>

fittrackee_client/src/locales/en/common.json

@@ -4,6 +4,7 @@
   "admin rights": "admin rights",
   "ascending": "ascending",
   "Back": "Back",
+  "Back to home": "Back to home",
   "Cancel": "Cancel",
   "Confirmation": "Confirmation",
   "Dashboard": "Dashboard",

fittrackee_client/src/locales/en/user.json

@@ -6,6 +6,7 @@
   "Birth Date": "Birth Date",
   "Delete my account": "Delete my account",
   "Delete picture": "Delete picture",
+  "Delete user account": "Delete user account",
   "Edit Profile": "Edit Profile",
   "Email": "Email",
   "Enter a username": "Enter a username",

fittrackee_client/src/locales/fr/common.json

@@ -4,6 +4,7 @@
   "admin rights": "droits d'admin",
   "ascending": "ascendant",
   "Back": "Revenir à la page précédente",
+  "Back to home": "Retour à l'accueil",
   "Cancel": "Annuler",
   "Confirmation": "Confirmation",
   "Dashboard": "Tableau de Bord",

fittrackee_client/src/locales/fr/user.json

@@ -6,6 +6,7 @@
   "Birth Date": "Date de naissance",
   "Delete my account": "Supprimer mon compte",
   "Delete picture": "Supprimer l'image",
+  "Delete user account": "Supprimer le compte",
   "Edit Profile": "Editer le profil",
   "Email": "Email",
   "Enter a username": "Saisir un nom",