[Fix] Add location button went ugly

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

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) => {

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'