display records on calendar - fix #25

fittrackee_client/src/components/App.css

@@ -98,8 +98,8 @@ label {
 
 .activity-sport {
   margin-right: 1px;
-  max-width: 20px;
+  max-width: 18px;
-  max-height: 20px;
+  max-height: 18px;
 }
 
 .add-activity {
@@ -177,6 +177,10 @@ label {
   margin-right: 5px;
 }
 
+.custom-fa-small {
+  font-size: 0.8em;
+}
+
 .dashboard, .history {
   margin-top: 30px;
 }

fittrackee_client/src/components/Others/Calendar.jsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line max-len
 // source: https://blog.flowandform.agency/create-a-custom-calendar-in-react-3df1bfd0b728
 import dateFns from 'date-fns'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
@@ -111,6 +111,7 @@ class Calendar extends React.Component {
             <span className="number">{formattedDate}</span>
             {dayActivities.map(act => (
               <Link key={act.id} to={`/activities/${act.id}`}>
+                <Fragment>
                   <img
                     alt="activity sport logo"
                     className={`activity-sport ${isDisabled}`}
@@ -119,6 +120,16 @@ class Calendar extends React.Component {
                       .map(s => s.img)}
                     title={act.title}
                   />
+                  {act.records.length > 0 && (
+                    <sup>
+                      <i
+                        className="fa fa-trophy custom-fa-small"
+                        aria-hidden="true"
+                        title={act.records.map(r => ` ${r.record_type}`)}
+                      />
+                    </sup>
+                  )}
+                </Fragment>
               </Link>
             ))}
           </div>