From a838c3fc54a8a7c4a65f678d6258ee462529623e 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:52:34 +0100
Subject: [PATCH] SMA-33: refactoring

---
 frontend/sportsmatch-app/src/App.css          |  4 ++
 .../sportsmatch-app/src/components/Avatar.tsx | 15 +++---
 .../src/components/EventHistoryItem.tsx       | 18 ++++---
 .../sportsmatch-app/src/styles/Avatar.css     |  9 ++++
 .../src/styles/EventHistoryItem.css           | 51 ++++++++-----------
 .../sportsmatch-app/src/styles/SportEvent.css |  1 -
 6 files changed, 50 insertions(+), 48 deletions(-)
 create mode 100644 frontend/sportsmatch-app/src/styles/Avatar.css

diff --git a/frontend/sportsmatch-app/src/App.css b/frontend/sportsmatch-app/src/App.css
index 74b5e053..3296982d 100644
--- a/frontend/sportsmatch-app/src/App.css
+++ b/frontend/sportsmatch-app/src/App.css
@@ -1,3 +1,7 @@
+body{
+  font-family: 'Inter', sans-serif;
+}
+
 .App {
   text-align: center;
 }
diff --git a/frontend/sportsmatch-app/src/components/Avatar.tsx b/frontend/sportsmatch-app/src/components/Avatar.tsx
index 1532e424..485e0b96 100644
--- a/frontend/sportsmatch-app/src/components/Avatar.tsx
+++ b/frontend/sportsmatch-app/src/components/Avatar.tsx
@@ -1,14 +1,11 @@
-
+import '../styles/Avatar.css'
 
 interface AvatarProps {
-    src: string;
-    alt: string;
+  src: string
 }
 
-const Avatar: React.FC<AvatarProps> = ({src, alt}) => (
-    <div className="avatar">
-        <img src={src} alt={alt} className="avatar-image" />
-    </div>
-);
+const Avatar: React.FC<AvatarProps> = ({ src }) => (
+  <div className="avatar" style={{ backgroundImage: `url(${src}` }}></div>
+)
 
-export default Avatar;
\ No newline at end of file
+export default Avatar
diff --git a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
index b3a34c0d..8e8a8a80 100644
--- a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
+++ b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
@@ -1,4 +1,4 @@
-import {EventHistoryDTO} from '../generated/api'
+import { EventHistoryDTO } from '../generated/api'
 import '../styles/EventHistoryItem.css'
 import Avatar from './Avatar'
 
@@ -6,7 +6,7 @@ interface EventHistoryProps {
   eventHistoryDTO: EventHistoryDTO
 }
 
-function EventHistoryItem({eventHistoryDTO}: EventHistoryProps) {
+function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
   return (
     <>
       <div className="container-sm">
@@ -15,23 +15,25 @@ function EventHistoryItem({eventHistoryDTO}: EventHistoryProps) {
           <div className="user-side">
             <div className="user-profile">
               <div className="user-avatar">
-                <Avatar src="" alt="User"/>
+                <Avatar src="pictures/michael-dam-mEZ3PoFGs_k-unsplash.jpg" />
               </div>
               <div className="user-name">You</div>
             </div>
-            <div className="user-score">{eventHistoryDTO.userScore}</div>
+            <div className="user-score score">
+              <span>{eventHistoryDTO.userScore}</span>
+            </div>
           </div>
 
           <div className="colon">
-            <p>:</p>
+            <span>:</span>
           </div>
           <div className="opponent-side">
-            <div className="opponent-score">
-              {eventHistoryDTO.opponentScore}
+            <div className="opponent-score score">
+              <span>{eventHistoryDTO.opponentScore}</span>
             </div>
             <div className="opponent-profile">
               <div className="opponent-avatar">
-                <Avatar src="" alt="Opponent" />
+                <Avatar src="pictures/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" />
               </div>
               <div className="opponent-name">
                 {eventHistoryDTO.opponent?.name}
diff --git a/frontend/sportsmatch-app/src/styles/Avatar.css b/frontend/sportsmatch-app/src/styles/Avatar.css
new file mode 100644
index 00000000..c733c4d2
--- /dev/null
+++ b/frontend/sportsmatch-app/src/styles/Avatar.css
@@ -0,0 +1,9 @@
+.avatar {
+    width: 100%;
+    height: 100%;
+    border: 2px solid #FC4C02;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center center;
+    object-fit: cover;
+}
\ No newline at end of file
diff --git a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
index a82746ad..1e0a322b 100644
--- a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
+++ b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
@@ -1,16 +1,19 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
 
 
-
-
 .colon {
-    display: block;
+    display: grid;
     color: #FC4C02;
     font-weight: bold;
     font-size: 16px;
     text-align: center;
     grid-column: 2;
-    padding: 9px;
+    padding: 9px 9px 0 9px;
+    height: 41px;
+}
+
+.colon span {
+    margin: auto;
 }
 
 .event-history-item {
@@ -21,12 +24,11 @@
     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;
     border-radius: 10px;
 }
-  
+
 .user-side {
     grid-column: 1;
     display: grid;
@@ -53,28 +55,28 @@
     grid-column: 2;
 }
 
-.user-score {
-    align-items: center;
-    display: flex;
+
+.score {
     height: 35px;
-    text-align: right;
     color: #FC4C02;
     font-weight: bold;
     font-size: 16px;
-    grid-column: 3;
     grid-row: 1;
+    display: grid;
+}
+
+.score span {
+    margin: auto 0;
+}
+
+.user-score {
+    grid-column: 3;
+    text-align: right;
 }
 
 .opponent-score {
-    align-items: center;
-    display: flex;
-    height: 35px;
-    text-align: left;
-    color: #FC4C02;
-    font-weight: bold;
-    font-size: 16px;
     grid-column: 1;
-    grid-row: 1;
+    text-align: left;
 }
 
 .user-name {
@@ -92,26 +94,15 @@
 
 
 .user-avatar {
-    border: 2px solid #FC4C02;
     width: 35px;
     height: 35px;
-    border-radius: 50%;
-    background-image: url("pictures\jeffrey-keenan-pUhxoSapPFA-unsplash.jpg");
-    background-size: cover;
-    background-position: center center;
     grid-row: 1;
     margin: auto;
 }
 
 .opponent-avatar {
-    border: 2px solid #FC4C02;
     width: 35px;
     height: 35px;
-    border-radius: 50%;
-    background-image: url("pictures\michael-dam-mEZ3PoFGs_k-unsplash.jpg");
-    background-size: cover;
-    background-position: center center;
-    object-fit: cover;
     grid-row: 1;
     margin: auto;
 }
diff --git a/frontend/sportsmatch-app/src/styles/SportEvent.css b/frontend/sportsmatch-app/src/styles/SportEvent.css
index a88f3d02..482d6794 100644
--- a/frontend/sportsmatch-app/src/styles/SportEvent.css
+++ b/frontend/sportsmatch-app/src/styles/SportEvent.css
@@ -14,7 +14,6 @@
     min-height: 106px;
     margin: 16px;
     font-size: 10px;
-    font-family: 'Inter', sans-serif;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
     border-radius: 2px;
 }