From 9dd49cfd3b298584c408e233918f6f93047992c3 Mon Sep 17 00:00:00 2001
From: Niklas Granander <ngranander@spotify.com>
Date: Thu, 12 Aug 2021 11:56:34 +0200
Subject: [PATCH] Match styles of Select for date picker

Signed-off-by: Niklas Granander <ngranander@spotify.com>
---
 .../DatePickerComponent.tsx                   | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx b/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
index c6cc2eded5..854fbbd87f 100644
--- a/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
+++ b/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
@@ -18,6 +18,7 @@ import {
   createStyles,
   InputBase,
   InputProps,
+  makeStyles,
   Theme,
   Typography,
   withStyles,
@@ -50,6 +51,13 @@ const BootstrapInput = withStyles((theme: Theme) =>
   }),
 )(InputBase);
 
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
 interface DatePickerProps {
   label: string;
   onDateChange?: (date: string) => void;
@@ -59,16 +67,19 @@ export const DatePickerComponent = ({
   label,
   onDateChange,
   ...inputProps
-}: InputProps & DatePickerProps) => (
-  <>
-    <Typography variant="button">{label}</Typography>
-    <br />
-    <BootstrapInput
-      inputProps={{ 'aria-label': label }}
-      type="date"
-      fullWidth
-      onChange={event => onDateChange?.(event.target.value)}
-      {...inputProps}
-    />
-  </>
-);
+}: InputProps & DatePickerProps) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="button">{label}</Typography>
+      <BootstrapInput
+        inputProps={{ 'aria-label': label }}
+        type="date"
+        fullWidth
+        onChange={event => onDateChange?.(event.target.value)}
+        {...inputProps}
+      />
+    </div>
+  );
+};