date time selector

dashboard/src/components/date-time-picker/DateTimePicker.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+
+import DatePicker from "react-datepicker";
+import time from "assets/time.svg";
+
+import styled from "styled-components";
+
+type Props = {
+  startDate: any;
+  setStartDate: any;
+};
+
+const DateTimePicker: React.FC<Props> = ({
+  startDate,
+  setStartDate,
+}) => {
+  return (
+    <DateTimePickerWrapper>
+      <TimeIcon src={time} />
+      <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
+      <Bar />
+      <StyledDatePicker
+        selected={startDate}
+        onChange={(date: any) => setStartDate(date)}
+        showTimeSelect
+        dateFormat="MMMM d, yyyy h:mm aa"
+      />
+    </DateTimePickerWrapper>
+  );
+};
+
+export default DateTimePicker;
+
+const Bar = styled.div`
+  width: 1px;
+  height: calc(18px);
+  background: #494b4f;
+  margin-left: 8px;
+`;
+
+const TimeIcon = styled.img`
+  width: 16px;
+  height: 16px;
+  z-index: 999;
+`;
+
+const Div = styled.div`
+  display: block;
+`;
+
+const DateTimePickerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 42px;
+  margin-right: 10px;
+  padding-left: 8px;
+  height: 30px;
+  border-radius: 5px;
+  border: 1px solid #494b4f;
+  height: 30px;
+  background: #26292e;
+`;
+
+const StyledDatePicker = styled(DatePicker)`
+  border: 0;
+  width: calc(100% + 42px);
+  position: relative;
+  border: none;
+  margin-bottom: 3px;
+  outline-width: 0;
+  background: transparent;
+  text-align: center;
+  padding: 0 15px;
+  font-size: 13px;
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -969,7 +969,6 @@ const LineBreak = styled.div`
 
 const BodyWrapper = styled.div`
   position: relative;
-  margin-bottom: 50px;
 `;
 
 const Header = styled.div`

dashboard/src/main/home/cluster-dashboard/expanded-chart/logs-section/LogsSection.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useState } from "react";
 
 import styled from "styled-components";
 import RadioFilter from "components/RadioFilter";
-import DatePicker from "react-datepicker";
 
 import filterOutline from "assets/filter-outline.svg";
-import time from "assets/time.svg";
+import DateTimePicker from "components/date-time-picker/DateTimePicker";
 
 type Props = {
   currentChart?: any;
@@ -45,18 +44,10 @@ const LogsSection: React.FC<Props> = ({
                 />
               </SearchBarWrapper>
             </SearchRowWrapper>
-            <DateTimePickerWrapper>
-              <TimeIcon src={time} />
-              <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
-              <Div>
-              <StyledDatePicker
-                selected={startDate}
-                onChange={(date: any) => setStartDate(date)}
-                showTimeSelect
-                dateFormat="MMMM d, yyyy h:mm aa"
-              />
-              </Div>
-            </DateTimePickerWrapper>
+            <DateTimePicker
+              startDate={startDate}
+              setStartDate={setStartDate}
+            />
             <RadioFilter
               icon={filterOutline}
               selected={podFilter}
@@ -144,47 +135,6 @@ const LogsSection: React.FC<Props> = ({
 
 export default LogsSection;
 
-const TimeIcon = styled.img`
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  z-index: 999;
-  top: 6px;
-  left: 8px;
-`;
-
-const Div = styled.div`
-  display: block;
-`;
-
-const DateTimePickerWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-right: 44px;
-  margin-right: 15px;
-  position: relative;
-  padding-left: 12px;
-  height: 30px;
-  border-radius: 5px;
-  border: 1px solid #494b4f;
-  height: 30px;
-  background: #26292e;
-`;
-
-const StyledDatePicker = styled(DatePicker)`
-  border: 0;
-  width: calc(100% + 44px);
-  padding-left: 30px;
-  border: none;
-  margin-bottom: 3px;
-  outline-width: 0;
-  background: transparent;
-  text-align: center;
-  padding: 0 15px;
-  font-size: 13px;
-`;
-
 const BackButton = styled.div`
   display: flex;
   width: 30px;
@@ -272,7 +222,7 @@ const Checkbox = styled.div<{ checked: boolean }>`
 
 const Spacer = styled.div<{ width?: string }>`
   height: 100%;
-  width: ${props => props.width || "15px"};
+  width: ${props => props.width || "10px"};
 `;
 
 const Button = styled.div`
@@ -363,7 +313,7 @@ const SearchRow = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
-  margin-right: 15px;
+  margin-right: 10px;
   background: #26292E;
   border-radius: 5px;
   border: 1px solid #aaaabb33;