refactor: simplify mergeform styles

dhis2 · Dec 9, 2024 · 78cbf0f · 78cbf0f
1 parent f002dea
commit 78cbf0f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 20 deletions.
diff --git a/src/app/AppWrapper.tsx b/src/app/AppWrapper.tsx
@@ -10,7 +10,7 @@ export const AppWrapper = ({ children }: AppWrapperProps) => {
     return (
         <>
             <CssReset />
-            <CssVariables theme spacers colors />
+            <CssVariables theme spacers colors elevations />
             <LoadApp>{children}</LoadApp>
         </>
     )

diff --git a/src/app/layout/Layout.tsx b/src/app/layout/Layout.tsx
@@ -54,7 +54,6 @@ export const Layout = () => {
     // hide the sidebar if any matched route specifies it
     const hideSidebar = matches.some((match) => match.handle?.hideSidebar)
     const showFooter = matches.some((match) => match.handle?.showFooter)
-
     return (
         <SidebarLayout hideSidebar={hideSidebar} showFooter={showFooter}>
             <Outlet />

diff --git a/src/components/merge/MergeFieldsBase.tsx b/src/components/merge/MergeFieldsBase.tsx
@@ -113,13 +113,9 @@ export const BaseTargetField = ({
                 showEndLoader={!!queryResult.availableQuery.hasNextPage}
                 selected={targetField.input.value?.id}
                 onChange={({ selected }) => {
-                    targetField.input.onChange({
-                        target: {
-                            value: queryResult.available.find(
-                                (d) => d.id === selected
-                            ),
-                        },
-                    })
+                    targetField.input.onChange(
+                        queryResult.available.find((d) => d.id === selected)
+                    )
                 }}
                 placeholder={placeholder || 'Select the model to merge into'}
             />

diff --git a/src/components/merge/MergeFormBase.tsx b/src/components/merge/MergeFormBase.tsx
@@ -1,5 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
 import { Form } from 'react-final-form'
+import css from './MergeForm.module.css'
 import { MergeFormValuesBase } from './mergeSchemaBase'
 
 export type MergeFormBaseProps<TValues> = {
@@ -28,19 +30,19 @@ export const MergeFormBase = <TValues extends MergeFormValuesBase>({
             }}
         >
             {({ handleSubmit }) => (
-                <form
-                    onSubmit={handleSubmit}
-                    style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '16px',
-                        padding: '16px',
-                        backgroundColor: 'white',
-                    }}
-                >
+                <StyledMergeForm onSubmit={handleSubmit}>
                     {children}
-                </form>
+                </StyledMergeForm>
             )}
         </Form>
     )
 }
+
+export const StyledMergeForm = ({
+    children,
+    ...formProps
+}: React.PropsWithChildren<React.ComponentProps<'form'>>) => (
+    <form className={cx(css.mergeForm, formProps.className)} {...formProps}>
+        {children}
+    </form>
+)