SMA-33: refactoring

MatejFrnka · Feb 6, 2024 · a838c3f · a838c3f
1 parent 3c6e697
commit a838c3f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 48 deletions.
diff --git 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
@@ -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;
+export default Avatar
diff --git a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
@@ -1,12 +1,12 @@
-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">
@@ -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
@@ -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;
+}
diff --git 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
@@ -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;
 }