Use omorphia components for settings pages

pages/settings/account.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_confirm"
       title="Are you sure you want to delete your account?"
       description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.modrinth.com)."
@@ -410,17 +410,17 @@ import {
   RightArrowIcon,
   CheckIcon,
   ExternalIcon,
+  SSOGitHubIcon,
+  SSOMicrosoftIcon,
+  SSOGoogleIcon,
+  SSOSteamIcon,
+  SSODiscordIcon,
+  KeyIcon,
+  SSOGitLabIcon,
+  ConfirmModal,
+  Modal,
 } from 'omorphia'
 import QrcodeVue from 'qrcode.vue'
-import GitHubIcon from 'assets/icons/auth/sso-github.svg'
-import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
-import GoogleIcon from 'assets/icons/auth/sso-google.svg'
-import SteamIcon from 'assets/icons/auth/sso-steam.svg'
-import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
-import KeyIcon from 'assets/icons/auth/key.svg'
-import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
-import ModalConfirm from '~/components/ui/ModalConfirm.vue'
-import Modal from '~/components/ui/Modal.vue'
 
 useHead({
   title: 'Account settings - Modrinth',
@@ -574,32 +574,32 @@ const authProviders = [
   {
     id: 'github',
     display: 'GitHub',
-    icon: GitHubIcon,
+    icon: SSOGitHubIcon,
   },
   {
     id: 'gitlab',
     display: 'GitLab',
-    icon: GitLabIcon,
+    icon: SSOGitLabIcon,
   },
   {
     id: 'steam',
     display: 'Steam',
-    icon: SteamIcon,
+    icon: SSOSteamIcon,
   },
   {
     id: 'discord',
     display: 'Discord',
-    icon: DiscordIcon,
+    icon: SSODiscordIcon,
   },
   {
     id: 'microsoft',
     display: 'Microsoft',
-    icon: MicrosoftIcon,
+    icon: SSOMicrosoftIcon,
   },
   {
     id: 'google',
     display: 'Google',
-    icon: GoogleIcon,
+    icon: SSOGoogleIcon,
   },
 ]
 

pages/settings/applications.vue

@@ -228,8 +228,8 @@ import {
   SaveIcon,
   CopyCode,
   ConfirmModal,
+  Modal,
 } from 'omorphia'
-import Modal from '~/components/ui/Modal.vue'
 
 import {
   scopeList,

pages/settings/language.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
+import { RadioButtonIcon, RadioButtonChecked, IssuesIcon } from 'omorphia'
 import Fuse from 'fuse.js/dist/fuse.basic'
-import RadioButtonIcon from '~/assets/images/utils/radio-button.svg'
-import RadioButtonCheckedIcon from '~/assets/images/utils/radio-button-checked.svg'
-import WarningIcon from '~/assets/images/utils/issues.svg'
 import { isModifierKeyDown } from '~/helpers/events.ts'
 
 const vintl = useVIntl()
@@ -360,7 +358,7 @@ function getItemLabel(locale: Locale) {
               @click="(e) => onItemClick(e, locale)"
               @keydown="(e) => onItemKeydown(e, locale)"
             >
-              <RadioButtonCheckedIcon v-if="$activeLocale === locale.tag" class="radio" />
+              <RadioButtonChecked v-if="$activeLocale === locale.tag" class="radio" />
               <RadioButtonIcon v-else class="radio" />
 
               <div class="language-names">
@@ -379,7 +377,7 @@ function getItemLabel(locale: Locale) {
               :id="`language__${locale.tag}__fail`"
               class="language-load-error"
             >
-              <WarningIcon /> {{ formatMessage(messages.loadFailed) }}
+              <IssuesIcon /> {{ formatMessage(messages.loadFailed) }}
             </div>
           </template>
         </template>

pages/settings/pats.vue

@@ -202,7 +202,17 @@
   </div>
 </template>
 <script setup>
-import { PlusIcon, XIcon, Checkbox, TrashIcon, EditIcon, SaveIcon, ConfirmModal } from 'omorphia'
+import {
+  PlusIcon,
+  XIcon,
+  Checkbox,
+  TrashIcon,
+  EditIcon,
+  SaveIcon,
+  ConfirmModal,
+  CopyCode,
+  Modal,
+} from 'omorphia'
 
 import {
   hasScope,
@@ -212,9 +222,6 @@ import {
   getScopeValue,
 } from '~/composables/auth/scopes.ts'
 
-import CopyCode from '~/components/ui/CopyCode.vue'
-import Modal from '~/components/ui/Modal.vue'
-
 const { formatMessage } = useVIntl()
 
 const formatRelativeTime = useRelativeTime()