From 9b03ceaf9dae3f797b651ebb1e8c8748b8e3373f Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:19:49 +0300
Subject: [PATCH] Impove export dialog option button widths, some hovers

---
 apps/desktop/src/components/SignInButton.tsx    |  2 +-
 apps/desktop/src/routes/editor/ExportDialog.tsx | 16 ++++++++--------
 packages/ui-solid/src/Button.tsx                |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/components/SignInButton.tsx b/apps/desktop/src/components/SignInButton.tsx
index 49548a45ea..48aa0e1341 100644
--- a/apps/desktop/src/components/SignInButton.tsx
+++ b/apps/desktop/src/components/SignInButton.tsx
@@ -13,7 +13,7 @@ export function SignInButton(
 			size="md"
 			class="flex flex-grow justify-center items-center"
 			{...props}
-			variant={signIn.isPending ? "secondary" : props.variant}
+			variant={signIn.isPending ? "secondary" : "primary"}
 			onClick={() => {
 				if (signIn.isPending) {
 					signIn.variables.abort();
diff --git a/apps/desktop/src/routes/editor/ExportDialog.tsx b/apps/desktop/src/routes/editor/ExportDialog.tsx
index fae79de5cc..a94a6cb833 100644
--- a/apps/desktop/src/routes/editor/ExportDialog.tsx
+++ b/apps/desktop/src/routes/editor/ExportDialog.tsx
@@ -73,17 +73,17 @@ export const EXPORT_TO_OPTIONS = [
 	{
 		label: "File",
 		value: "file",
-		icon: <IconCapFile class="text-gray-12 size-4" />,
+		icon: <IconCapFile class="text-gray-12 size-3.5" />,
 	},
 	{
 		label: "Clipboard",
 		value: "clipboard",
-		icon: <IconCapCopy class="text-gray-12 size-4" />,
+		icon: <IconCapCopy class="text-gray-12 size-3.5" />,
 	},
 	{
 		label: "Shareable link",
 		value: "link",
-		icon: <IconCapLink class="text-gray-12 size-4" />,
+		icon: <IconCapLink class="text-gray-12 size-3.5" />,
 	},
 ] as const;
 
@@ -169,9 +169,9 @@ export function ExportDialog() {
 	}));
 
 	const exportButtonIcon: Record<"file" | "clipboard" | "link", JSX.Element> = {
-		file: <IconCapFile class="text-gray-1 size-4" />,
-		clipboard: <IconCapCopy class="text-gray-1 size-4" />,
-		link: <IconCapLink class="text-gray-1 size-4" />,
+		file: <IconCapFile class="text-gray-1 size-3.5" />,
+		clipboard: <IconCapCopy class="text-gray-1 size-3.5" />,
+		link: <IconCapLink class="text-gray-1 size-3.5" />,
 	};
 
 	const copy = createMutation(() => ({
@@ -372,7 +372,7 @@ export function ExportDialog() {
 		<>
 			<Show when={exportState.type === "idle"}>
 				<DialogContent
-					title="Export"
+					title="Export Cap"
 					confirm={
 						<>
 							{settings.exportTo === "link" && !auth.data ? (
@@ -480,7 +480,7 @@ export function ExportDialog() {
 											<Button
 												onClick={() => setSettings("exportTo", option.value)}
 												class={cx(
-													"flex gap-2 items-center",
+													"flex flex-1 gap-2 items-center text-nowrap",
 													settings.exportTo === option.value && selectedStyle,
 												)}
 												variant="secondary"
diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx
index 56d8ba3743..1111e50dac 100644
--- a/packages/ui-solid/src/Button.tsx
+++ b/packages/ui-solid/src/Button.tsx
@@ -12,13 +12,13 @@ const styles = cva(
 			variant: {
 				blue: "bg-blue-9 text-white hover:bg-blue-10 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:outline-blue-10",
 				primary:
-					"bg-gray-12 text-gray-1 hover:bg-gray-11 enabled:hover:bg-blue-8 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:bg-gray-4 disabled:dark:text-gray-9",
+					"bg-gray-12 text-gray-1 hover:bg-gray-11 enabled:hover:bg-gray-11 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:bg-gray-4 disabled:dark:text-gray-9",
 				secondary:
 					"bg-gray-4 enabled:hover:bg-gray-5 text-gray-500 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:outline-blue-10",
 				destructive:
 					"bg-red-300 text-gray-50 dark:text-gray-12 disabled:bg-gray-6 disabled:text-gray-9 enabled:hover:bg-red-400 disabled:bg-red-200 outline-red-300",
 				white:
-					"bg-gray-1 dark:bg-gray-12 enabled:hover:bg-gray-5 text-gray-500 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 dark:text-gray-1 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300",
+					"bg-gray-12 hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 dark:text-gray-1 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300",
 				lightdark:
 					"bg-gray-12 hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 disabled:bg-gray-6 disabled:text-gray-9",
 			},