Merge pull request #1650 from dhis2/feat/LIBS-728

fix(transfer): adjust filter inputs and container spacing [LIBS-728]
dhis2 · Dec 18, 2024 · 7db90b0 · 7db90b0
2 parents 69b3ec9 + 7fbb161
commit 7db90b0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/components/transfer/src/filter.js b/components/transfer/src/filter.js
@@ -8,6 +8,7 @@ export const Filter = ({ dataTest, filter, onChange, label, placeholder }) => (
     <div data-test={dataTest}>
         <Field label={label} name={dataTest} dataTest={`${dataTest}-field`}>
             <Input
+                dense
                 dataTest={`${dataTest}-input`}
                 type="search"
                 placeholder={placeholder}

diff --git a/components/transfer/src/options-container.js b/components/transfer/src/options-container.js
@@ -1,4 +1,3 @@
-import { spacers } from '@dhis2/ui-constants'
 import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
 import React, { Fragment, useRef } from 'react'
@@ -69,7 +68,6 @@ export const OptionsContainer = ({
             <style jsx>{`
                 .optionsContainer {
                     flex-grow: 1;
-                    padding: ${spacers.dp4} 0;
                     position: relative;
                     overflow: hidden;
                 }

diff --git a/components/transfer/src/transfer-option.js b/components/transfer/src/transfer-option.js
@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
+import { colors, spacers } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
@@ -66,6 +66,14 @@ export const TransferOption = ({
                     color: ${colors.grey600};
                     cursor: not-allowed;
                 }
+
+                div:first-child {
+                    margin-block-start: ${spacers.dp4};
+                }
+
+                div:last-child {
+                    margin-block-end: ${spacers.dp4};
+                }
             `}</style>
         </div>
     )