From bd7e2c1796e5b6ebc5e185ff4e892489e152305b Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 9 Oct 2023 12:49:47 +0300
Subject: [PATCH] [ENG-1202] Location dialog visual improvements (#1445)

Visual improvements to location dialog
---
 .../settings/library/locations/AddLocationDialog.tsx       | 5 +++--
 interface/components/Accordion.tsx                         | 2 +-
 packages/ui/src/Dialog.tsx                                 | 7 ++++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
index cdf32c09d..060241a7a 100644
--- a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
+++ b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
@@ -197,6 +197,7 @@ export const AddLocationDialog = ({
 			dialog={useDialog(dialogProps)}
 			onSubmit={onSubmit}
 			ctaLabel="Add"
+			formClassName="min-w-[375px]"
 			errorMessageException="Location is already linked"
 			description={
 				platform.platform === 'web'
@@ -205,7 +206,7 @@ export const AddLocationDialog = ({
 					: ''
 			}
 		>
-			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mb-4 mt-2" />
+			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mt-2 mb-4" />
 
 			<LocationPathInputField {...form.register('path')} />
 
@@ -217,7 +218,7 @@ export const AddLocationDialog = ({
 					render={({ field }) => (
 						<IndexerRuleEditor
 							field={field}
-							label="File indexing rules:"
+							label="File indexing rules"
 							className="relative flex flex-col"
 							rulesContainerClass="grid grid-cols-2 gap-2"
 							ruleButtonClass="w-full"
diff --git a/interface/components/Accordion.tsx b/interface/components/Accordion.tsx
index b3c2e759e..16ff4aa09 100644
--- a/interface/components/Accordion.tsx
+++ b/interface/components/Accordion.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 const styles = {
 	default: {
-		container: 'flex flex-col gap-1 rounded-b-none px-3 py-2',
+		container: 'flex flex-col gap-1 rounded-b-none px-3 py-2 bg-app-box',
 		title: 'flex flex-row items-center justify-between px-3 py-2',
 		box: 'rounded-md border border-app-line bg-app-darkBox'
 	},
diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
index ffa582c3d..46652f2d2 100644
--- a/packages/ui/src/Dialog.tsx
+++ b/packages/ui/src/Dialog.tsx
@@ -127,6 +127,7 @@ export interface DialogProps<S extends FieldValues>
 	buttonsSideContent?: ReactNode;
 	invertButtonFocus?: boolean; //this reverses the focus order of submit/cancel buttons
 	errorMessageException?: string; //this is to bypass a specific form error message if it starts with a specific string
+	formClassName?: string;
 }
 
 export function Dialog<S extends FieldValues>({
@@ -223,7 +224,11 @@ export function Dialog<S extends FieldValues>({
 									dialog.onSubmit?.();
 									setOpen(false);
 								}}
-								className="!pointer-events-auto my-8 min-w-[300px] max-w-[400px] rounded-md border border-app-line bg-app-box text-ink shadow-app-shade"
+								className={clsx(
+									'!pointer-events-auto my-8 min-w-[300px] max-w-[400px] rounded-md',
+									'border border-app-line bg-app-box text-ink shadow-app-shade',
+									props.formClassName
+								)}
 							>
 								<div className="p-5">
 									<RDialog.Title className="mb-2 font-bold">