SMA-33: minor changes in css

MatejFrnka · Feb 6, 2024 · fc1eb25 · fc1eb25
1 parent 5879204
commit fc1eb25
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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;