fix: 🐛 fix (header e footer) correcao no header e footer para nao ocultar infos do celular

foi corrigido o header e o footer para que nao sejam da mesma cor que os botoes de navegacao do celular e as informacoes do cabeçalho do celular

fase:prod | origin:melhoria

src/App.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { useQuasar } from "quasar";
-import { StatusBar } from "@capacitor/status-bar";
+import { StatusBar, Style } from "@capacitor/status-bar";
 import { Capacitor } from "@capacitor/core";
 import { watch, onBeforeMount } from "vue";
 import { useI18n } from "vue-i18n";
@@ -40,7 +40,7 @@ onBeforeMount(async () => {
   if (isNative) await StatusBar.show();
   const { value: themePref } = await Preferences.get({ key: "theme" });
   const theme = themePref || systemTheme;
-  if (isNative) await StatusBar.setStyle({ style: theme.toUpperCase() });
+  if (isNative) await StatusBar.setStyle({ style: Style.Dark });
   const { value: localePref } = await Preferences.get({ key: "locale" });
   const userLocale = localePref || window.navigator.language;
   console.log(theme, userLocale);

src/css/app.scss

@@ -1,6 +1,35 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 
+:root {
+  --system-bar-bg: #757575;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: var(--system-bar-bg);
+  pointer-events: none;
+  z-index: 10000;
+}
+
+body::before {
+  top: 0;
+  height: env(safe-area-inset-top, 0px);
+}
+
+body::after {
+  bottom: 0;
+  height: env(safe-area-inset-bottom, 0px);
+}
+
+.system-bar-spacer {
+  background: var(--system-bar-bg) !important;
+}
+
 .q-page {
   font-family: "Inter", sans-serif;
 }

src/layouts/MainLayout.vue

@@ -5,7 +5,7 @@
   >
     <q-header
       v-if="$q.screen.lt.sm"
-      class="bg-surface"
+      class="system-bar-spacer"
       :style="{ height: `env(safe-area-inset-top)` }"
     >
     </q-header>
@@ -68,6 +68,8 @@
           </span>
         </router-link>
       </nav>
+
+      <div class="system-bar-spacer provider-bottom-nav-safe-area"></div>
     </q-footer>
   </q-layout>
 </template>
@@ -197,8 +199,11 @@ watch(
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   align-items: end;
-  height: calc(60px + env(safe-area-inset-bottom));
-  padding: 0 0 env(safe-area-inset-bottom);
+  height: 60px;
+}
+
+.provider-bottom-nav-safe-area {
+  height: env(safe-area-inset-bottom, 0px);
 }
 
 .provider-bottom-nav-item {