Merge branch 'daif/beautify-front'

PoustouFlan · Aug 5, 2024 · f0f1d2c · f0f1d2c
2 parents 9556989 + 84890a4
commit f0f1d2c
Show file tree

Hide file tree

Showing 19 changed files with 202 additions and 101 deletions.
diff --git a/frontend/src/Navbar.css b/frontend/src/Navbar.css
@@ -0,0 +1,7 @@
+nav {
+    position: absolute;
+    top: 0;
+
+    width: 100%;
+    box-sizing: border-box;
+}
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -2,6 +2,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import "./Navbar.css"
+
 const Navbar: React.FC<{ isAuthenticated: boolean }> = ({ isAuthenticated }) => {
     return (
         <nav style={{ padding: '10px', borderBottom: '1px solid #ddd', display: 'flex', justifyContent: 'space-between' }}>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,11 +1,18 @@
 :root {
+  --bg-color: #0c1221;
+  --sec-color: #161b2a;
+  --high-orange: #ff3a00;
+  --high-yellow: #fdb813;
+  --high-red:    #dc4c50;
+  --high-blue:   #00aee0;
+
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: var(--bg-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,11 +22,16 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--high-yellow);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--high-orange);
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
 }
 
 body {
@@ -40,23 +52,68 @@ h1 {
   font-family: "IBM Plex Mono";
 }
 
+.section-title {
+  border-bottom: 1px solid var(--high-blue);
+  padding: 0 0 2pt 2pt;
+  width: 100%;
+}
+
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
+  position: relative;
+
+  border: 1px solid;
+  border-radius: 20pt;
   padding: 0.6em 1.2em;
+
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+
+  background-color: var(--sec-color);
   cursor: pointer;
-  transition: border-color 0.25s;
 }
+
 button:hover {
-  border-color: #646cff;
+  border-color: var(--high-blue);
+}
+
+.submit-button, button[type="submit"] {
+    border: none;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+.submit-button::after, button[type="submit"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+
+    height: 100%;
+    width: 100%;
+
+    padding: 3px;
+
+    background-image: linear-gradient(to bottom right, var(--high-yellow), var(--high-orange));
+    border-radius: 20pt;
+
+    z-index: -1;
+}
+
+.submit-button:hover, button[type="submit"]:hover {
+    z-index: 0;
+}
+
+.icon-button {
+    border: none;
+    background-color: transparent;
+}
+
+.icon-button svg {
+    color: var(--high-yellow);
+}
+
+.icon-button:hover svg {
+    color: var(--high-orange);
 }
 
 @media (prefers-color-scheme: light) {

diff --git a/frontend/src/scoreboard/create.css b/frontend/src/scoreboard/create.css
@@ -7,15 +7,15 @@
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--sec-color);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 0;
 }
 
 /* Heading for the form */
 .create-scoreboard-container h2 {
     margin-top: 0;
     font-size: 24px;
-    color: #333;
     text-align: center;
 }
 
@@ -28,7 +28,6 @@
 /* Input label styling */
 .create-scoreboard-container label {
     font-size: 16px;
-    color: #333;
     margin-bottom: 8px;
 }
 
@@ -41,23 +40,6 @@
     margin-bottom: 20px;
 }
 
