new onboarding process

src/shared/avatarUploader.tsx

@@ -1,5 +1,6 @@
 import { createBlobFromFile } from "@utils/createBlobFromFile";
 
+import { LoaderIcon } from "./icons";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
 import { useState } from "react";
@@ -54,30 +55,10 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
 		<button
 			onClick={() => openFileDialog()}
 			type="button"
-			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-zinc-100 ring-1 ring-zinc-800 hover:bg-zinc-700"
+			className="inline-flex h-7 items-center justify-center rounded bg-zinc-900 px-3 text-sm font-medium text-zinc-200 hover:bg-zinc-800"
 		>
 			{loading ? (
-				<svg
-					className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-				>
-					<title id="loading">Loading</title>
-					<circle
-						className="opacity-25"
-						cx="12"
-						cy="12"
-						r="10"
-						stroke="currentColor"
-						strokeWidth="4"
-					/>
-					<path
-						className="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-					/>
-				</svg>
+				<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
 			) : (
 				<span className="leading-none">Upload</span>
 			)}