From eaf162c5f8e52c609f1f182be549221df9f8d2fb Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 18 May 2022 13:10:06 +0200
Subject: [PATCH] fix(ui): minor metric hover styles fixes

---
 .../components/WidgetWrapper/WidgetWrapper.tsx       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index 2afd8320a..33025e687 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -35,9 +35,8 @@ function WidgetWrapper(props: Props) {
     const widget: any = useObserver(() => props.widget);
     const isPredefined = widget.metricType === 'predefined';
     const dashboard = useObserver(() => dashboardStore.selectedDashboard);
-    const isOverviewWidget = widget.widgetType === 'predefined' && widget.viewType === 'overview';
 
-    const [{ opacity, isDragging }, dragRef] = useDrag({
+    const [{ isDragging }, dragRef] = useDrag({
         type: 'item',
         item: { index },
         collect: (monitor) => ({
@@ -80,7 +79,7 @@ function WidgetWrapper(props: Props) {
                         "relative rounded bg-white border",
                         'col-span-' + widget.config.col,
                         stl.hoverableWidget,
-                        { [stl.hoverGray]: !isTemplate },
+                        { [stl.hoverGray]: !isTemplate && isWidget },
                         { [stl.hoverBlue]: isTemplate }
                     )
                 }
@@ -93,10 +92,9 @@ function WidgetWrapper(props: Props) {
                 onClick={props.onClick ? props.onClick : () => {}}
                 id={`widget-${widget.widgetId}`}
             >
-                <div className={cn(stl.drillDownMessage, 'disabled text-gray')}> {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'} </div>
+                {isWidget && <div className={cn(stl.drillDownMessage, 'disabled text-gray')}> {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'} </div>}
                 {/* @ts-ignore */}
                 <Tooltip
-                    // title="Click to select"
                     hideOnClick={true}
                     position="bottom"
                     delay={300}
@@ -106,9 +104,9 @@ function WidgetWrapper(props: Props) {
                     flip={["top"]}
                     html={<span>Click to select</span>}
                 >
-                    {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
+                    {isWidget && addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
                     <div
-                        className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate })}
+                        className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
                     >
                         <div className="capitalize w-full font-medium">{widget.name}</div>
                         {isWidget && (