refactor: update layout structure in settings.vue and settings.scss for improved responsiveness and clarity; replace .bg with <main> and integrate BottomBar component

assets/css/settings.scss

@@ -6,15 +6,15 @@ $text: #e5dfd5;
 $text2: #ada9a1;
 $mutedtext: #78756f;
 
-.bg {
-  width: 750px;
-  height: 474px;
+main {
+  width: 100vw;
+  height: 100vh;
   background-color: $primary;
   border: 1px solid $divider;
+  display: flex;
+  flex-direction: column;
   border-radius: 12px;
-  z-index: -1;
-  position: fixed;
-  outline: none;
+  justify-content: space-between;
 }
 
 .back {
@@ -42,6 +42,7 @@ p {
 
 .settings-container {
   width: 100%;
+  height: 100%;
   margin-top: 26px;
   position: relative;
   font-size: 12px;
@@ -59,7 +60,7 @@ p {
       display: flex;
       flex-direction: column;
       gap: 16px;
-      
+
       p {
         font-family: SFRoundedSemiBold;
         color: $text2;
@@ -144,7 +145,7 @@ p {
 
 .top-bar {
   width: 100%;
-  height: 56px;
+  min-height: 56px;
   border-bottom: 1px solid $divider;
 }
 

pages/settings.vue

@@ -1,30 +1,11 @@
 <template>
-  <div class="bg">
+  <main>
     <div class="top-bar">
       <NuxtLink to="/" class="back">
         <img src="../public/back_arrow.svg" />
         <p>Back</p>
       </NuxtLink>
     </div>
-    <div class="bottom-bar">
-      <div class="left">
-        <img alt="" class="logo" src="../public/logo.png" width="18px" />
-        <p>Qopy</p>
-      </div>
-      <div class="right">
-        <div
-          @click="saveKeybind"
-          class="actions"
-          :class="{ disabled: keybind.length === 0 }">
-          <p>Save</p>
-          <div>
-            <IconsCmd v-if="os === 'macos'" />
-            <IconsCtrl v-if="os === 'linux' || os === 'windows'" />
-            <IconsEnter />
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="settings-container">
       <div class="settings">
         <div class="names">
@@ -82,17 +63,25 @@
         </div>
       </div>
     </div>
-  </div>
+    <BottomBar
+      :primary-action="{
+        text: 'Save',
+        icon: IconsEnter,
+        onClick: saveKeybind,
+        showModifier: true,
+      }" />
+  </main>
 </template>
 
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
 import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { platform } from "@tauri-apps/plugin-os";
 import { useRouter } from "vue-router";
 import { KeyValues, KeyLabels } from "../types/keys";
 import { disable, enable } from "@tauri-apps/plugin-autostart";
 import { Key, keyboard } from "wrdu-keyboard";
+import BottomBar from "../components/BottomBar.vue";
+import IconsEnter from "~/components/Icons/Enter.vue";
 
 const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);