add edit profile

src/shared/avatarUploader.tsx

@@ -1,11 +1,10 @@
-import { createBlobFromFile } from "@utils/createBlobFromFile";
-
-import { LoaderIcon } from "./icons";
+import { LoaderIcon, PlusIcon } from "@shared/icons";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
+import { createBlobFromFile } from "@utils/createBlobFromFile";
 import { useState } from "react";
 
-export function AvatarUploader({ valueState }: { valueState: any }) {
+export function AvatarUploader({ setPicture }: { setPicture: any }) {
 	const [loading, setLoading] = useState(false);
 
 	const openFileDialog = async () => {
@@ -44,23 +43,26 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
 					body: Body.bytes(buf),
 				},
 			);
-			const webpImage = `https://void.cat/d/${res.data.file.id}.webp`;
+			const image = `https://void.cat/d/${res.data.file.id}.jpg`;
 
-			valueState(webpImage);
+			// update parent state
+			setPicture(image);
+
+			// disable loader
 			setLoading(false);
 		}
 	};
 
 	return (
 		<button
-			onClick={() => openFileDialog()}
 			type="button"
-			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"
+			onClick={() => openFileDialog()}
+			className="w-full h-full inline-flex items-center justify-center bg-zinc-900/40"
 		>
 			{loading ? (
-				<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+				<LoaderIcon className="h-6 w-6 animate-spintext-zinc-100" />
 			) : (
-				<span className="leading-none">Upload</span>
+				<PlusIcon className="h-6 w-6 text-zinc-100" />
 			)}
 		</button>
 	);