Fix styling on datefield item

Related to #113
sebastienbarbier · Jun 21, 2023 · 554fc39 · 554fc39
1 parent c390574
commit 554fc39
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/app/components/Report.js b/src/app/components/Report.js
@@ -228,7 +228,7 @@ export default function Report(props) {
           </div>
         </div>
         <div className="layout_header_date_range wrapperMobile">
-          <Grid container spacing={2}>
+          <Grid container spacing={2} sx={{ paddingBottom: 1, paddingTop: 1 }}>
             <Grid item xs={6}>
               <DateFieldWithButtons
                 label="From"

diff --git a/src/app/components/forms/DateFieldWithButtons.js b/src/app/components/forms/DateFieldWithButtons.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import moment from "moment";
 
+import Box from '@mui/material/Box';
 import Button from "@mui/material/Button";
 
 import { DatePicker } from '@mui/x-date-pickers';
@@ -22,6 +23,7 @@ const styles = {
   datefield: {
     flexGrow: 1,
     width: "100%",
+    marginTop: "10px",
   },
   button: {
     minWidth: "120px",
@@ -42,22 +44,22 @@ export default function DateFieldWithButtons({
   disableYestedayButton,
 }) {
   return (
-    <div style={styles.container} className="dateFieldWithButtons">
+    <Box sx={styles.container} className="dateFieldWithButtons">
       <DatePicker
         label={label}
         value={value ? moment(value) : ""}
         onChange={(newValue) => {
           onChange(moment(newValue))
         }}
         disabled={disabled}
-        inputFormat={format ? format : "DD/MM/YYYY"}
+        sx={styles.datefield}
+        format={format ? format : "DD/MM/YYYY"}
         renderInput={(params) => {
           const endAdornment = params.InputProps.endAdornment;
           delete params.InputProps;
           return <TextField
             margin="normal"
             helperText={helperText}
-            fullWidth
             id={id}
             InputProps={{ endAdornment: <Stack direction='row' spacing={2} alignItems="center">
               { endAdornment ? endAdornment.type.render(endAdornment.props) : '' }
@@ -77,6 +79,6 @@ export default function DateFieldWithButtons({
             {...params} />
         }}
       />
-    </div>
+    </Box>
   );
 }