chore: styles (#1259)

Author: paschalidi

src/core_modules/capture-core/components/D2Form/D2Section.component.js

@@ -7,9 +7,6 @@ import D2SectionFields from './D2SectionFields.container';
 import { Section as MetaDataSection } from '../../metaData';
 
 const getStyles = theme => ({
-    sectionFieldsInSection: {
-        margin: theme.spacing.unit,
-    },
     section: {
         backgroundColor: 'white',
         maxWidth: theme.typography.pxToRem(892),
@@ -20,7 +17,6 @@ type Props = {
     sectionMetaData: MetaDataSection,
     isHidden?: ?boolean,
     classes: {
-        sectionFieldsInSection: string,
         section: string,
     },
     formHorizontal: ?boolean,
@@ -70,19 +66,15 @@ class D2Section extends React.PureComponent<Props> {
                     elevation={2}
                     className={classes.section}
                 >
-                    <div
-                        className={classes.sectionFieldsInSection}
-                    >
-                        {/* $FlowFixMe[cannot-spread-inexact] automated comment
-                          */}
-                        <D2SectionFields
-                            ref={(instance) => {
-                                this.sectionFieldsInstance = instance;
-                            }}
-                            fieldsMetaData={sectionMetaData.elements}
-                            {...passOnProps}
-                        />
-                    </div>
+                    {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
+                    <D2SectionFields
+                        ref={(instance) => {
+                            this.sectionFieldsInstance = instance;
+                        }}
+                        fieldsMetaData={sectionMetaData.elements}
+                        {...passOnProps}
+                    />
+
                 </Section>
             </div>
         );

src/core_modules/capture-core/components/DataEntry/DataEntry.component.js

@@ -12,7 +12,6 @@ import SectionHeaderSimple from '../Section/SectionHeaderSimple.component';
 
 const styles = theme => ({
     loadingContainer: {
-        marginLeft: 12,
         marginTop: 12,
     },
     d2FormContainer: {
@@ -37,7 +36,6 @@ const styles = theme => ({
         paddingTop: theme.typography.pxToRem(10),
     },
     verticalFormInnerContainer: {
-        // overflow: 'auto',
         maxWidth: theme.typography.pxToRem(892),
     },
     verticalDataEntryContainer: {
@@ -64,10 +62,6 @@ const styles = theme => ({
         paddingTop: theme.typography.pxToRem(10),
         paddingBottom: theme.typography.pxToRem(10),
     },
-    dataEntryFieldSection: {
-        padding: theme.typography.pxToRem(8),
-        maxWidth: theme.typography.pxToRem(892),
-    },
 });
 
 type FieldContainer = {
@@ -185,7 +179,6 @@ class DataEntry extends React.Component<Props> {
                                 className={this.props.classes.dataEntryFieldSectionContainer}
                             >
                                 <Section
-                                    className={this.props.classes.dataEntryFieldSection}
                                     header={
                                         <SectionHeaderSimple
                                             title={section.name}

src/core_modules/capture-core/components/FormFields/New/HOC/withDefaultFieldContainer.js

@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 
 const styles = (theme: Theme) => ({
     container: {
-        padding: 8,
+        padding: '8px 8px 8px 12px',
     },
     activeContainer: {
         backgroundColor: theme.palette.info.main,

src/core_modules/capture-core/components/Pages/New/NewPage.component.js

@@ -18,7 +18,7 @@ import { RegistrationDataEntry } from './RegistrationDataEntry/RegistrationDataE
 
 const getStyles = ({ typography }) => ({
     container: {
-        padding: '10px 24px 16px 24px',
+        padding: '8px 24px 16px 24px',
     },
     paper: {
         marginBottom: typography.pxToRem(10),
@@ -28,9 +28,18 @@ const getStyles = ({ typography }) => ({
         maxWidth: typography.pxToRem(950),
     },
     title: {
-        padding: '10px 0 0px 10px',
+        padding: '8px 0 0px 8px',
         fontWeight: 500,
-        marginBottom: typography.pxToRem(16),
+    },
+    tetypeContainer: {
+        marginTop: typography.pxToRem(16),
+    },
+    registrationContainer: {
+        marginLeft: typography.pxToRem(8),
+        marginRight: typography.pxToRem(8),
+    },
+    selectorTopMargin: {
+        margin: typography.pxToRem(16),
     },
     emptySelectionPaperContent: {
         display: 'flex',
@@ -89,12 +98,16 @@ const NewPagePlain = ({
                         </div>
                         {
                             (!scopeType || scopeType === scopeTypes.TRACKED_ENTITY_TYPE) &&
-                                <TrackedEntityTypeSelector onSelect={handleRegistrationScopeSelection} />
+                                <div className={classes.tetypeContainer}>
+                                    <TrackedEntityTypeSelector onSelect={handleRegistrationScopeSelection} />
+                                </div>
                         }
-                        <RegistrationDataEntry
-                            dataEntryId={NEW_TEI_DATA_ENTRY_ID}
-                            selectedScopeId={selectedScopeId}
-                        />
+                        <div className={classes.registrationContainer}>
+                            <RegistrationDataEntry
+                                dataEntryId={NEW_TEI_DATA_ENTRY_ID}
+                                selectedScopeId={selectedScopeId}
+                            />
+                        </div>
                     </div>
                 </Paper>
             }

src/core_modules/capture-core/components/Pages/NewEvent/DataEntry/Assignee/Assignee.component.js

@@ -8,7 +8,7 @@ const getStyles = () => ({
     container: {
         display: 'flex',
         alignItems: 'center',
-        padding: 8,
+        padding: '8px 8px 8px 12px',
     },
     containerVertical: {
         display: 'flex',

src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.component.js

@@ -18,7 +18,7 @@ const getStyles = () => ({
     leftContainer: {
         flexGrow: 10,
         flexBasis: 0,
-        marginTop: 10,
+        margin: 8,
     },
 });
 

src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/SectionContents.component.js

@@ -1,27 +1,12 @@
 // @flow
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
 import { ProgramSelector } from './ProgramSelector';
 import { RegUnitSelector } from './RegUnitSelector';
 
-const getStyles = (theme: Theme) => ({
-    sectionFieldsInSection: {
-        margin: theme.spacing.unit,
-    },
-});
-type Props = {
-    classes: Object,
-};
-
-const SectionContents = (props: Props) => {
-    const { classes } = props;
-    return (
-        <div
-            className={classes.sectionFieldsInSection}
-        >
-            <RegUnitSelector />
-            <ProgramSelector />
-        </div>
-    );
-};
-export default withStyles(getStyles)(SectionContents);
+const SectionContents = () => (
+    <>
+        <RegUnitSelector />
+        <ProgramSelector />
+    </>
+);
+export default SectionContents;

src/core_modules/capture-core/components/Pages/Search/SearchForm/SearchForm.component.js

@@ -12,7 +12,7 @@ import { ResultsPageSizeContext } from '../../shared-contexts';
 
 const getStyles = (theme: Theme) => ({
     searchDomainSelectorSection: {
-        margin: theme.typography.pxToRem(10),
+        margin: '16px 8px 8px 8px',
     },
     searchRow: {
         display: 'flex',
@@ -200,7 +200,7 @@ const SearchFormIndex = ({
                                     className={classes.searchDomainSelectorSection}
                                     header={
                                         <SectionHeaderSimple
-                                            containerStyle={{ paddingLeft: 8, borderBottom: '1px solid #ECEFF1' }}
+                                            containerStyle={{ borderBottom: '1px solid #ECEFF1' }}
                                             title={i18n.t('Search {{name}}', { name })}
                                             onChangeCollapseState={() => { setExpandedFormId(formId); }}
                                             isCollapseButtonEnabled={isSearchSectionCollapsed}
@@ -252,7 +252,7 @@ const SearchFormIndex = ({
                                     className={classes.searchDomainSelectorSection}
                                     header={
                                         <SectionHeaderSimple
-                                            containerStyle={{ paddingLeft: 8, borderBottom: '1px solid #ECEFF1' }}
+                                            containerStyle={{ borderBottom: '1px solid #ECEFF1' }}
                                             title={searchByText}
                                             onChangeCollapseState={() => { setExpandedFormId(formId); }}
                                             isCollapseButtonEnabled={isSearchSectionCollapsed}

src/core_modules/capture-core/components/Pages/Search/SearchPage.component.js

@@ -35,7 +35,7 @@ const getStyles = (theme: Theme) => ({
         maxWidth: theme.typography.pxToRem(950),
     },
     title: {
-        padding: '10px 0 0px 10px',
+        padding: '8px 0 0px 8px',
         fontWeight: 500,
         marginBottom: theme.typography.pxToRem(16),
     },

src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js

@@ -16,7 +16,7 @@ const styles = theme => ({
         ...theme.typography.title,
         fontSize: 16,
         fontWeight: 500,
-        padding: '16px 8px 16px 8px',
+        padding: '16px 8px 16px 12px',
     },
     children: {
         flexGrow: 1,

src/core_modules/capture-core/components/TrackedEntityTypeSelector/TrackedEntityTypeSelector.component.js

@@ -15,9 +15,6 @@ import { useTrackedEntityTypesWithCorrelatedPrograms } from '../../hooks/useTrac
 import { useCurrentTrackedEntityTypeId } from '../../hooks/useCurrentTrackedEntityTypeId';
 
 const styles = ({ typography }) => ({
-    searchDomainSelectorSection: {
-        margin: typography.pxToRem(10),
-    },
     header: {
         paddingLeft: 8,
     },
@@ -26,21 +23,21 @@ const styles = ({ typography }) => ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'start',
-        padding: '8px 0',
+        paddingTop: '8px',
     },
     searchRowSelectElement: {
         marginLeft: 8,
         marginRight: 8,
-        marginBottom: 8,
         width: '100%',
     },
     gridContainerInformativeText: {
         marginLeft: 8,
-        marginTop: 4,
+        marginTop: 12,
         marginBottom: 12,
     },
     gridItemInformativeText: {
         fontSize: 14,
+        fontWeight: 'normal',
         marginLeft: 8,
         color: colors.grey800,
     },
@@ -84,7 +81,7 @@ export const TrackedEntityTypeSelectorPlain =
                   >
                       {
                           useMemo(() => Object.values(trackedEntityTypesWithCorrelatedPrograms)
-                              // $FlowFixMe https://github.com/facebook/flow/issues/2221
+                          // $FlowFixMe https://github.com/facebook/flow/issues/2221
                               .map(({ trackedEntityTypeName, trackedEntityTypeId }) =>
                                   (<SingleSelectOption
                                       key={trackedEntityTypeId}
@@ -98,14 +95,14 @@ export const TrackedEntityTypeSelectorPlain =
           </div>
           {
               !selectedSearchScopeId &&
-                  <Grid container direction="row" alignItems="center" className={classes.gridContainerInformativeText}>
-                      <Grid item>
-                          <InfoOutlinedIconWithStyles />
-                      </Grid>
-                      <Grid item className={classes.gridItemInformativeText}>
-                          {i18n.t('You can also choose a program from the top bar and search in that program')}
-                      </Grid>
+              <Grid container direction="row" alignItems="center" className={classes.gridContainerInformativeText}>
+                  <Grid item>
+                      <InfoOutlinedIconWithStyles />
+                  </Grid>
+                  <Grid item className={classes.gridItemInformativeText}>
+                      {i18n.t('You can also choose a program from the top bar and search in that program')}
                   </Grid>
+              </Grid>
           }
       </>
       );

src/core_modules/capture-ui/CoordinateField/coordinateField.module.css

@@ -48,7 +48,7 @@
 }
 
 .clearIconWithMargin {
-    padding: 2px;
+    padding: 1px;
 }
 
 .inputContainer {