fix(transfer): apply margin to first and last items, remove container…

… padding
dhis2 · Dec 16, 2024 · 7fbb161 · 7fbb161
1 parent e62f9e7
commit 7fbb161
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
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>
     )