fix: standardise search box display

fix: fix useMemo dependencies
dhis2 · Dec 6, 2023 · ce46de4 · ce46de4
1 parent 578f9b3
commit ce46de4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js b/src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { useMemo } from 'react';
 import { compose } from 'redux';
-import { spacers } from '@dhis2/ui';
+import { colors, spacers } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { WorkingListsType } from './WorkingListsType';
 import type { Props, PlainProps } from './mainPage.types';
@@ -21,13 +21,20 @@ const getStyles = () => ({
         display: 'flex',
         flexWrap: 'wrap',
         gap: spacers.dp16,
+        padding: spacers.dp16,
     },
     half: {
         flex: 1,
     },
     quarter: {
         flex: 0.4,
-        padding: `${spacers.dp12} ${spacers.dp24} ${spacers.dp24} 0`,
+    },
+    searchBoxWrapper: {
+        padding: spacers.dp16,
+        background: colors.white,
+        border: '1px solid',
+        borderColor: colors.grey400,
+        borderRadius: 3,
     },
 });
 
@@ -61,7 +68,7 @@ const MainPageBody = compose(
             </>
         ) : (
             <div className={classes.container}>
-                <div className={classes.half}>
+                <div className={`${classes.half} ${classes.searchBoxWrapper}`}>
                     <SearchBox programId={programId} />
                 </div>
                 <div className={classes.quarter}>

diff --git a/src/core_modules/capture-core/components/Pages/Search/SearchPage.component.js b/src/core_modules/capture-core/components/Pages/Search/SearchPage.component.js
@@ -22,15 +22,17 @@ const getStyles = () => ({
     },
     half: {
         flex: 1,
+    },
+    quarter: {
+        flex: 0.4,
+    },
+    searchBoxWrapper: {
         padding: spacers.dp16,
         background: colors.white,
         border: '1px solid',
         borderColor: colors.grey400,
         borderRadius: 3,
     },
-    quarter: {
-        flex: 0.4,
-    },
 });
 
 const SearchPagePlain = ({ programId, orgUnitId, onNavigateToMainPage, classes }: PlainProps) => (
@@ -41,7 +43,7 @@ const SearchPagePlain = ({ programId, orgUnitId, onNavigateToMainPage, classes }
         </Button>
 
         <div className={classes.container}>
-            <div className={classes.half}>
+            <div className={`${classes.half} ${classes.searchBoxWrapper}`}>
                 <SearchBox programId={programId} />
             </div>
             <div className={classes.quarter}>

diff --git a/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js b/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js
@@ -337,7 +337,7 @@ const SearchFormIndex = ({
     },
     [
         classes.searchButtonContainer,
-        classes.searchDomainSelectorSection,
+        classes.searchDomainsContainer,
         classes.searchRowSelectElement,
         classes.searchRow,
         classes.textInfo,