modernize iconified-input

theseus_gui/src/assets/stylesheets/components.scss

@@ -0,0 +1,28 @@
+// Quick snippets stolen from knossos project to make omorphia components fit
+
+.iconified-input {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+
+  input {
+    padding-left: 2.25rem;
+    width: 100%;
+  }
+
+  &:focus-within svg {
+    color: var(--color-button-text-active);
+    opacity: 1;
+  }
+
+  svg {
+    position: absolute;
+    left: 0.75rem;
+    height: 1.25rem;
+    width: 1.25rem;
+    z-index: 1;
+
+    color: var(--color-button-text);
+    opacity: 0.6;
+  }
+}

theseus_gui/src/components/GridDisplay.vue

@@ -246,7 +246,7 @@ const filteredResults = computed(() => {
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>

theseus_gui/src/components/ui/AccountsCard.vue

@@ -83,6 +83,7 @@
             v-tooltip="'Open link'"
             icon-only
             color="raised"
+            class="r-btn"
             @click="() => clipboardWrite(loginUrl)"
           >
             <GlobeIcon />

theseus_gui/src/components/ui/ExportModal.vue

@@ -112,7 +112,7 @@ const exportPack = async () => {
         <div class="iconified-input">
           <PackageIcon />
           <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-          <Button @click="nameInput = ''">
+          <Button class="r-btn" @click="nameInput = ''">
             <XIcon />
           </Button>
         </div>
@@ -122,7 +122,7 @@ const exportPack = async () => {
         <div class="iconified-input">
           <VersionIcon />
           <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-          <Button @click="versionInput = ''">
+          <Button class="r-btn" @click="versionInput = ''">
             <XIcon />
           </Button>
         </div>

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -110,7 +110,7 @@
               placeholder="Path to launcher"
               @change="setPath"
             />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
               <XIcon />
             </Button>
           </div>

theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue

@@ -23,7 +23,7 @@ defineProps({
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>

theseus_gui/src/components/ui/tutorial/FakeSearch.vue

@@ -189,7 +189,7 @@ defineProps({
             type="text"
             :placeholder="`Search ${projectType}s...`"
           />
-          <Button @click="() => (query = '')">
+          <Button class="r-btn" @click="() => (query = '')">
             <XIcon />
           </Button>
         </div>

theseus_gui/src/components/ui/tutorial/ImportingCard.vue

@@ -132,7 +132,7 @@ const next = async () => {
             placeholder="Path to launcher"
             @change="setPath"
           />
-          <Button @click="() => (selectedLauncherPath = '')">
+          <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
             <XIcon />
           </Button>
         </div>

theseus_gui/src/components/ui/tutorial/LoginCard.vue

@@ -119,7 +119,7 @@ const clipboardWrite = async (a) => {
         <div class="iconified-input">
           <LogInIcon />
           <input type="text" :value="loginUrl" readonly />
-          <Button v-tooltip="'Open link'" icon-only color="raised" @click="openUrl">
+          <Button v-tooltip="'Open link'" icon-only color="raised" class="r-btn" @click="openUrl">
             <GlobeIcon />
           </Button>
         </div>

theseus_gui/src/main.js

@@ -2,8 +2,10 @@ import { createApp } from 'vue'
 import router from '@/routes'
 import App from '@/App.vue'
 import { createPinia } from 'pinia'
+import { createPlugin as createVintl } from '@vintl/vintl/plugin'
 import 'omorphia/dist/style.css'
 import '@/assets/stylesheets/global.scss'
+import '@/assets/stylesheets/components.scss'
 import 'floating-vue/dist/style.css'
 import FloatingVue from 'floating-vue'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -14,9 +16,25 @@ import { isDev } from './helpers/utils.js'
 
 const pinia = createPinia()
 
+const vintl = createVintl({
+  controllerOpts: {
+    defaultLocale: 'en-US',
+    locale: 'en-US',
+    locales: [
+      {
+        tag: 'en-US',
+        meta: {
+          displayName: 'American English',
+        },
+      },
+    ],
+  },
+})
+
 let app = createApp(App)
 app.use(router)
 app.use(pinia)
+app.use(vintl)
 app.use(FloatingVue)
 app.mixin(loadCssMixin)
 
@@ -54,7 +72,7 @@ initialize_state()
       .finally(() => {
         mountedApp.initialize()
         get_opening_command().then((command) => {
-          console.log(JSON.stringify(command)) // change me to use whatever FE command handler is made
+          console.log('Opening Command', JSON.stringify(command)) // change me to use whatever FE command handler is made
         })
       })
   })

theseus_gui/src/pages/Browse.vue

@@ -705,7 +705,7 @@ onUnmounted(() => unlistenOffline())
             :placeholder="`Search ${projectType}s...`"
             @input="onSearchChange(1)"
           />
-          <Button @click="() => clearSearch()">
+          <Button class="r-btn" @click="() => clearSearch()">
             <XIcon />
           </Button>
         </div>
@@ -843,13 +843,6 @@ onUnmounted(() => unlistenOffline())
   min-height: min-content !important;
 }
 
-.iconified-input {
-  input {
-    max-width: none !important;
-    flex-basis: auto;
-  }
-}
-
 .search-panel-container {
   display: inline-flex;
   flex-direction: row;

theseus_gui/src/pages/Settings.vue

@@ -187,7 +187,7 @@ async function refreshDir() {
         <div class="iconified-input">
           <BoxIcon />
           <input id="appDir" v-model="settingsDir" type="text" class="input" />
-          <Button @click="findLauncherDir">
+          <Button class="r-btn" @click="findLauncherDir">
             <FolderSearchIcon />
           </Button>
         </div>