From d0b9d36894d477cdf6370a9b248403519759f453 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 10 Jan 2025 21:17:34 +0300
Subject: [PATCH] Match figma a bit more

---
 .../functional/ConversionPanel.svelte         |  2 +-
 src/lib/components/functional/Dropdown.svelte | 17 +++--
 src/routes/convert/+page.svelte               | 66 ++++++++++---------
 3 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 4f75440..823e69b 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -28,7 +28,7 @@
 	</div>
 	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">
-		<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
+		<p class="whitespace-nowrap text-xl">Set all to</p>
 		{#if files.requiredConverters.length === 1}
 			<Dropdown
 				onselect={(r) =>
diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte
index 7daabb1..515bdd4 100644
--- a/src/lib/components/functional/Dropdown.svelte
+++ b/src/lib/components/functional/Dropdown.svelte
@@ -8,14 +8,14 @@
 		options: string[];
 		selected?: string;
 		onselect?: (option: string) => void;
-		disabled?: boolean
+		disabled?: boolean;
 	};
 
 	let {
 		options,
 		selected = $bindable(options[0]),
 		onselect,
-		disabled
+		disabled,
 	}: Props = $props();
 
 	let open = $state(false);
@@ -48,16 +48,21 @@
 	});
 </script>
 
-<div class="relative w-full min-w-fit" bind:this={dropdown}>
+<div
+	class="relative w-full min-w-fit text-xl font-medium text-center"
+	bind:this={dropdown}
+>
 	<button
-		class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button {disabled ?  'opacity-50' : ''} flex items-center rounded-full p-2 focus:!outline-none"
+		class="font-display w-full justify-center overflow-hidden relative cursor-pointer px-3 py-3.5 bg-button {disabled
+			? 'opacity-50'
+			: ''} flex items-center rounded-full focus:!outline-none"
 		onclick={toggle}
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
 		{disabled}
 	>
 		<!-- <p>{selected}</p> -->
-		<div class="grid grid-cols-1 grid-rows-1 w-fit text-left flex-grow-0">
+		<div class="grid grid-cols-1 grid-rows-1 w-fit flex-grow-0">
 			{#key selected}
 				<p
 					in:fade={{
@@ -68,7 +73,7 @@
 						duration,
 						easing: quintOut,
 					}}
-					class="col-start-1 row-start-1 text-left"
+					class="col-start-1 row-start-1 text-center font-body font-medium"
 				>
 					{selected}
 				</p>
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 631085d..220b5c2 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -52,41 +52,43 @@
 				<XIcon size="24" class="text-muted" />
 			</button>
 		</div>
-		<div class="flex gap-4 w-full h-full overflow-hidden relative">
-			<div class="w-1/2 h-full overflow-hidden rounded-xl">
-				<img
-					class="object-cover w-full h-full"
-					src={file.blobUrl}
-					alt={file.name}
-				/>
+		<div class="flex flex-row justify-between">
+			<div class="flex gap-4 w-full h-[152px] overflow-hidden relative">
+				<div class="w-1/2 h-full overflow-hidden rounded-xl">
+					<img
+						class="object-cover w-full h-full"
+						src={file.blobUrl}
+						alt={file.name}
+					/>
+				</div>
 			</div>
-		</div>
-		<div
-			class="absolute top-16 right-0 mr-4 pl-2 h-[calc(100%-83px)] w-[calc(50%-32px)] pr-4 pb-5"
-		>
 			<div
-				class="w-full h-full flex flex-col gap-2 items-center justify-center"
+				class="absolute top-16 right-0 mr-4 pl-2 h-[calc(100%-83px)] w-[calc(50%-38px)] pr-4 pb-1 flex items-center justify-center aspect-square"
 			>
-				<Dropdown
-					options={file.converter?.supportedFormats || []}
-					bind:selected={file.to}
-					onselect={() => file.result && (file.result = null)}
-				/>
-				<div class="w-full flex items-center justify-around">
-					<button
-						class="btn p-0 w-14 h-14"
-						disabled={!files.ready}
-						onclick={file.convert}
-					>
-						<RotateCwIcon size="24" />
-					</button>
-					<button
-						class="btn p-0 w-14 h-14"
-						onclick={file.download}
-						disabled={!file.result}
-					>
-						<DownloadIcon size="24" />
-					</button>
+				<div
+					class="w-[122px] h-fit flex flex-col gap-2 items-center justify-center"
+				>
+					<Dropdown
+						options={file.converter?.supportedFormats || []}
+						bind:selected={file.to}
+						onselect={() => file.result && (file.result = null)}
+					/>
+					<div class="w-full flex items-center justify-between">
+						<button
+							class="btn p-0 w-14 h-14"
+							disabled={!files.ready}
+							onclick={file.convert}
+						>
+							<RotateCwIcon size="24" />
+						</button>
+						<button
+							class="btn p-0 w-14 h-14"
+							onclick={file.download}
+							disabled={!file.result}
+						>
+							<DownloadIcon size="24" />
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>