SMA-82 unify font sizes (#74)

MatejFrnka · Apr 16, 2024 · 3372bc2 · 3372bc2
1 parent 0fc029e
commit 3372bc2
Show file tree

Hide file tree

Showing 22 changed files with 114 additions and 129 deletions.
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/SportsmatchApplication.java b/backend/sportsmatch/src/main/java/com/sportsmatch/SportsmatchApplication.java
@@ -234,8 +234,8 @@ public List<Event> addEvents(List<Sport> sports, List<Place> places) {
             places.get(4)));
     eventRepository.save(
         new Event(
-            LocalDateTime.of(2024, 6, 15, 10, 0),
-            LocalDateTime.of(2024, 6, 15, 12, 0),
+            LocalDateTime.of(2023, 6, 15, 10, 0),
+            LocalDateTime.of(2023, 6, 15, 12, 0),
             "Prague Stvanice",
             1000,
             1800,
@@ -244,8 +244,8 @@ public List<Event> addEvents(List<Sport> sports, List<Place> places) {
             places.get(4)));
     eventRepository.save(
         new Event(
-            LocalDateTime.of(2024, 6, 15, 10, 0),
-            LocalDateTime.of(2024, 6, 15, 12, 0),
+            LocalDateTime.of(2023, 6, 15, 10, 0),
+            LocalDateTime.of(2023, 6, 15, 12, 0),
             "Prague Stvanice",
             1000,
             1800,
@@ -254,8 +254,8 @@ public List<Event> addEvents(List<Sport> sports, List<Place> places) {
             places.get(4)));
     eventRepository.save(
         new Event(
-            LocalDateTime.of(2024, 6, 15, 10, 0),
-            LocalDateTime.of(2024, 6, 15, 12, 0),
+            LocalDateTime.of(2023, 6, 15, 10, 0),
+            LocalDateTime.of(2023, 6, 15, 12, 0),
             "Prague Stvanice",
             1000,
             1800,

diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java b/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
@@ -1,5 +1,6 @@
 package com.sportsmatch.dtos;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.NotNull;
 import lombok.*;
@@ -16,8 +17,10 @@ public class EventDTO {
   private Long id;
 
   @NotNull
+  @JsonFormat(pattern = "dd.MM.yyyy HH:mm")
   private LocalDateTime dateStart;
   @NotNull
+  @JsonFormat(pattern = "dd.MM.yyyy HH:mm")
   private LocalDateTime dateEnd;
   @NotNull
   private Integer minElo;

diff --git a/frontend/sportsmatch-app/src/App.css b/frontend/sportsmatch-app/src/App.css
@@ -19,16 +19,19 @@
   --sm-btn-size-regular: 3.125em;
   --sm-btn-size-small: 1.875em;
 
-  --sm-h1-size: 3em;
-  --sm-h2-size: 1em;
-  --sm-text-size: 1em;
+  /* font-sizes */
+  --sm-h1-heading: 3em;
+  --sm-text-content: 1em;
+  --sm-text-medium-content: 1.2em;
 }
 
 svg {
   color: var(--sm-white);
 }
 
-body, html, #root {
+body,
+html,
+#root {
   height: 100%;
   margin: 0;
   padding: 0;

diff --git a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
@@ -24,17 +24,17 @@ export default function JoinEventComponent(p: JoinEventProps) {
     }
   }
 
-  const date = new Date(
-    parseInt(p.event.dateStart[0]),
-    parseInt(p.event.dateStart[1]),
-    parseInt(p.event.dateStart[2]),
-  )
-
-  const eventTime = () => {
-    const hour = p.event.dateStart[3]
-    const min = p.event.dateStart[4] == '0' ? '00' : p.event.dateStart[4]
-    return hour + ':' + min
+  const getDateAndTime = (type: string) => {
+    const dateStart: string[] = p.event.dateStart.split(' ')
+    if (type === 'date') {
+      return dateStart[0]
+    } else if (type === 'time') {
+      return dateStart[1]
+    } else {
+      return null
+    }
   }
+
   return (
     <>
       {p.isInRank ? (
@@ -51,32 +51,32 @@ export default function JoinEventComponent(p: JoinEventProps) {
                 {' at ' +
                   p.event.placeDTO?.name +
                   ' on ' +
-                  date.toLocaleDateString('en', { month: 'long' }) +
-                  ' ' +
-                  date.getDay() +
-                  ', ' +
-                  date.getFullYear() +
+                  getDateAndTime('date') +
                   ', at ' +
-                  eventTime() +
+                  getDateAndTime('time') +
                   '?'}
               </p>
             </div>
           </div>
           <div className="row">
-            <div className="col-12">
-              <button
-                className="join-event-btn-orange"
-                onClick={handleJoinEvent}
-              >
-                Join
-              </button>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-12">
-              <button className="join-event-btn-grey" onClick={p.toggle}>
-                Cancel
-              </button>
+            <div className="col">
+              <div className="row">
+                <div className="col-12">
+                  <button
+                    className="join-event-btn-orange"
+                    onClick={handleJoinEvent}
+                  >
+                    Join
+                  </button>
+                </div>
+              </div>
+              <div className="row">
+                <div className="col-12">
+                  <button className="join-event-btn-grey" onClick={p.toggle}>
+                    Cancel
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </div>

diff --git a/frontend/sportsmatch-app/src/components/Match.tsx b/frontend/sportsmatch-app/src/components/Match.tsx
@@ -28,22 +28,6 @@ function InProgress({ event }: InProgressProps) {
     fetchUserInfo()
   }, [])
 
-  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)
-  }
   return (
     <>
       <div className="container-fluid">
@@ -86,23 +70,11 @@ function InProgress({ event }: InProgressProps) {
                 </li>
                 <li>
                   <LuCalendarCheck />
-                  {eventDate.getDay() +
-                    '.' +
-                    eventDate.getMonth() +
-                    '.' +
-                    eventDate.getFullYear() +
-                    ', ' +
-                    eventStartTime()}
+                  {event.dateStart}
                 </li>
                 <li>
                   <LuCalendarX />
-                  {eventDate.getDay() +
-                    '.' +
-                    eventDate.getMonth() +
-                    '.' +
-                    eventDate.getFullYear() +
-                    ', ' +
-                    eventEndTime()}
+                  {event.dateEnd}
                 </li>
               </ul>
             </div>

diff --git a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
@@ -7,8 +7,8 @@ describe('SportEvent', async () => {
     id: 1,
     maxElo: 2000,
     minElo: 1800,
-    dateEnd: '2024-01-27',
-    dateStart: '2024-01-26',
+    dateEnd: '27.01.2024 17:00',
+    dateStart: '26.01.2024 15:00',
     placeDTO: {
       name: 'Test Location',
       address: 'address',

diff --git a/frontend/sportsmatch-app/src/components/SportEvent.tsx b/frontend/sportsmatch-app/src/components/SportEvent.tsx
@@ -2,21 +2,6 @@ import { EventDTO } from '../generated/api'
 import '../styles/SportEvent.css'
 import { LuMapPin, LuMedal, LuCalendarCheck, LuCalendarX } from 'react-icons/lu'
 
-// interface SportEventProps {
-//   event: {
-//     id: number
-//     maxElo: number
-//     minElo: number
-//     dateEnd: string
-//     dateStart: string
-//     location: string
-//     title: string
-//     sport: string
-//     playerOne: string
-//     playerTwo?: string
-//   }
-// }
-
 function SportEvent({ event }: { event: EventDTO }) {
   return (
     <>

diff --git a/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
@@ -38,7 +38,7 @@ function SportsButtonComponent({
 
   const navigate = useNavigate()
   const handleMoreSportsButton = () => {
-    navigate('/allsports', { state: { selectedButtonSports } })
+    navigate('/all-sports', { state: { selectedButtonSports } })
   }
 
   const [sports, setSports] = useState<SportDTO[]>([])

diff --git a/frontend/sportsmatch-app/src/pages/AllSportsList.tsx b/frontend/sportsmatch-app/src/pages/AllSportsList.tsx
@@ -35,7 +35,7 @@ export function AllSportsList() {
   ]
 
   // this url should be dynamic
-  const url = '/index'
+  const url = '/'
   const location = useLocation()
   const selectedButtonSports = location.state.selectedButtonSports
 

diff --git a/frontend/sportsmatch-app/src/pages/Home.tsx b/frontend/sportsmatch-app/src/pages/Home.tsx
@@ -66,7 +66,7 @@ function Home() {
           <div className="history-wrapper">
             <div className="row">
               <div className="col">
-                {upcomingMatch.length === 0 ? (
+                {eventsHistory.length === 0 ? (
                   <p>No match history</p>
                 ) : (
                   eventsHistory.map((e, index) => (

diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -31,6 +31,8 @@ export default function MainPage() {
   const [page, setPage] = useState<number>(0)
   const size = 5
 
+  console.log(`query`, searchQuery)
+
   // handle sports name selected from sportButtoncomponent
   const handleSportSelectionChange = (selectedButtonSports: string[]) => {
     setSelectedSports(selectedButtonSports)
@@ -49,6 +51,9 @@ export default function MainPage() {
     navigate(location.pathname, { state: undefined })
     setSelectedSports([])
     setClearFilters(true)
+    setTimeout(() => {
+      setClearFilters(false)
+    }, 100)
   }
 
   useEffect(() => {
@@ -66,7 +71,6 @@ export default function MainPage() {
         }
         const data: EventDTO[] = response as EventDTO[]
         // set filtered events based on api response
-        console.log(data)
         if (page === 0) {
           setFilteredEvent(data as EventDTO[])
         } else {
@@ -99,10 +103,6 @@ export default function MainPage() {
     toggle()
   }
 
-  console.log(`all sport selected:`, location.state)
-  console.log(`sport button selected:`, selectedSports)
-  console.log(`query`, searchQuery)
-
   // retrieving users rank
   useEffect(() => {
     const fetchUsersRank = async () => {

diff --git a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
@@ -5,7 +5,7 @@
     display: grid;
     color: var(--sm-secondary-orange);
     font-weight: bold;
-    font-size: 16px;
+    font-size: var(--sm-text-content);
     text-align: center;
     grid-column: 2;
     padding: 9px 9px 0 9px;
@@ -21,7 +21,7 @@
     grid-template-columns: 8fr 0.5fr 8fr;
     width: 100%;
     min-height: 106px;
-    font-size: 10px;
+    font-size: var(--sm-text-content);
     background-color: var(--sm-primary-bg);
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
     border: 2px solid var(--sm-secondary-orange);
@@ -52,7 +52,7 @@
     height: 35px;
     color: var(--sm-secondary-orange);
     font-weight: bold;
-    font-size: 16px;
+    font-size: var(--sm-text-content);
     grid-row: 1;
     display: grid;
 }
@@ -100,7 +100,7 @@
 .match-status {
     color: var(--sm-secondary-orange);
     font-weight: bold;
-    font-size: 12px;;
+    font-size: var(--sm-text-content);
     position: relative;
     padding: 4px 4px 8px 8px;
     letter-spacing: 10%;

diff --git a/frontend/sportsmatch-app/src/styles/Index.css b/frontend/sportsmatch-app/src/styles/Index.css
@@ -58,7 +58,7 @@
   border-radius: 40px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   cursor: pointer;
-  font-size: 18px;
+  font-size: var(--sm-text-medium-content);
   color: #fff;
   font-weight: 400;
   margin: 20px 0;

diff --git a/frontend/sportsmatch-app/src/styles/JoinEvent.css b/frontend/sportsmatch-app/src/styles/JoinEvent.css
@@ -32,5 +32,5 @@
 .join-event-message {
     padding: 0;
     margin-right: 0;
-    font-size: var(--sm-text-size);
+    font-size: var(--sm-text-content);
 }