From a12720d5a889d155a85e93d64e4ca63f2843f76d Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 30 May 2023 15:47:32 +0300
Subject: [PATCH] [ENG-666] Index rules UI tweak (#885)

* props & ui tweak

* margin tweak
---
 .../library/locations/AddLocationDialog.tsx         |  2 ++
 .../library/locations/IndexerRuleEditor/index.tsx   | 13 +++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
index 493037862..949ba22e6 100644
--- a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
+++ b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
@@ -229,6 +229,8 @@ export const AddLocationDialog = ({
 						field={field}
 						label="File indexing rules:"
 						className="relative flex flex-col"
+						rulesContainerClass="grid grid-cols-2 gap-1"
+						ruleButtonClass="w-full"
 					/>
 				)}
 				control={form.control}
diff --git a/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx b/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
index 0505740b1..7c6ae2362 100644
--- a/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
+++ b/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
@@ -20,11 +20,15 @@ export interface IndexerRuleEditorProps<T extends IndexerRuleIdFieldType> {
 	infoText?: string;
 	editable?: boolean;
 	className?: string;
+	ruleButtonClass?: string;
+	rulesContainerClass?: string;
 }
 
 export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 	infoText,
 	editable,
+	ruleButtonClass,
+	rulesContainerClass,
 	...props
 }: IndexerRuleEditorProps<T>) {
 	const listIndexerRules = useLibraryQuery(['locations.indexer_rules.list']);
@@ -64,8 +68,8 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 	return (
 		<div className={props.className} onClick={() => setSelectedRule(undefined)}>
 			<div className={'flex items-start justify-between'}>
-				<div className="grow">
-					<Label className="mb-2">{props.label || 'Indexer rules'}</Label>
+				<div className="mb-1 grow">
+					<Label>{props.label || 'Indexer rules'}</Label>
 					{infoText && <InfoText className="mb-4">{infoText}</InfoText>}
 				</div>
 				{editable && (
@@ -95,7 +99,7 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 				)}
 			</div>
 
-			<div className="flex flex-wrap justify-center gap-1">
+			<div className={clsx(rulesContainerClass, 'flex flex-wrap gap-1')}>
 				{indexRules ? (
 					indexRules.map((rule) => (
 						<RuleButton
@@ -116,7 +120,8 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 							className={clsx(
 								!(editable && rule.default) && 'cursor-pointer',
 								editable || 'select-none',
-								selectedRule?.id === rule.id ? 'bg-app-darkBox' : 'bg-app-input'
+								selectedRule?.id === rule.id ? 'bg-app-darkBox' : 'bg-app-input',
+								ruleButtonClass
 							)}
 						/>
 					))