fix(ui): code rvw

frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx

@@ -3,8 +3,7 @@ import WidgetWrapper from '../WidgetWrapper';
 import { useObserver } from 'mobx-react-lite';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
-import stl from 'App/components/Dashboard/components/WidgetWrapper/widgetWrapper.css';
-import ownStl from './dashboardMetricSelection.css';
+import stl from '../WidgetWrapper/widgetWrapper.css'
 
 function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
     const selectedCategoryWidgetsCount = useObserver(() => {
@@ -50,7 +49,6 @@ function DashboardMetricSelection(props: IProps) {
     };
 
     const toggleAllWidgets = ({ target: { checked }}) => {
-        // dashboardStore.toggleAllSelectedWidgets(checked);
         setSelectAllCheck(checked);
         if (checked) {
             dashboardStore.selectWidgetsByCategory(activeCategory.name);
@@ -60,7 +58,7 @@ function DashboardMetricSelection(props: IProps) {
     }
 
     return useObserver(() => (
-        <div >
+        <div>
             <div className="grid grid-cols-12 gap-4 my-3 items-end">
                 <div className="col-span-3">
                     <div className="uppercase color-gray-medium text-lg">Categories</div>
@@ -117,13 +115,12 @@ function DashboardMetricSelection(props: IProps) {
                              <div
                                 className={
                                     cn(
-                                        "relative rounded border col-span-1 flex items-center justify-center",
-                                        stl.hoverableWidget,
+                                        "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,
-                                        ownStl.addNew,
                                     )
                                 }
-                                style={{ height: '100%', textAlign: 'center' }}
                                 onClick={props.handleCreateNew}
                             >
                                 Create Metric

frontend/app/components/Dashboard/components/DashboardMetricSelection/dashboardMetricSelection.css

@@ -1,11 +0,0 @@
-.addNew {
-    text-align: center;
-    color: $teal;
-    cursor: pointer;
-    background-color: white;
-
-    &:hover {
-        background-color: $active-blue;
-        transition: all 0.2s;
-    }
-}

frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx

@@ -70,7 +70,7 @@ function WidgetWrapper(props: Props) {
     const ref: any = useRef(null)
     const dragDropRef: any = dragRef(dropRef(ref))
 
-    const addOverlay = isTemplate || !isPredefined
+    const addOverlay = isTemplate || (!isPredefined && isWidget)
 
     return useObserver(() => (
             <div
@@ -104,7 +104,7 @@ function WidgetWrapper(props: Props) {
                     flip={["top"]}
                     html={<span>Click to select</span>}
                 >
-                    {isWidget && addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
+                    {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
                     <div
                         className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
                     >