Improve game overlay UI

front/src/Components/FollowMenu/FollowMenu.svelte

@@ -1,9 +1,5 @@
-<!--
-vim: ft=typescript
--->
 <script lang="ts">
     import { gameManager } from "../../Phaser/Game/GameManager";
-    import followImg from "../images/follow.svg";
     import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
     import LL from "../../i18n/i18n-svelte";
 
@@ -14,10 +10,6 @@ vim: ft=typescript
         return user ? user.PlayerValue : "";
     }
 
-    function sendFollowRequest() {
-        gameScene.CurrentPlayer.sendFollowRequest();
-    }
-
     function acceptFollowRequest() {
         gameScene.CurrentPlayer.startFollowing();
     }
@@ -83,7 +75,7 @@ vim: ft=typescript
 
 {#if $followStateStore === "active" || $followStateStore === "ending"}
     <div class="interact-status nes-container is-rounded">
-        <section class="interact-status">
+        <section>
             {#if $followRoleStore === "follower"}
                 <p>{$LL.follow.interactStatus.following({ leader: name($followUsersStore[0]) })}</p>
             {:else if $followUsersStore.length === 0}
@@ -109,48 +101,27 @@ vim: ft=typescript
     </div>
 {/if}
 
-{#if $followStateStore === "off"}
-    <button
-        type="button"
-        class="nes-btn is-primary follow-menu-button"
-        on:click|preventDefault={sendFollowRequest}
-        title="Ask others to follow"><img class="background-img" src={followImg} alt="" /></button
-    >
-{/if}
-
-{#if $followStateStore === "active" || $followStateStore === "ending"}
-    {#if $followRoleStore === "follower"}
-        <button
-            type="button"
-            class="nes-btn is-error follow-menu-button"
-            on:click|preventDefault={reset}
-            title="Stop following"><img class="background-img" src={followImg} alt="" /></button
-        >
-    {:else}
-        <button
-            type="button"
-            class="nes-btn is-error follow-menu-button"
-            on:click|preventDefault={reset}
-            title="Stop leading the way"><img class="background-img" src={followImg} alt="" /></button
-        >
-    {/if}
-{/if}
-
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     .nes-container {
         padding: 5px;
     }
 
-    div.interact-status {
+    .interact-status {
         background-color: #333333;
         color: whitesmoke;
 
-        position: relative;
-        height: 2.7em;
+        position: absolute;
+        max-height: 2.7em;
         width: 40vw;
         top: 87vh;
-        margin: auto;
         text-align: center;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        z-index: 150;
     }
 
     div.interact-menu {
@@ -158,10 +129,14 @@ vim: ft=typescript
         background-color: #333333;
         color: whitesmoke;
 
-        position: relative;
+        position: absolute;
         width: 60vw;
         top: 60vh;
-        margin: auto;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        z-index: 150;
 
         section.interact-menu-title {
             margin-bottom: 20px;
@@ -189,23 +164,16 @@ vim: ft=typescript
         }
     }
 
-    .follow-menu-button {
-        position: absolute;
-        bottom: 10px;
-        left: 10px;
-        pointer-events: all;
-    }
-
-    @media only screen and (max-width: 800px) {
-        div.interact-status {
-            width: 100vw;
+    @include media-breakpoint-up(md) {
+        .interact-status {
+            width: 90vw;
             top: 78vh;
             font-size: 0.75em;
         }
 
         div.interact-menu {
-            height: 21vh;
-            width: 100vw;
+            max-height: 21vh;
+            width: 90vw;
             font-size: 0.75em;
         }
     }