From cee435938e71ddaa45d97793e68b050899b77453 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 5 Apr 2023 19:55:57 -0700
Subject: [PATCH] [Fix] Add location button went ugly

---
 interface/app/$libraryId/Layout/Sidebar/index.tsx         | 8 +-------
 .../settings/library/locations/AddLocationButton.tsx      | 2 ++
 packages/ui/src/Button.tsx                                | 3 +++
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/interface/app/$libraryId/Layout/Sidebar/index.tsx b/interface/app/$libraryId/Layout/Sidebar/index.tsx
index ac2968cea..1001b6219 100644
--- a/interface/app/$libraryId/Layout/Sidebar/index.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/index.tsx
@@ -119,13 +119,7 @@ const LibrarySection = () => {
 						</SidebarLink>
 					);
 				})}
-				{(locations.data?.length || 0) < 4 && (
-					<AddLocationButton
-						className="cursor-normal mt-1 w-full
-						rounded border border-dashed border-sidebar-line px-2 py-1 text-center text-xs
-						font-medium text-ink-faint transition hover:border-sidebar-selected"
-					/>
-				)}
+				{(locations.data?.length || 0) < 4 && <AddLocationButton />}
 			</Section>
 			{!!tags.data?.length && (
 				<Section
diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx
index b8b1b2f89..6bb276f25 100644
--- a/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx
+++ b/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx
@@ -10,6 +10,8 @@ export const AddLocationButton = (props: ButtonProps) => {
 		<>
 			<Button
 				{...props}
+				variant="dotted"
+				className="cursor-normal mt-1 w-full"
 				onClick={() =>
 					openDirectoryPickerDialog(platform)
 						.then((path) => {
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index a34317807..e87344403 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -46,6 +46,9 @@ const styles = cva(
 				outline: [
 					'border-sidebar-line/60 hover:border-sidebar-line active:border-sidebar-line active:border-sidebar-line/30'
 				],
+				dotted: [
+					`rounded border border-dashed border-sidebar-line/70 text-center text-xs font-medium text-ink-faint transition hover:border-sidebar-line hover:bg-sidebar-selected/5`
+				],
 				gray: [
 					'bg-app-button active:bg-app-selected hover:bg-app-hover',
 					'border-app-line hover:border-app-line active:border-app-active'