Fix visual regression in datetime attribute (#2787)

src/components/DateTimeField/DateTimeField.tsx

@@ -10,6 +10,8 @@ import { joinDateTime, splitDateTime } from "@saleor/misc";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import { useStyles } from "./styles";
+
 type DateTimeFieldProps = Omit<TextFieldProps, "label" | "error"> & {
   onChange: (value: string) => void;
   error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
@@ -24,6 +26,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
   value,
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
 
   const parsedValue = value ? splitDateTime(value) : { date: "", time: "" };
 
@@ -44,6 +47,11 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         type="date"
         value={parsedValue.date}
         InputLabelProps={{ shrink: true }}
+        InputProps={{
+          classes: {
+            root: classes.dateField,
+          },
+        }}
       />
       <TextField
         fullWidth
@@ -60,6 +68,11 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         type="time"
         value={parsedValue.time}
         InputLabelProps={{ shrink: true }}
+        InputProps={{
+          classes: {
+            root: classes.timeField,
+          },
+        }}
       />
     </>
   );

src/components/DateTimeField/index.ts

@@ -0,0 +1 @@
+export * from "./DateTimeField";

src/components/DateTimeField/styles.ts

@@ -0,0 +1,28 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    dateField: {
+      borderRadius: "4px 0 0 4px",
+    },
+    timeField: {
+      borderRadius: "0 4px 4px 0",
+      "& > fieldset": {
+        borderLeftWidth: "0 !important",
+      },
+    },
+    [theme.breakpoints.down("md")]: {
+      dateField: {
+        borderRadius: "4px 4px 0 0",
+      },
+      timeField: {
+        borderRadius: "0 0 4px 4px",
+        "& > fieldset": {
+          borderTopWidth: "0 !important",
+          borderLeftWidth: "1px !important",
+        },
+      },
+    },
+  }),
+  { name: "DateTimeField" },
+);