refactor join to intermediary page

client/src/styles/GLOBAL.css

@@ -186,6 +186,23 @@ button {
     color: #00a718;
 }
 
+#game-parameters {
+    font-family: signika-negative, sans-serif;
+    color: #d7d7d7;
+    font-size: 25px;
+    margin: 0.5em;
+}
+
+#game-parameters > div {
+    display: flex;
+    align-items: center;
+}
+
+#game-parameters img {
+    height: 20px;
+    margin-right: 10px;
+}
+
 #how-to-use-container img {
     max-width: 98%;
     border: 1px solid #57566a;

client/src/styles/create.css

@@ -231,7 +231,7 @@ option {
     cursor: pointer;
 }
 
-#step-4 > div {
+#step-5 > div {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -242,7 +242,19 @@ option {
     max-width: 95%;
 }
 
-#step-4 > div label {
+#step-4 {
+    width: 95%;
+    max-width: 25em;
+    margin: 0 auto;
+}
+
+#step-4 input {
+    padding: 15px 5px;
+    width: 95%;
+    font-size: 20px;
+}
+
+#step-5 > div label {
     width: 100%;
 }
 

client/src/styles/game.css

@@ -12,6 +12,7 @@
     min-width: 15em;
     border: 2px solid transparent;
     margin: 0.5em 0;
+    box-shadow: 2px 2px 5px rgb(0 0 0 / 40%);
 }
 
 #lobby-players {
@@ -125,6 +126,7 @@ h1 {
     align-items: center;
     display: flex;
     transition: background-color 0.2s;
+    max-width: 20em;
 }
 
 #game-link > div {
@@ -624,22 +626,6 @@ label[for='moderator'] {
     margin-bottom: 0.5em;
 }
 
-#game-parameters {
-    color: #d7d7d7;
-    font-size: 25px;
-    margin: 0.5em;
-}
-
-#game-parameters > div {
-    display: flex;
-    align-items: center;
-}
-
-#game-parameters img {
-    height: 20px;
-    margin-right: 10px;
-}
-
 #players-alive-label {
     display: block;
     margin-bottom: 10px;

client/src/styles/join.css

@@ -0,0 +1,28 @@
+#join-game-modal {
+    border-left: 5px solid #b1afcd;
+    animation: entrance 0.5s forwards;
+    transform-origin: center;
+}
+
+#game-parameters div:nth-child(1) {
+    margin-bottom: 20px;
+}
+
+#game-code {
+    font-family: "Courier New", monospace;
+}
+
+@keyframes entrance {
+    0% {
+        transform: translate(-50%, calc(-50% + 40px));
+        opacity: 0;
+    }
+    95% {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}