From 482158ce79a6d34b0c4282fe05254ade2c94a096 Mon Sep 17 00:00:00 2001
From: Alexey Oplachko <xirenec1@gmail.com>
Date: Wed, 9 Mar 2022 19:28:03 +0200
Subject: [PATCH 1/3] #26 prevent header elements from interfering with each
 other

---
 src/components/StatusBar/StatusBar.js   |  4 +-
 src/plugins/daterangepicker/index.js    | 51 +++++++++++++++++++++----
 src/scss/app.scss                       |  3 +-
 src/scss/modules/date-range-picker.scss | 22 +++++++++++
 src/scss/modules/status-bar.scss        |  9 ++++-
 5 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 src/scss/modules/date-range-picker.scss

diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js
index a8b1b822..b2ac4588 100644
--- a/src/components/StatusBar/StatusBar.js
+++ b/src/components/StatusBar/StatusBar.js
@@ -11,7 +11,7 @@ import { DateRangePicker } from "../../plugins/daterangepicker";
 import { DATE_TIME_RANGE } from '../../plugins/daterangepicker/consts';
 import {  findRangeByLabel } from "../../plugins/daterangepicker/utils";
 import { UpdateStateFromQueryParams } from "../UpdateStateFromQueryParams";
-
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import store from '../../store/store'
 import loadLabels from "../../actions/LoadLabels";
 
