Improving UI

frontend/public/style.css

@@ -59,6 +59,18 @@ h1 {
     line-height: 1.1;
 }
 
+button {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #003566;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
 @media (prefers-color-scheme: light) {
     :root {
         color: #213547;
@@ -68,10 +80,6 @@ h1 {
     a:hover {
         color: #747bff;
     }
-
-    button {
-        background-color: #f9f9f9;
-    }
 }
 
 .input-box .btn:hover {

frontend/src/App.svelte

@@ -8,6 +8,8 @@
 
     let competitions: Competition[] = [];
 
+    let competitionID = 0;
+
     onMount(async () => {
         competitions = await Session.GetCompetitions();
     });
@@ -15,10 +17,10 @@
 
 <div class="container">
     <NavBar />
-    {#if competitions.length === 0}
+    {#if competitions.length <= competitionID}
         <p>Loading...</p>
     {:else}
-        <Registrations competition={competitions[0]} />
+        <Registrations competition={competitions[competitionID]} />
     {/if}
 </div>
 

frontend/src/components/NavBar.svelte

@@ -71,18 +71,6 @@
         align-items: center;
     }
 
-    button {
-        padding: 10px;
-        border: none;
-        border-radius: 5px;
-        background-color: #003566;
-        color: white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-
     .competition-el {
         min-width: 20vw;
         display: flex;

frontend/src/components/Registrations.svelte

@@ -70,7 +70,10 @@
             ) ||
             player.PlayerLastname.toLowerCase().includes(
                 searchTerms.toLowerCase()
-            )
+            ) ||
+            player.PlayerClub?.club_name
+                .toLowerCase()
+                .includes(searchTerms.toLowerCase())
         );
     });
 </script>
@@ -191,7 +194,8 @@
                             }}>{player.PlayerLastname}</td
                         >
                         <td
-                            >{#if player.PlayerClub}{player.PlayerClub}{/if}</td
+                            >{#if player.PlayerClub}{player.PlayerClub}{:else}Sans
+                                Nom{/if}</td
                         >
                     </tr>
                 {/if}
@@ -243,22 +247,47 @@
     }
 
     table {
-        width: 90%;
-        border-collapse: collapse;
+        font-size: small;
+        width: 70%;
+        border-collapse: separate;
+        border-spacing: 0 20px;
     }
 
     th,
     td {
-        padding: 8px;
+        margin: 3px;
+        padding-left: 20px;
         text-align: left;
+        border-left: dashed rgba(119, 141, 169, 30%) 3px;
     }
 
-    td {
-        border-bottom: 1px solid #e9ecef;
+    tr {
+        border-radius: 20px;
+    }
+
+    td:first-child,
+    th:first-child {
+        border-left: none;
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+    }
+
+    td:last-child,
+    th:last-child {
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+    }
+
+    tr:nth-child(even) {
+        background-color: #e9ecef;
+    }
+
+    tr:nth-child(odd) {
+        background-color: #dee2e6;
     }
 
-    #add-player-tr td {
-        border: none;
+    tr:last-child {
+        background: none;
     }
 
     th {