SMA-82 unify font sizes

[markpernia]

now all font sizes could be change in App.css

  /* font-sizes */
  --sm-h1-heading: 3em;
  --sm-text-content: 1em;
  --sm-text-medium-content: 1.2em; 

Unified font sizes across different pages. However, with the changes in size, some elements didn't look right, so I had to make adjustments to the alignment and positioning of other elements.

Additionally, the changes affects the dates in the Event component and the UpcomingEvent component due to the length of the string. because of that, I implemented formatting for the dates in the EventDTO object from an array of numbers to a string, which affect task SMA-93 I believe this also resolves the related bug.

I've commented out this part in Match.tsx which formats the array of numbers to a date, just in case it's necessary to revert back from a string to an array of numbers.

  const eventDate = new Date(
     parseInt(event.dateStart[0]),
     parseInt(event.dateStart[1]),
     parseInt(event.dateStart[2]),
   )

  const eventStartTime = () => {
     const hour = event.dateStart[3]
     const min = event.dateStart[4] === '0' ? '00' : event.dateStart[4]
     return hour + ':' + (min.length === 1 ? min + '0' : min)
   }
   const eventEndTime = () => {
     const hour = event.dateEnd[3]
     const min = event.dateEnd[4] === '0' ? '00' : event.dateEnd[4]
     return hour + ':' + (min.length === 1 ? min + '0' : min)
   }