From 966f3bc5566381c01fd075765b9b6a99257bb6da Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 16 Aug 2022 16:11:04 +0200
Subject: [PATCH] change(ui) - nodata message and button hover

---
 .../Session_/OverviewPanel/OverviewPanel.tsx  | 33 +++++++++++--------
 .../shared/XRayButton/xrayButton.module.css   |  4 +++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
index 4cadd1fad..8c72dd51a 100644
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@@ -12,6 +12,7 @@ import VerticalPointerLine from './components/VerticalPointerLine';
 import cn from 'classnames';
 // import VerticalLine from './components/VerticalLine';
 import OverviewPanelContainer from './components/OverviewPanelContainer';
+import { NoContent, Icon } from 'UI';
 
 interface Props {
     resourceList: any[];
@@ -62,19 +63,25 @@ function OverviewPanel(props: Props) {
                         <OverviewPanelContainer endTime={props.endTime}>
                             <TimelineScale endTime={props.endTime} />
                             <div style={{ width: '100%', height: '200px' }} className="transition relative">
-                                <VerticalPointerLine />
-                                {selectedFeatures.map((feature: any, index: number) => (
-                                    <div className={cn('border-b', { 'bg-white': index % 2 })}>
-                                        <EventRow
-                                            isGraph={feature === 'PERFORMANCE'}
-                                            key={feature}
-                                            title={feature}
-                                            list={resources[feature]}
-                                            renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
-                                            endTime={props.endTime}
-                                        />
-                                    </div>
-                                ))}
+                                <NoContent show={selectedFeatures.length === 0} title={
+                                <div className="flex items-center mt-16">
+                                    <Icon name="info-circle" className="mr-2" size="18" />
+                                    Select a debug option to visualize on timeline.
+                                </div>}>
+                                    <VerticalPointerLine />
+                                    {selectedFeatures.map((feature: any, index: number) => (
+                                        <div className={cn('border-b', { 'bg-white': index % 2 })}>
+                                            <EventRow
+                                                isGraph={feature === 'PERFORMANCE'}
+                                                key={feature}
+                                                title={feature}
+                                                list={resources[feature]}
+                                                renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
+                                                endTime={props.endTime}
+                                            />
+                                        </div>
+                                    ))}
+                                </NoContent>
                             </div>
                         </OverviewPanelContainer>
                     </BottomBlock.Content>
diff --git a/frontend/app/components/shared/XRayButton/xrayButton.module.css b/frontend/app/components/shared/XRayButton/xrayButton.module.css
index 3b3f76ca4..f602c7a3f 100644
--- a/frontend/app/components/shared/XRayButton/xrayButton.module.css
+++ b/frontend/app/components/shared/XRayButton/xrayButton.module.css
@@ -8,6 +8,10 @@
     &.default {
         color: white;
         background: linear-gradient(90deg, rgba(57, 78, 255, 0.87) 0%, rgba(62, 170, 175, 0.87) 100%);
+        &:hover {
+            /* color: $teal; */
+            background: linear-gradient(90deg, rgba(57, 78, 255, 0.87) 100%, rgba(62, 170, 175, 0.87) 100%);
+        }
     }
 
     &.active {