From 12445db7f12651150220da6f039f34d81f18da55 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 12 Jun 2024 21:30:51 +0200
Subject: [PATCH] NQ-74 Styling updates and fixes GUI

---
 public/assets/icons/submit-icon.svg           |  2 +-
 ...shape-2.svg => character-select-shape.svg} |  0
 public/assets/shapes/hud-image-shape-2.svg    |  1 -
 .../assets/shapes/hud-image-shape-flipped.svg |  1 +
 public/assets/shapes/hud-image-shape.svg      |  2 +-
 public/assets/shapes/hud-shape-2.svg          |  1 -
 public/assets/shapes/hud-shape.svg            |  2 +-
 src/components/gui/Chat.vue                   | 29 ++++----
 src/components/gui/Hud.vue                    | 66 ++++++++++++++++---
 src/components/gui/Menu.vue                   | 30 ++++-----
 src/components/utilities/Modal.vue            |  2 +-
 src/screens/Characters.vue                    |  2 +-
 src/screens/Game.vue                          |  2 +-
 13 files changed, 95 insertions(+), 45 deletions(-)
 rename public/assets/shapes/{character-select-shape-2.svg => character-select-shape.svg} (100%)
 delete mode 100644 public/assets/shapes/hud-image-shape-2.svg
 create mode 100644 public/assets/shapes/hud-image-shape-flipped.svg
 delete mode 100644 public/assets/shapes/hud-shape-2.svg

