Styles | auto match dialog margins and vertical hierarchy

snyaggarwal · snyaggarwal · commit e0ed0a584916 · 2026-06-25T19:47:39.000+05:30
diff --git a/src/components/common/TagCountLabel.jsx b/src/components/common/TagCountLabel.jsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { isNumber } from 'lodash';
 import { PRIMARY_COLORS } from '../../common/colors'
 
-const TabCountLabel = ({label, count}) => {
+const TabCountLabel = ({label, count, normal}) => {
   if(!isNumber(count))
     return <span>{label}</span>;
 
   return (
     <span style={{display: 'flex'}}>
-      <span style={{marginRight: '8px', display: 'flex', alignItems: 'center'}}><b>{label}</b></span>
+      <span style={{marginRight: '8px', display: 'flex', alignItems: 'center', fontWeight: normal ? 'normal' : 'bold'}}>
+        {label}
+      </span>
       <span className="tag-count-label--count" style={{backgroundColor: PRIMARY_COLORS['90'], fontSize: '14px'}}>
         {count.toLocaleString()}
       </span>
diff --git a/src/components/map-projects/AutoMatchDialog.jsx b/src/components/map-projects/AutoMatchDialog.jsx
@@ -20,6 +20,7 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import map from 'lodash/map'
 
 import CloseIconButton from '../common/CloseIconButton'
+import TagCountLabel from '../common/TagCountLabel'
 import RepoChip from '../repos/RepoVersionChip'
 import AIAssistantButton from './AIAssistantButton'
 import AIAssistantSelectorPanel from './AIAssistantSelectorPanel'
@@ -81,21 +82,24 @@ const AutoMatchDialog = ({
     {
       value: 'selected',
       disabled: !hasSelectedRows,
-      label: `${t('map_project.selected_rows')} (${selectedRowCount.toLocaleString()})`,
+      label: t('map_project.selected_rows'),
+      count: hasSelectedRows ? selectedRowCount : false,
       helperText: hasSelectedRows ?
         t('map_project.auto_match_selected_rows_note', {count: selectedRowCount.toLocaleString()}) :
         t('map_project.auto_match_selected_rows_note_no_count')
     },
     {
       value: 'unmapped',
       disabled: !hasUnmappedRows,
-      label: `${t('map_project.unmapped_only')} (${rowStatuses.unmapped.length.toLocaleString()})`,
+      count: rowStatuses.unmapped.length,
+      label: t('map_project.unmapped_only'),
       helperText: t('map_project.auto_match_unmapped_only_note')
     },
     {
       value: 'all',
       disabled: false,
-      label: `${t('map_project.unmapped_and_proposed')} (${allRowsCount.toLocaleString()})`,
+      count: allRowsCount,
+      label: t('map_project.unmapped_and_proposed'),
       helperText: t('map_project.auto_match_note', {
         approvedCount: rowStatuses.reviewed.length.toLocaleString(),
         proposedCount: rowStatuses.readyForReview.length.toLocaleString()
@@ -104,7 +108,9 @@ const AutoMatchDialog = ({
     {
       value: 'allIncludingApproved',
       disabled: !hasApprovedRows,
-      label: `${t('map_project.all_including_approved')} (${totalRows.toLocaleString()})`,
+      count: totalRows,
+      label: t('map_project.all_including_approved'),
+      warning: true,
       helperText: t('map_project.auto_match_all_including_approved_note', {
         approvedCount: rowStatuses.reviewed.length.toLocaleString(),
         proposedCount: rowStatuses.readyForReview.length.toLocaleString()
@@ -144,36 +150,35 @@ const AutoMatchDialog = ({
               <RepoChip repo={repoVersion} hideType sx={{marginLeft: '16px'}} />
           }
         </div>
-        <FormControl sx={{marginTop: '16px'}}>
-          <FormLabel id="automatch-rows">{`${t('map_project.rows_to_match')}: ${rowsToMatchCount.toLocaleString()} ${t('map_project.out_of')} ${totalRows.toLocaleString()}` }</FormLabel>
+        <FormControl sx={{marginTop: '10px'}}>
+          <FormLabel id="automatch-rows" sx={{color: 'rgba(0, 0, 0, 0.87)'}}>{`${t('map_project.rows_to_match')}: ${rowsToMatchCount.toLocaleString()} ${t('map_project.out_of')} ${totalRows.toLocaleString()}` }</FormLabel>
           <RadioGroup
+            sx={{marginLeft: '12px'}}
             aria-labelledby="automatch-rows"
             name="automatch-rows"
             value={autoMatchScope}
             onChange={event => setAutoMatchScope(event.target.value)}
           >
             {
               scopeOptions.map(option => (
-                <div key={option.value} style={{marginBottom: '8px'}}>
+                <div key={option.value}>
                   <FormControlLabel
                     value={option.value}
                     disabled={option.disabled}
-                    control={<Radio />}
-                    label={option.label}
+                    control={<Radio size='small' />}
+                    label={<TagCountLabel label={option.label} count={option.count} normal />}
                     sx={{marginRight: 0}}
                   />
-                  {
-                    autoMatchScope === option.value &&
-                      <FormHelperText sx={{margin: '0 0 0 32px'}}>
-                        {option.helperText}
-                      </FormHelperText>
-                  }
+                  <FormHelperText sx={{margin: '-8px 0 0 28px', color: option.warning && autoMatchScope === option.value ? 'warning.main' : undefined}}>
+                      {option.helperText}
+                    </FormHelperText>
                   {
                     autoMatchScope === option.value && option.value === 'allIncludingApproved' &&
                       <FormControlLabel
-                        sx={{marginLeft: '24px', marginTop: '4px'}}
+                        sx={{marginLeft: '17px', marginTop: '-4px', marginRight: 0}}
                         control={
                           <Checkbox
+                            size='small'
                             checked={confirmAllIncludingApproved}
                             onChange={event => setConfirmAllIncludingApproved(event.target.checked)}
                           />
@@ -189,12 +194,12 @@ const AutoMatchDialog = ({
           </RadioGroup>
         </FormControl>
 
-        <FormControl sx={{marginTop: '16px'}}>
+        <FormControl sx={{marginTop: '8px'}}>
           <FormControlLabel control={<Checkbox checked={algos} onChange={() => setAlgos(!algos)} />} label={t('map_project.retrieve_candidates')} />
-          <FormLabel id="algorithms">
+          <FormLabel id="algorithms" sx={{marginTop: '-4px', marginLeft: '12px'}}>
             {t('map_project.retrieve_candidates_helper_text')}
           </FormLabel>
-          <div className='col-xs-12 padding-0'>
+          <div className='col-xs-12 padding-0' style={{marginLeft: '8px'}}>
             {
               algosSelected.map(algo => {
                 return (
@@ -209,7 +214,7 @@ const AutoMatchDialog = ({
           inAIAssistantGroup &&
             <>
               <FormControlLabel
-                sx={{marginTop: '16px', width: '100%'}}
+                sx={{marginTop: '8px', width: '100%'}}
                 control={
                   <Checkbox
                     checked={autoRunAIAnalysis}
@@ -233,13 +238,13 @@ const AutoMatchDialog = ({
                       models={AIModels}
                       selectedModel={AIModel}
                       onModelChange={setAIModel}
-                      sx={{marginTop: '12px'}}
+                      sx={{marginTop: '12px', marginLeft: '12px'}}
                     /> :
                     <AIAssistantButton
                       models={AIModels}
                       selected={AIModel}
                       onClick={() => {}}
-                      sx={{marginTop: '12px'}}
+                      sx={{marginTop: '12px', marginLeft: '12px'}}
                       onModelChange={setAIModel}
                       popperProps={{
                         sx: {zIndex: 1500}
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
@@ -515,10 +515,10 @@
     "loading_project": "Loading project...",
     "stopping_gracefully": "Stopping gracefully...",
     "stop_processing": "Stop Processing",
-    "auto_match_unmapped_only_note": "Note: Only unmapped rows will be matched.",
+    "auto_match_unmapped_only_note": "Note: Only unmapped rows will be matched",
     "auto_match_note": "Note: This will not affect {{approvedCount}} approved input rows but will override {{proposedCount}} proposed input rows",
     "auto_match_note_no_counts": "Note: This will not affect approved input rows but will override proposed input rows",
-    "auto_match_all_including_approved_note": "Warning: This will re-run every input row from scratch and overwrite {{approvedCount}} approved and {{proposedCount}} proposed decisions.",
+    "auto_match_all_including_approved_note": "Warning: This will re-run every input row from scratch and overwrite {{approvedCount}} approved and {{proposedCount}} proposed decisions",
     "auto_match_all_including_approved_confirm": "I understand that {{approvedCount}} approved decisions will be overwritten",
     "auto_match_selected_rows_note": "Note: This will run Auto Match for {{count}} selected input rows",
     "auto_match_selected_rows_note_no_count": "Note: Select rows in the left panel to enable this option",
