Styling added to league table

ProjectSourceCode/src/resources/css/league-pages/league-page.css

@@ -1,7 +1,7 @@
 #league-page-body {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 100v;
 }
 
 #league-information-container {
@@ -12,7 +12,7 @@
     padding: 10px 20px; /* Adjust padding as needed */
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     cursor: pointer; /* Change cursor to pointer on hover */
-    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
 
     display: flex; /* Use flexbox for layout */
     align-items: center; /* Center content vertically */
@@ -51,10 +51,9 @@
 #league-stats-container {
     width: 100%;
     display: flex;
-    flex: 1;
 }
 
-#league-table-and-information-container .container {
+#table-stats-container, #top-scorers-stats-container {
     margin: 0 10px;
     margin-bottom: 20px;
     padding: 15px;
@@ -64,6 +63,11 @@
     border: 1px solid gray;
     border-radius: 8px;
 
-    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
     /* Add any other styling you need for the league table container */
 }
+
+#table-stats-container:hover, #top-scorers-stats-container:hover {
+    transform: scale(1.01); /* Scale the row by 1.1 on hover */
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+}

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -1,7 +1,9 @@
-#league-table-container {
+#league-table-and-information-container {
-    width: 60%;
+    width: 50%;
     justify-content: center;
     align-items: center;
+
+    transition: transform 0.3s ease; /* Add smooth transition effect */
 }
 
 #standings-table {
@@ -9,6 +11,12 @@
     padding: 15px;
 }
 
+
+
+#club-logo-row {
+    width: 20px; 
+}
+
 #table-club-logo {
     width: 20px;
     margin-right: 5px;
@@ -26,9 +34,15 @@
 
 /* Define styles for odd and even rows */
 #standings-table tbody tr:nth-child(odd) {
-    background-color: #f2f2f2; /* Light gray for odd rows */
+    background-color: #f7f6f6; /* Light gray for odd rows */
 }
 
 #standings-table tbody tr:nth-child(even) {
     background-color: #ffffff; /* White for even rows */
 }
+
+/* Add hover effect to table rows */
+#standings-table tbody tr:hover {
+    border: 1px solid lightgray;
+    border-radius: 10px;
+}

ProjectSourceCode/src/resources/css/league-pages/top-scorers.css

@@ -1,10 +1,15 @@
 #top-scorers-container {
     flex: 1;
-    background-color: #dcdcdc; /* Example background color */
-    width: 40%;
     /* Add any other styling you need for the top scorers container */
 }
 
 #top-scorers-container img {
-    width: 25px;
+    width: 35px;
+    margin-right: 20px;
+}
+
+#goals-column {
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
 }

ProjectSourceCode/src/views/pages/leagues-page.hbs

@@ -53,7 +53,11 @@
 
         <!-- Container to display top scorers for league <- Split 50% -->
         <div id="top-scorers-container" class="container">
+            <div id="top-scorers-header-container" class="header">
                 <h2>Top Scorers</h2>
+            </div>
+
+            <div id="top-scorers-stats-container" class="container">
                 <table>
                     <thead>
                         <tr>
@@ -71,12 +75,13 @@
                             <td>{{player.player_name}}</td>
                             <td>{{team.team_name}}</td>
                             <td>{{games_played}}</td>
-                        <td>{{goals}}</td>
+                            <td id="goals-column">{{goals}}</td>
                         </tr>
                         {{/each}}
                     </tbody>
                 </table>
             </div>
+        </div>
 
     </div>
 </div>