[ENG-1202] Location dialog visual improvements (#1445)

Visual improvements to location dialog

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"

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'
 	},

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">