[ref] input to components

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { language } from "src/lang";
   import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
   import { alertConfirm, alertError } from "src/ts/alert";
     import { changeUserPersona, getCharImage, saveUserPersona, selectUserImg } from "src/ts/characters";
     import { DataBase, setDatabase } from "src/ts/storage/database";
@@ -71,7 +72,7 @@
     </div>
     <div class="flex flex-grow flex-col p-2 ml-4">
         <span class="text-sm text-gray-500">{language.name}</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-lg" placeholder="User" bind:value={$DataBase.username}>
+        <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
         <span class="text-sm text-gray-500">{language.description}</span>
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-32 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`}></textarea>
         <div>