diff --git a/public/assets/icons/submit-icon.svg b/public/assets/icons/submit-icon.svg
index 61b66c8..f041ce7 100644
--- a/public/assets/icons/submit-icon.svg
+++ b/public/assets/icons/submit-icon.svg
@@ -1 +1 @@
-<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: rgb(69, 69, 69); fill-opacity: 1;"/></g></g></g></svg>
\ No newline at end of file
+<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: #696969; fill-opacity: 1;"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape-2.svg b/public/assets/shapes/character-select-shape.svg
similarity index 100%
rename from public/assets/shapes/character-select-shape-2.svg
rename to public/assets/shapes/character-select-shape.svg
diff --git a/public/assets/shapes/hud-image-shape-2.svg b/public/assets/shapes/hud-image-shape-2.svg
deleted file mode 100644
index 736840d..0000000
--- a/public/assets/shapes/hud-image-shape-2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="278.367" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="0.987 0 278.367 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M0.987,12.078C4.058,4.975,11.130,0.000,19.354,0.000L259.354,0.000C270.393,0.000,279.354,8.962,279.354,20.000L279.354,64.000C279.354,75.038,270.393,84.000,259.354,84.000L19.354,84.000C11.162,84.000,4.113,79.063,1.023,72.005C16.790,71.104,29.354,58.008,29.354,42.000C29.354,26.009,16.816,12.923,0.987,12.078Z" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-image-shape-flipped.svg b/public/assets/shapes/hud-image-shape-flipped.svg
new file mode 100644
index 0000000..25eef93
--- /dev/null
+++ b/public/assets/shapes/hud-image-shape-flipped.svg
@@ -0,0 +1 @@
+<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eb5ea5d2669" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eb5ea5d2669"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eb5ea5d2669"><path d="M286.515,78.278C282.911,83.543,276.856,87.000,270.000,87.000L20.000,87.000C8.962,87.000,0.000,78.038,0.000,67.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L270.000,0.000C276.834,0.000,282.872,3.435,286.480,8.671C268.843,10.411,255.000,25.352,255.000,43.500C255.000,61.610,268.784,76.525,286.515,78.278ZM290.000,20.000L290.000,67.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-image-shape.svg b/public/assets/shapes/hud-image-shape.svg
index 93156c2..98eca1b 100644
--- a/public/assets/shapes/hud-image-shape.svg
+++ b/public/assets/shapes/hud-image-shape.svg
@@ -1 +1 @@
-<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71b166124144" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71b166124144"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71b166124144"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
+<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="4058.354 6110 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M4061.840,6118.722C4065.444,6113.457,4071.499,6110.000,4078.354,6110.000L4328.354,6110.000C4339.393,6110.000,4348.354,6118.962,4348.354,6130.000L4348.354,6177.000C4348.354,6188.038,4339.393,6197.000,4328.354,6197.000L4078.354,6197.000C4071.521,6197.000,4065.483,6193.565,4061.875,6188.329C4079.512,6186.589,4093.354,6171.648,4093.354,6153.500C4093.354,6135.390,4079.571,6120.475,4061.840,6118.722ZM4058.354,6177.000L4058.354,6130.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-shape-2.svg b/public/assets/shapes/hud-shape-2.svg
deleted file mode 100644
index 6ac7a8c..0000000
--- a/public/assets/shapes/hud-shape-2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="278.355" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d68f958e1ff" viewBox="4060.645 6208 278.355 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e38d8c7f-bba0-801b-8004-7d68f958e1ff" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"/></clipPath><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" id="stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" clip-path="url('#inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-shape.svg b/public/assets/shapes/hud-shape.svg
index 2c65f0a..e89ab60 100644
--- a/public/assets/shapes/hud-shape.svg
+++ b/public/assets/shapes/hud-shape.svg
@@ -1 +1 @@
-<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71aadb07368f" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71aadb07368f"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71aadb07368f"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.5;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71aadb07368f" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"/></clipPath><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0')"/></g></g></g></svg>
\ No newline at end of file
+<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 2c697ef..8391ed6 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="chat-wrapper">
     <input placeholder="Type something..." />
-    <img draggable="false" src="/assets/icons/submit-icon.svg" />
   </div>
 </template>
 
@@ -18,22 +17,28 @@
   align-items: center;
 
   input {
-    width: 500px;
-    height: 48px;
-    border-radius: 48px;
-    opacity: 0.8;
+    max-width: 750px;
+    width: 100%;
+    height: 51px;
+    border-radius: 8px;
     font-size: 1.2rem;
     padding: 0 24px;
     background-color: rgba($white, 0.85);
     border: 2px solid $white;
-    color: black;
-  }
+    color: $gray-2;
+    background-image: url("/assets/icons/submit-icon.svg");
+    background-repeat: no-repeat;
+    background-size: 30px;
+    background-position: calc(100% - 25px) center;
 
-  img {
-    position: absolute;
-    left: 500px;
-    width: 30px;
-    height: 30px;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 500px;
+      width: 30px;
+      height: 30px;
+      
+    }
   }
 }
 </style>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index bdfe5ae..d6733b3 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -20,6 +20,25 @@
       </div>
     </div>
   </div>
