fix(ui): fix css files

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}

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}

frontend/app/components/Dashboard/components/WidgetView/widgetView.css

@@ -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;
-    }
-  }

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}

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;

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: {