feat: new hover in matches

Andres2D · Jan 5, 2023 · d2f5dfa · d2f5dfa
1 parent 99e0f19
commit d2f5dfa
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 60 deletions.
diff --git a/components/matches/match-list.module.scss b/components/matches/match-list.module.scss
@@ -4,50 +4,39 @@
   display: flex;
   align-items: center;
   justify-content: space-evenly;
-  margin: 20px auto;
-  width: 80%;
+  width: 70%;
   flex-wrap: nowrap;
-  height: 230px;
-  padding: 5px;
-  border-radius: 10px;
+  padding: 1rem;
   cursor: pointer;
   transition: all 300ms;
-  border: 2px solid transparent;
   position: relative;
-
-  &::before {
-    content: '';
-    background-color: rgba(78, 203, 113, 0.75);
-    position: absolute;
-    left: 0;
-    bottom: 3px;
-    width: 100%;
-    height: 8px;
-    transition: all 0.3s ease-in-out;
-  }
-
-  &:hover::before {
-    bottom: 0;
-    height: 100%;
-    border-radius: 20px;
-  }
+  border-color: rgba(78, 203, 113, 0.8);
+  border-style: solid none;
+  border-width: 0.1px;
+  margin-top: 1rem;
+  margin-bottom: -18px;
 
   .matchDetails {
     display: flex;
-    width: 80%;
+    width: 100%;
     justify-content: space-evenly;
-
-    .containerVS {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      z-index: 1;
+    align-items: center;
+    text-align: center;
 
       .details {
         color: #f7fafc;
+        transition: transform .3s;
+
+        h1 {
+          font-size: larger;
+          font-weight: 900;
+        }
+      }
+
+      .team {
+        color: #f7fafc;
+        transition: transform .3s;
       }
-    }
   }
 
   .options {
@@ -57,6 +46,23 @@
   }
 }
 
+.container:hover {
+  border-color: rgba(78, 203, 113, 0.75);
+  border-width: thick;
+  padding-top: -18px;
+  width: 80%;
+
+  .matchDetails .details {
+    color: rgba(78, 203, 113, 1);
+    transform: scale(1.5);
+  }
+
+  .matchDetails .team button {
+    background-color: rgba(78, 203, 113, 1);
+    transform: scale(1.5);
+  }
+}
+
 @media (max-width: $medium-small-device) {
   .container {
     height: unset;
@@ -69,11 +75,6 @@
     .matchDetails {
       flex-direction: column;
       align-items: center;
-
-      .containerVS {
-        flex-direction: row;
-        margin: 20px;
-      }
     }
 
     .options {

diff --git a/components/matches/match-list.tsx b/components/matches/match-list.tsx
@@ -26,32 +26,29 @@ const MatchList: NextPage<Props> = ({matches}) => {
         onClick={() => goToMatchDetails(_id)}
       >
         <div className={styles.matchDetails}>
-          <Team
-            name={home_team.name}
-            image={home_team.shield}
-            width={120}
-            height={120}
-          />
+          <div className={styles.team}>
+            <Team
+              name={home_team.name}
+              image={home_team.shield}
+              width={120}
+              height={120}
+            />
+          </div>
 
-          <div className={styles.containerVS}>
-            <Image
-              src={'/images/vs-icon.png'}
-              alt='Icon versus'
-              width={55}
-              height={45}
-            ></Image>
-            <div className={styles.details}>
-              <h2>{date}</h2>
-              <h2>{location}</h2>
-            </div>
+          <div className={styles.details}>
+            <h1>VS</h1>
+            <h2>{date}</h2>
+            <h2>{location}</h2>
           </div>
 
-          <Team
-            name={away_team.name}
-            image={away_team.shield}
-            width={120}
-            height={120}
-          />
+          <div className={styles.team}>
+            <Team
+              name={away_team.name}
+              image={away_team.shield}
+              width={120}
+              height={120}
+            />
+          </div>
         </div>
         <div className={styles.options}>
           <IconButton