+
+  <!-- TODO: Replace socket.character with other (selected) player's -->
+  <div class="hud-wrapper other-player">
+    <div class="profile">
+      <img draggable="false" src="/assets/avatar/default/head.png" />
+    </div>
+    <div class="hud">
+      <div class="stats">
+        <div class="player-details">
+          <span class="player-name">{{ socket.character.name }}</span>
+          <span class="player-lvl">lvl. {{ socket.character.level }}</span>
+        </div>
+        <div class="bar">
+          <label for="hp">HP</label>
+          <progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -41,17 +60,16 @@ const socket = useSocketStore()
   &::before {
     position: absolute;
     top: 0;
-    left: 27px;
+    left: 30px;
     width: 280px;
     height: 84px;
-    border-radius: 16px;
     z-index: 1;
   }
 
   .profile {
     position: absolute;
-    width: 48px;
-    height: 48px;
+    width: 54px;
+    height: 54px;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
     border: 3px solid $white;
@@ -60,7 +78,7 @@ const socket = useSocketStore()
     left: 0;
     z-index: 2; // Ensure profile is above hud and before
     img {
-      width: 26px;
+      width: 28px;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -69,14 +87,13 @@ const socket = useSocketStore()
   }
 
   .hud {
-    background: url('/assets/shapes/hud-shape-2.svg') center/cover no-repeat;
+    background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
     .stats {
-      height: 100%;
+      height: calc(100% - 30px);
       display: flex;
       flex-direction: column;
       align-items: end;
-      justify-content: center;
-      padding: 0 20px 0 50px;
+      padding: 15px 20px 15px 50px;
 
       .player-details,
       .bar {
@@ -155,8 +172,37 @@ const socket = useSocketStore()
   &::before {
     content: '';
     background: url('/assets/clouds.png') center/cover no-repeat;
-    mask: url('/assets/shapes/hud-image-shape-2.svg') center/cover no-repeat;
+    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
     mask-mode: luminance;
   }
+
+  &.other-player {
+    left: unset;
+    right: 0;
+
+    &::before {
+      left: unset;
+      right: 30px;
+      mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
+    }
+
+    .profile {
+      left: unset;
+      right: 0;
+      img {
+        transform: translate(-50%, -50%) scaleX(-1);
+      }
+    }
+
+    .hud {
+      left: unset;
+      right: 30px;
+      transform: scaleX(-1);
+      .stats {
+        transform: scaleX(-1);
+        padding: 15px 50px 15px 20px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 6946180..d05eb37 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -38,18 +38,18 @@
   .menu {
     list-style: none;
     display: flex;
-    gap: 20px;
+    gap: 10px;
 
     .menu-item {
       position: relative;
 
       p {
         position: absolute;
-        bottom: 50px;
-        width: 64px;
+        bottom: 65px;
+        width: 85px;
         text-align: center;
-        background-color: #b1b2b5;
-        border: 2px solid $white;
+        background-color: $dark-gray;
+        border: 2px solid $cyan;
         border-radius: 24px;
         height: 24px;
         font-size: 0.875rem;
@@ -61,7 +61,7 @@
         &::after {
           content: '';
           position: absolute;
-          top: 100%;
+          top: calc(100% + 2px);
           background-color: $white;
           height: 8px;
           width: 14px;
@@ -73,16 +73,17 @@
 
       a {
         padding: 8px;
-        background-color: rgba(127, 127, 127, 0.7);
-        border: 2px solid $white;
-        border-radius: 50%;
+        background-color: rgba($dark-gray, 0.7);
+        border: 2px solid $cyan;
+        border-radius: 8px;
         display: block;
-        width: 30px;
-        height: 30px;
+        width: 45px;
+        height: 35px;
 
         img {
-          width: inherit;
           height: inherit;
+          width: inherit;
+          object-fit: contain;
         }
       }
 
@@ -92,9 +93,8 @@
         }
 
         a {
-          background-image: url('/assets/galaxy.png');
-          background-position: center;
-          background-size: cover;
+          background-color: rgba($gray, 0.7);
+          cursor: pointer;
 
           img {
             filter: drop-shadow(0px 3px 6px $black);
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 1cf166c..9ae5b30 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -200,7 +200,7 @@ function handleResize() {
   z-index: 999;
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
+  border-radius: 8px;
   backdrop-filter: blur(5px);
   box-shadow: 0 0 10px rgba($black, 0.5);
 
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 53f387d..3712dab 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -168,7 +168,7 @@ onBeforeUnmount(() => {
         border-radius: 20px;
         position: relative;
         background-repeat: no-repeat;
-        background-image: url('/assets/shapes/character-select-shape-2.svg');
+        background-image: url('/assets/shapes/character-select-shape.svg');
         box-shadow: 0 4px 30px rgba($black, 0.1);
 
         &::after {
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index dbb8639..09a0a57 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -102,6 +102,7 @@ const createScene = (scene: Phaser.Scene) => {
 .bottom-ui {
   display: flex;
   position: absolute;
+  justify-content: space-between;
   left: 0;
   right: 0;
   margin: 0 48px;
@@ -112,7 +113,6 @@ const createScene = (scene: Phaser.Scene) => {
 }
 
 .bottom-ui {
-  justify-content: space-between;
   align-items: center;
   bottom: 100px;
   height: 100px;