From 58792045e4ca768651b9936d0122bb53cac16b64 Mon Sep 17 00:00:00 2001
From: JanaDupcakova <jana.dupcakova@gmail.com>
Date: Tue, 6 Feb 2024 18:56:03 +0100
Subject: [PATCH] modified avatars

---
 .../src/components/EventHistoryItem.tsx       | 22 +++++++------------
 .../src/styles/EventHistoryItem.css           |  9 ++++----
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
index 24543eb3..b0c8f604 100644
--- a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
+++ b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
@@ -10,18 +10,15 @@ function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
     <>
       <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"
-              />
+              <Avatar src="" alt="User" />
+              <div className="user-name">You</div>
             </div>
-            <div className="user-score">{eventHistoryDTO.userScore}</div>
-            <div className="user-name">You</div>
           </div>
+          <div className="user-score">{eventHistoryDTO.userScore}</div>
+
           <div className="colon">
             <p>:</p>
           </div>
@@ -30,13 +27,10 @@ function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
               {eventHistoryDTO.opponentScore}
             </div>
             <div className="opponent-avatar">
-              <Avatar
-                src=""
-                alt="Opponent"
-              />
-            </div>
-            <div className="opponent-name">
-              {eventHistoryDTO.opponent?.name}
+              <Avatar src="" alt="Opponent" />
+              <div className="opponent-name">
+                {eventHistoryDTO.opponent?.name}
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
index 9f4e6b58..acc7415c 100644
--- a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
+++ b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
@@ -20,6 +20,7 @@
     min-height: 106px;
     margin: 16px;
     font-size: 10px;
+    background-color: #F7F7F7;
     font-family: 'Inter', sans-serif;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
     border: 2px solid #FC4C02;
@@ -66,14 +67,14 @@
     color: #FC4C02;
     grid-column: 1;
     grid-row: 2;
-    margin-left: auto;
+    margin: auto;
 }
 
 .opponent-name {
     color: #FC4C02;
     grid-column: 2;
     grid-row: 2;
-    margin-right: auto;
+    margin: auto;
 
 }
 
@@ -88,7 +89,7 @@
     background-size: cover;
     background-position: center center;
     grid-row: 1;
-    margin-left: auto;
+    margin: auto;
 }
 
 .opponent-avatar {
@@ -102,7 +103,7 @@
     background-position: center center;
     object-fit: cover;
     grid-row: 1;
-    margin-right: auto;
+    margin: auto;
 }
 
 .match-status {