* Some CSS

front/volume/src/App.svelte

@@ -191,10 +191,15 @@
   }
 </script>
 
-<main>
   <div>
     {#if $store === null}
-      <h1><button type="button" on:click={login}>Log In</button></h1>
+      <div class="login-div">
+        <h3 class="test">
+          Please log in with 42 api to access the website.
+        </h3>
+        <img class="img-42" src="https://translate.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg" alt="logo_42">
+        <button class="login-button" type="button" on:click={login}>Log In</button>
+      </div>
     {:else if $store.twoFA === true && $store.isVerified === false}
       <h1><button type="button" on:click={verify}>verify</button></h1>
     {:else}
@@ -275,7 +280,23 @@
       {/if}
     {/if}
   </div>
-</main>
 
 <style>
+  .login-div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10vh;
+  }
+
+  .img-42 {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+    width: 64px;
+    height: 64px;
+  }
+
+  .login-button {
+    display: inline;
+  }
 </style>

front/volume/src/assets/svelte.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

front/volume/src/components/Pong/ColorPicker.svelte

@@ -2,9 +2,7 @@
   export let color: string;
 </script>
 
-<div>
+<input class="color-input" type="color" bind:value={color} />
-  <input type="color" bind:value={color} />
-</div>
 
 <style>
 </style>

front/volume/src/components/Pong/GameCreation.svelte

@@ -23,7 +23,7 @@
 <div class="overlay">
   <div class="window" on:click|stopPropagation on:keydown|stopPropagation>
     Friend:
-    <input bind:value={invitedUsername} />
+    <input class="name-input" bind:value={invitedUsername} />
     <button on:click={createGame}>
       Create game vs {invitedUsername}
     </button>
@@ -50,7 +50,11 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 1rem;
-    width: 80vw;
+    width: 50vw;
-    height: 80vh;
+  }
+
+  .name-input {
+    max-width: 100%;
+    margin-bottom: 1rem;
   }
 </style>

front/volume/src/components/Pong/MapCustomization.svelte

@@ -81,13 +81,19 @@
 </script>
 
 <div>
-  <h1>Map Customization:</h1>
+  <div class="title">Map Customization:</div>
-  Right click to add walls, left click to remove walls. (Max {MAX_WALLS} walls)
+  <div>
+    PC: Right click to add walls, left click to remove walls.
+    <br />
+    Mobile: Click to add walls
+    <br />
+    (Maximum {MAX_WALLS} walls)
+  </div>
   <button
     on:click={() => {
       map.walls = [];
       drawMap();
-    }}>Clear</button
+    }}>Clear all walls</button
   >
   <canvas
     bind:this={gameCanvas}
@@ -102,4 +108,8 @@
     width: 100%;
     height: 100%;
   }
+
+  .title {
+    font-weight: bold;
+  }
 </style>

front/volume/src/components/Pong/Pong.svelte

@@ -168,11 +168,17 @@
     <button on:click={() => setAppState(APPSTATE.CREATE_GAME)}
       >Play with a friend</button
     >
-    <label for="colorPicker">Elements color:</label>
+    <div>
-    <ColorPicker bind:color={elementsColor} />
+      <h3>Color your game!</h3>
-    <label for="colorPicker">Background color:</label>
+      <div>
-    <ColorPicker bind:color={backgroundColor} />
+        <label class="color-label" for="colorPicker">Elements color:</label>
-
+        <ColorPicker bind:color={elementsColor} />
+      </div>
+      <div>
+        <label class="color-label" for="colorPicker">Background color:</label>
+        <ColorPicker bind:color={backgroundColor} />
+      </div>
+    </div>
     {#if appState === APPSTATE.MATCHMAKING}
       <div on:click={stopMatchmaking} on:keydown={stopMatchmaking}>
         <Matchmaking {stopMatchmaking} />
@@ -211,4 +217,8 @@
     padding: 1rem 2rem;
     margin-bottom: 1rem;
   }
+
+  .color-label {
+    display: inline;
+  }
 </style>