From b98d5d57ef0f8740ed62e4ed1b0a102971139b1d Mon Sep 17 00:00:00 2001
From: Dawid <tarasiukdawid@gmail.com>
Date: Tue, 6 Dec 2022 12:02:45 +0100
Subject: [PATCH] Fix visual regression in datetime attribute (#2787)

---
 .../{ => DateTimeField}/DateTimeField.tsx     | 13 +++++++++
 src/components/DateTimeField/index.ts         |  1 +
 src/components/DateTimeField/styles.ts        | 28 +++++++++++++++++++
 3 files changed, 42 insertions(+)
 rename src/components/{ => DateTimeField}/DateTimeField.tsx (87%)
 create mode 100644 src/components/DateTimeField/index.ts
 create mode 100644 src/components/DateTimeField/styles.ts

diff --git a/src/components/DateTimeField.tsx b/src/components/DateTimeField/DateTimeField.tsx
similarity index 87%
rename from src/components/DateTimeField.tsx
rename to src/components/DateTimeField/DateTimeField.tsx
index fb20feb4b..d96608563 100644
--- a/src/components/DateTimeField.tsx
+++ b/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,
+          },
+        }}
       />
     </>
   );
diff --git a/src/components/DateTimeField/index.ts b/src/components/DateTimeField/index.ts
new file mode 100644
index 000000000..7f2ad1128
--- /dev/null
+++ b/src/components/DateTimeField/index.ts
@@ -0,0 +1 @@
+export * from "./DateTimeField";
diff --git a/src/components/DateTimeField/styles.ts b/src/components/DateTimeField/styles.ts
new file mode 100644
index 000000000..16271ce47
--- /dev/null
+++ b/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" },
+);