styling update

src/App.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { onMounted, type Ref, ref } from 'vue'
+import { onMounted, onUnmounted, type Ref, ref } from 'vue'
 import SocketioService from '@/services/socketio.service';
 
 const screen:Ref<string> = ref('login');
@@ -15,4 +15,8 @@ const screen:Ref<string> = ref('login');
 onMounted(() => {
   SocketioService.setupSocketConnection();
 });
+
+onUnmounted(() => {
+  SocketioService.disconnect();
+});
 </script>

src/assets/login.scss

@@ -41,7 +41,6 @@
             color: #000;
             background-color: rgba(255, 255, 255, 0.5);
             padding: 0.25rem 0.5rem;
-            font-weight: 600;
             font-size: 0.875rem;
           }
           input {
@@ -64,11 +63,11 @@
       gap: 0.5rem;
 
       .button {
-        padding: 0.875rem 0;
+        padding: 1rem 0;
         min-width: 6.25rem;
         text-align: center;
         position: relative;
-        font-size: 0.875rem;
+        font-size: 0.80rem;
 
         p {
           margin: auto;

src/assets/main.scss

@@ -6,7 +6,6 @@
 body {
     -ms-overflow-style: none;
     scrollbar-width: none;
-
     background: black;
 }