New instance settings in app (#3033)

* Tabbed interface component

* Start instance settings

* New instance settings, mostly done minus modpacks

* Extract i18n

* Some more fixes with settings, still no modpacks yet

* Lint

* Modpack installation settings

* Change no friends language

* Remove options legacy button

* fix lint, small bug

* fix invalid cond on friends ui

* update resource management page

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSelect, Toggle, ThemeSelector } from '@modrinth/ui'
+import { Toggle, ThemeSelector, TeleportDropdownMenu } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
 import { watch, ref } from 'vue'
@@ -19,7 +19,7 @@ watch(
 )
 </script>
 <template>
-  <h2 class="m-0 text-2xl">Color theme</h2>
+  <h2 class="m-0 text-lg font-extrabold text-contrast">Color theme</h2>
   <p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>
 
   <ThemeSelector
@@ -31,7 +31,7 @@ watch(
 
   <div class="mt-4 flex items-center justify-between">
     <div>
-      <h2 class="m-0 text-2xl">Advanced rendering</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Advanced rendering</h2>
       <p class="m-0 mt-1">
         Enables advanced rendering such as blur effects that may cause performance issues without
         hardware-accelerated rendering.
@@ -53,7 +53,7 @@ watch(
 
   <div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
     <div>
-      <h2 class="m-0 mt-4 text-2xl">Native Decorations</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
       <p class="m-0 mt-1">Use system window frame (app restart required).</p>
     </div>
     <Toggle
@@ -70,7 +70,7 @@ watch(
 
   <div class="mt-4 flex items-center justify-between">
     <div>
-      <h2 class="m-0 mt-4 text-2xl">Minimize launcher</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
       <p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
     </div>
     <Toggle
@@ -87,16 +87,14 @@ watch(
 
   <div class="mt-4 flex items-center justify-between">
     <div>
-      <h2 class="m-0 mt-4 text-2xl">Default landing page</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
       <p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
     </div>
-    <DropdownSelect
+    <TeleportDropdownMenu
       id="opening-page"
       v-model="settings.default_page"
       name="Opening page dropdown"
       :options="['Home', 'Library']"
-      class="opening-page"
-      @change="updateDefaultPage"
     />
   </div>
 </template>