@@ -207,7 +207,7 @@ export function StatusBarSelectors() {
                         title={"Copy Link"}
                         onClick={shareLink}
                     >
-                        <LinkIcon
+                        <ContentCopyIcon
                             fontSize={"small"}
                         />
 
diff --git a/src/plugins/daterangepicker/index.js b/src/plugins/daterangepicker/index.js
index cfa605a2..9a6049f5 100644
--- a/src/plugins/daterangepicker/index.js
+++ b/src/plugins/daterangepicker/index.js
@@ -28,6 +28,7 @@ import store from '../../store/store'
 import loadLogs from "../../actions/loadLogs"
 import { setLabelsBrowserOpen } from "../../actions/setLabelsBrowserOpen";
 import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import { Tooltip } from "@mui/material";
 export function DateRangePickerMain(props) {
     const today = Date.now();
     const {
@@ -163,6 +164,8 @@ useEffect(()=>{
             })
         );
     };
+    const mediaMatch = window.matchMedia('(min-width: 1200px)');
+    const [matches, setMatches] = useState(mediaMatch.matches);
     const dateButtonStyles = {
         border:'none',
         height:'21px',
@@ -173,8 +176,7 @@ useEffect(()=>{
         fontSize:'.85em',
         display:'flex',
         alignItems:'center',
-        marginLeft:'20px'
-
+        marginLeft:'20px',
     }
 
     const helpers = {
@@ -200,13 +202,45 @@ useEffect(()=>{
     return (
         <div>
             <button style={dateButtonStyles}
-                onClick={openButtonHandler}
-            ><AccessTimeOutlinedIcon 
-            style={{
-                fontSize:'1.15em',
-                marginRight:'3px'
-            }} />
+                onClick={openButtonHandler} className={'date-time-selector'}
+            >
+                <Tooltip title={
+                    timeLabel ? <React.Fragment>
+                        <span style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                            padding: '3px',
+                        }}  >
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                                {(isValid(dateRange.dateStart)
+                                ? format(dateRange.dateStart, "yyyy/MM/dd HH:mm:ss")
+                                : dateRange.dateStart)}
+                            </span>
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                            to
+                            </span>
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                            {(isValid(dateRange.dateEnd)
+                                ? format(dateRange.dateEnd, "yyyy/MM/dd HH:mm:ss")
+                                : typeof dateRange.dateEnd !== 'undefined' ?
+                                dateRange.dateEnd : ''
+                                )}
+                            </span>
+
+                        </span>
+                    </React.Fragment> : undefined
+                    }>
+                    <AccessTimeOutlinedIcon />
+                </Tooltip>
 
+                <span>
                 {timeLabel ?
                 timeLabel :
                 (isValid(dateRange.dateStart)
@@ -219,6 +253,7 @@ useEffect(()=>{
                     dateRange.dateEnd : ''
                     )
                 }
+                </span>
             </button> 
 
             { isComponentVisible ? (
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 7a0a0d56..2d64720d 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -11,4 +11,5 @@
 @import "modules/log-view";
 @import "modules/valuesList.scss";
 @import "modules/query-bar.scss";
-@import "modules/status-bar.scss";
\ No newline at end of file
+@import "modules/status-bar.scss";
+@import "modules/date-range-picker.scss";
\ No newline at end of file
diff --git a/src/scss/modules/date-range-picker.scss b/src/scss/modules/date-range-picker.scss
new file mode 100644
index 00000000..fa845334
--- /dev/null
+++ b/src/scss/modules/date-range-picker.scss
@@ -0,0 +1,22 @@
+.date-time-selector {
+    svg {
+        font-size: 1.15em;
+        margin-right: 3px;
+    }
+    .tooltip {
+        background-color: red;
+        display: flex;
+        align-items: center;
+        justify-items: center;
+    }
+}
+@media screen and (max-width: 1200px) {
+    .date-time-selector {
+        svg {
+            margin-right: 0;
+        }
+        span {
+            display: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/modules/status-bar.scss b/src/scss/modules/status-bar.scss
index 5814c272..944b20f6 100644
--- a/src/scss/modules/status-bar.scss
+++ b/src/scss/modules/status-bar.scss
@@ -15,7 +15,7 @@
         .label {
             flex: 1;
             color: #bfbfbf;
-
+            min-width: 51px;
             padding: 6px 6px;
             margin: 5px;
             font-size: 0.7rem;
@@ -132,7 +132,14 @@
      }
     
 }
+@media screen and (max-width: 950px) {
+    .url-copy {
+        span {
+            display: none;
+        }
 
+    }
+}
 .copied-warning {
 transition:.2s all;
   color:orange;

From 47b4065c685ab4db6f2d2e7e925b5a672392a754 Mon Sep 17 00:00:00 2001
From: Alexey Oplachko <xirenec1@gmail.com>
Date: Wed, 9 Mar 2022 19:34:19 +0200
Subject: [PATCH 2/3] Changed icon size

---
 src/components/StatusBar/StatusBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js
index b2ac4588..0e9f4ee0 100644
--- a/src/components/StatusBar/StatusBar.js
+++ b/src/components/StatusBar/StatusBar.js
@@ -208,7 +208,7 @@ export function StatusBarSelectors() {
                         onClick={shareLink}
                     >
                         <ContentCopyIcon
-                            fontSize={"small"}
+                            fontSize={"15px"}
                         />
 
                         <span>{"Copy Link"}</span>

From d34ed649dc1c9c552dc94d20a5336162b3db669f Mon Sep 17 00:00:00 2001
From: Alexey Oplachko <xirenec1@gmail.com>
Date: Wed, 9 Mar 2022 19:43:48 +0200
Subject: [PATCH 3/3] Moved tooltip trigger to parent component

---
 src/plugins/daterangepicker/index.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/plugins/daterangepicker/index.js b/src/plugins/daterangepicker/index.js
index 9a6049f5..63189513 100644
--- a/src/plugins/daterangepicker/index.js
+++ b/src/plugins/daterangepicker/index.js
@@ -201,10 +201,7 @@ useEffect(()=>{
     }
     return (
         <div>
-            <button style={dateButtonStyles}
-                onClick={openButtonHandler} className={'date-time-selector'}
-            >
-                <Tooltip title={
+            <Tooltip title={
                     timeLabel ? <React.Fragment>
                         <span style={{
                             display: 'flex',
@@ -237,8 +234,12 @@ useEffect(()=>{
                         </span>
                     </React.Fragment> : undefined
                     }>
+                <button style={dateButtonStyles}
+                    onClick={openButtonHandler} className={'date-time-selector'}
+                >
+
                     <AccessTimeOutlinedIcon />
-                </Tooltip>
+                
 
                 <span>
                 {timeLabel ?
@@ -255,7 +256,7 @@ useEffect(()=>{
                 }
                 </span>
             </button> 
-
+            </Tooltip>
             { isComponentVisible ? (
                 <div tabIndex={"0"} ref={ref}>
                     <ThemeProvider theme={theme}>