-/* Submit button styling */
-.create-scoreboard-container button {
-    padding: 10px 15px;
-    font-size: 16px;
-    color: #fff;
-    background-color: #007bff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Submit button hover effect */
-.create-scoreboard-container button:hover {
-    background-color: #0056b3;
-}
-
 /* Error message styling */
 .error-message {
     color: #dc3545;

diff --git a/frontend/src/scoreboard/create.tsx b/frontend/src/scoreboard/create.tsx
@@ -46,7 +46,7 @@ const CreateScoreboard: React.FC<CreateScoreboardProps> = ({onScoreboardCreated}
                         onChange={(e) => setName(e.target.value)}
                     />
                 </div>
-                <button type="submit">Create Scoreboard</button>
+                <button className="submit-button" type="submit">Create Scoreboard</button>
             </form>
             {error && <div className="error-message">{error}</div>}
             {success && <div className="success-message">{success}</div>}

diff --git a/frontend/src/scoreboard/info.css b/frontend/src/scoreboard/info.css
@@ -5,6 +5,7 @@
 .box-center {
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 
 /* Scoreboard specific */
@@ -40,7 +41,7 @@
 }
 
 #scoreboard-table li:nth-child(odd) {
-    background-color: #333;
+    background-color: var(--sec-color);
 }
 
 .player-index {
@@ -72,25 +73,26 @@
 }
 
 .gold-text {
-    color: gold;
+    color: var(--high-yellow);
     margin-right: 5px;
 }
 
 .red-text {
-    color: red;
+    color: var(--high-red);
     margin-right: 5px;
 }
 
 .delete-button {
     background: none;
     border: none;
-    color: red;
     cursor: pointer;
     flex-grow: 0;
 }
 
-.delete-button:hover {
-    color: darkred;
+.delete-button svg {
+    color: var(--high-red);
 }
 
-/* Register popup */
+.delete-button:hover svg {
+    color: red;
+}
diff --git a/frontend/src/scoreboard/info.tsx b/frontend/src/scoreboard/info.tsx
@@ -184,7 +184,7 @@ const ScoreboardInfo: React.FC = () => {
         <div id="scoreboard-details-container">
             <div className="box-center">
                 <h1>{scoreboardName} Scoreboard</h1>
-                <button onClick={handleRefreshUsers} className="refresh-button">
+                <button onClick={handleRefreshUsers} className="refresh-button icon-button">
                     <FontAwesomeIcon icon={faSync}/>
                 </button>
             </div>
@@ -202,9 +202,10 @@ const ScoreboardInfo: React.FC = () => {
                 theme="dark"
             />
 
+            <h2 className="section-title">Scores of Top 10 Players</h2>
             <TopPlayersGraph users={sortedUsers.slice(0, 10)}/>
 
-            <div id="leaderboard-title">
+            <div id="leaderboard-title" className="section-title">
                 <h2>Leaderboard</h2>
                 <span className="icon-wrapper"><FontAwesomeIcon icon={faStar} className="gold-text"/>
                     Score

diff --git a/frontend/src/scoreboard/list.css b/frontend/src/scoreboard/list.css
@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #1a1a1a;
-    color: #ffffff;
+    background-color: var(--bg-color);
+    color: var(--text-color);
     padding: 20px;
     border-radius: 10px;
 }
@@ -16,13 +16,22 @@
 .scoreboard-table th, .scoreboard-table td {
     padding: 10px;
     text-align: left;
-    border-bottom: 1px solid #333333;
 }
 
 .scoreboard-table th {
-    background-color: #333333;
+    background-color: var(--bg-color);
+    font-family: 'IBM Plex Mono', sans-serif;
+    border-bottom: 1px solid var(--high-orange);
 }
 
-.scoreboard-table td {
-    background-color: #1a1a1a;
-}
+.scoreboard-table tr:nth-child(even) {
+    background-color: var(--bg-color);
+}
+
+.scoreboard-table tr:nth-child(odd) {
+    background-color: var(--sec-color);
+}
+
+.scoreboard-table td:last-child {
+    width: 1px;
+}
diff --git a/frontend/src/scoreboard/list.tsx b/frontend/src/scoreboard/list.tsx
@@ -6,6 +6,9 @@ import { deleteScoreboard } from '../api'; // Import the delete function
 import { Scoreboard } from "../api";
 import {getCurrentUser} from "../Utils.tsx"; // Assuming User is imported from api
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faTrash} from "@fortawesome/free-solid-svg-icons";
+
 interface ScoreboardListProps {
     scoreboards: Scoreboard[];
     onScoreboardDeleted: (name: string) => void; // Callback to refresh the list after deletion
@@ -27,9 +30,9 @@ const ScoreboardList: React.FC<ScoreboardListProps> = ({ scoreboards, onScoreboa
             <thead>
             <tr>
                 <th>Name</th>
-                <th>Owner</th>
                 <th>Number of Users</th>
-                <th>Actions</th>
+                <th>Owner</th>
+                <th></th>
             </tr>
             </thead>
             <tbody>
@@ -40,12 +43,12 @@ const ScoreboardList: React.FC<ScoreboardListProps> = ({ scoreboards, onScoreboa
                             {scoreboard.name}
                         </Link>
                     </td>
-                    <td>{scoreboard.owner}</td>
                     <td>{scoreboard.users.length}</td>
+                    <td>{scoreboard.owner}</td>
                     <td>
                         {currentUser && currentUser === scoreboard.owner && (
                             <button onClick={() => handleDelete(scoreboard.name)} className="delete-button">
-                                Delete
+                                <FontAwesomeIcon icon={faTrash}/>
                             </button>
                         )}
                     </td>

diff --git a/frontend/src/scoreboard/register.tsx b/frontend/src/scoreboard/register.tsx
@@ -49,15 +49,11 @@ const RegisterUser: React.FC<RegisterUserProps> = ({onRegister}) => {
         <h2 className="register-title">Register a New User</h2>
         <form onSubmit={handleRegister}>
             <div className="register-form-content">
-                <label htmlFor="username">
-                    Username:
-                </label>
-                <br />
                 <input
                     id="username"
                     type="text"
                     value={username}
-                    placeholder='Enter a username'
+                    placeholder='Username'
                     onChange={(e) => setUsername(e.target.value)}
                     required
                 ></input>