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">
+                  <strong>
                     {t('administration:Application configuration')}
+                  </strong>
                 </div>
                 <div className="card-body">
                   <form

fittrackee_client/src/components/Admin/AdminDashboard.jsx

@@ -1,18 +1,15 @@
 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 (
-    <>
-      <Helmet>
-        <title>{t('administration:FitTrackee administration')}</title>
-      </Helmet>
     <div className="card activity-card">
-        <div className="card-header">{t('administration:Administration')}</div>
+      <div className="card-header">
+        <strong>{t('administration:Administration')}</strong>
+      </div>
       <div className="card-body">
         <AdminStats />
         <br />
@@ -62,6 +59,5 @@ export default function AdminDashboard(props) {
         </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,11 +524,33 @@ label {
 
 .user-filters {
   font-size: 0.9em;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 
+.user-label {
+  font-weight: bold;
+}
 
+.weather-img {
+  max-width: 35px;
+  max-height: 35px;
+}
 
+.weather-img-small {
+  max-width: 20px;
+  max-height: 20px;
+}
+
+.weather-table {
+  margin-bottom: 0;
+}
+
+.weather-table table, .weather-table th, .weather-table td{
+  font-size: 0.9em;
+  padding: 0.1em;
+}
+
+/* responsive table */
 /* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
 .heading-span {
   background: #eee;
@@ -569,29 +591,6 @@ label {
   }
 }
 
-.weather-img {
-  max-width: 35px;
-  max-height: 35px;
-}
-
-.weather-img-small {
-  max-width: 20px;
-  max-height: 20px;
-}
-
-.weather-table {
-  margin-bottom: 0;
-}
-
-.weather-table table, .weather-table th, .weather-table td{
-  font-size: 0.9em;
-  padding: 0.1em;
-}
-
-.user-table {
-  font-size: 0.9em;
-}
-
 /* calendar */
 :root {
   --main-color: #1a8fff;

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 && (
+                {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"
+                    />
                   )}
-                {isAuthenticated && (
                   <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",