From fc1eb25949d85a8c86736c665b3810a6250c3333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C4=9Bj=20Frnka?= <mat.frnka@gmail.com>
Date: Tue, 6 Feb 2024 19:10:11 +0100
Subject: [PATCH] SMA-33: minor changes in css

---
 .../src/components/EventHistoryItem.tsx       | 19 ++++++++++++-------
 .../src/styles/EventHistoryItem.css           |  4 ++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
index b0c8f604..57a80649 100644
--- a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
+++ b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
@@ -1,23 +1,26 @@
-import { EventHistoryDTO } from '../generated/api'
+import {EventHistoryDTO} from '../generated/api'
 import '../styles/EventHistoryItem.css'
 import Avatar from './Avatar'
 
 interface EventHistoryProps {
   eventHistoryDTO: EventHistoryDTO
 }
-function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
+
+function EventHistoryItem({eventHistoryDTO}: EventHistoryProps) {
   return (
     <>
       <div className="container-sm">
         <div className="event-history-item">
           <div className="match-status">VICTORY (uncorfirmed)</div>
           <div className="user-side">
-            <div className="user-avatar">
-              <Avatar src="" alt="User" />
+            <div>
+              <div className="user-avatar">
+                <Avatar src="" alt="User"/>
+              </div>
               <div className="user-name">You</div>
             </div>
+            <div className="user-score">{eventHistoryDTO.userScore}</div>
           </div>
-          <div className="user-score">{eventHistoryDTO.userScore}</div>
 
           <div className="colon">
             <p>:</p>
@@ -26,8 +29,10 @@ function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
             <div className="opponent-score">
               {eventHistoryDTO.opponentScore}
             </div>
-            <div className="opponent-avatar">
-              <Avatar src="" alt="Opponent" />
+            <div>
+              <div className="opponent-avatar">
+                <Avatar src="" alt="Opponent" />
+              </div>
               <div className="opponent-name">
                 {eventHistoryDTO.opponent?.name}
               </div>
diff --git a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
index acc7415c..6eba44f7 100644
--- a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
+++ b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
@@ -30,7 +30,7 @@
 .user-side {
     grid-column: 1;
     display: grid;
-    grid-template-columns: 5fr 1fr;
+    grid-template-columns: 3fr 1fr 1fr;
     padding: 9px;
     text-align: center;
     grid-template-rows: 2fr 1fr;
@@ -39,7 +39,7 @@
 .opponent-side {
     grid-column: 3;
     display: grid;
-    grid-template-columns: 1fr 5fr;
+    grid-template-columns: 1fr 1fr 3fr;
     padding: 9px;
     text-align: center;
     grid-template-rows: 2fr 1fr;