From 580641efe862c92cae5585a424b7e58749670c1a Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 19 May 2022 12:23:23 +0200
Subject: [PATCH] fix(ui): fix css files

---
 .../DashboardMetricSelection.tsx              |  3 +--
 .../components/WidgetView/WidgetView.tsx      | 12 ++++++++---
 .../components/WidgetView/widgetView.css      | 14 -------------
 .../WidgetWrapper/WidgetWrapper.tsx           | 17 ++++++++++-----
 .../WidgetWrapper/widgetWrapper.css           | 21 -------------------
 frontend/tailwind.config.js                   | 10 +++++++--
 6 files changed, 30 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/app/components/Dashboard/components/WidgetView/widgetView.css

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index c7dfff71f..2833a71a6 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -117,8 +117,7 @@ function DashboardMetricSelection(props: IProps) {
                                     cn(
                                         "relative rounded border col-span-1 cursor-pointer",
                                         "flex items-center justify-center bg-white",
-                                        "hover:bg-active-blue text-center h-full",
-                                        stl.hoverBlue,
+                                        "hover:bg-active-blue hover:shadow-border-main text-center h-full",
                                     )
                                 }
                                 onClick={props.handleCreateNew}
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 9f5ab63f7..e7778efe3 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -6,9 +6,7 @@ import WidgetForm from '../WidgetForm';
 import WidgetPreview from '../WidgetPreview';
 import WidgetSessions from '../WidgetSessions';
 import { useObserver } from 'mobx-react-lite';
-import { withSiteId } from 'App/routes';
 import WidgetName from '../WidgetName';
-import stl from './widgetView.css';
 
 interface Props {
     history: any;
@@ -44,7 +42,15 @@ function WidgetView(props: Props) {
             <div className="relative pb-10">
                 <BackLink onClick={onBackHandler} vertical className="absolute" style={{ left: '-50px', top: '0px' }} />
                 <div className="bg-white rounded border">
-                    <div className={cn("p-4 flex justify-between items-center", { 'cursor-pointer': !expanded, [stl.hoverableTitle]: !expanded })} onClick={openEdit}>
+                    <div
+                        className={cn(
+                            "p-4 flex justify-between items-center",
+                            {
+                                'cursor-pointer hover:bg-active-blue hover:shadow-border-blue': !expanded,
+                            }
+                        )}
+                        onClick={openEdit}
+                        >
                         <h1 className="mb-0 text-2xl">
                             <WidgetName
                                 name={widget.name}
diff --git a/frontend/app/components/Dashboard/components/WidgetView/widgetView.css b/frontend/app/components/Dashboard/components/WidgetView/widgetView.css
deleted file mode 100644
index 4143320f9..000000000
--- a/frontend/app/components/Dashboard/components/WidgetView/widgetView.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.hoverableTitle {
-    background-color: transparent !important;
-    box-shadow: none !important;
-    padding: 0 10px !important;
-
-    &:hover {
-      background-color: $active-blue !important;
-      box-shadow: 0 0 0 1px $active-blue-border!important;
-    }
-
-    &.hover:hover {
-      background-color: $teal !important;
-    }
-  }
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index 27446db27..385dbfc39 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -76,11 +76,10 @@ function WidgetWrapper(props: Props) {
             <div
                 className={
                     cn(
-                        "relative rounded bg-white border",
+                        "relative rounded bg-white border group",
                         'col-span-' + widget.config.col,
-                        stl.hoverableWidget,
-                        { [stl.hoverGray]: !isTemplate && isWidget },
-                        { [stl.hoverBlue]: isTemplate }
+                        { "hover:shadow-border-gray": !isTemplate && isWidget },
+                        { "hover:shadow-border-main": isTemplate }
                     )
                 }
                 style={{
@@ -92,7 +91,15 @@ function WidgetWrapper(props: Props) {
                 onClick={props.onClick ? props.onClick : () => {}}
                 id={`widget-${widget.widgetId}`}
             >
-                {isWidget && <div className={cn(stl.drillDownMessage, 'disabled text-gray')}> {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'} </div>}
+                {!isTemplate && isWidget &&
+                    <div
+                        className={cn(
+                            stl.drillDownMessage,
+                            'disabled text-gray invisible group-hover:visible')}
+                        >
+                            {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'}
+                    </div>
+                }
                 {/* @ts-ignore */}
                 <Tooltip
                     hideOnClick={true}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/widgetWrapper.css b/frontend/app/components/Dashboard/components/WidgetWrapper/widgetWrapper.css
index 7531f60b2..4b30fe19b 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/widgetWrapper.css
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/widgetWrapper.css
@@ -1,25 +1,4 @@
-.hoverableWidget {
-    transition: all 0.2s;
-}
-
-.hoverGray {
-    &:hover {
-        box-shadow: 0 0 0 1px #999;
-
-        & .drillDownMessage {
-            display: unset;
-        }
-    }
-}
-
-.hoverBlue {
-    &:hover {
-        box-shadow: 0 0 0 1px $main;
-    }
-}
-
 .drillDownMessage {
-    display: none;
     position: absolute;
     top: 35px;
     left: 0;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a9aa4b8e8..6faa9f8ed 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -24,7 +24,7 @@ module.exports = {
 		// 'borderStyle',
 		'borderWidth',
 		// 'boxSizing',
-		// 'boxShadow',
+		'boxShadow',
 		// 'clear',
 		'cursor',
 		'display',
@@ -108,7 +108,13 @@ module.exports = {
 			default: '#DDDDDD',
 			"gray-light-shade": colors["gray-light-shade"],
 		},
-    extend: {},
+    extend: {
+		boxShadow: {
+			'border-blue': `0 0 0 1px ${colors['active-blue-border']}`,
+			'border-main': `0 0 0 1px ${colors['main']}`,
+			'border-gray': '0 0 0 1px #999',
+		}
+	},
   },
   content: [],
   variants: {