fix(ui): fix colors for metric picker

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -31,7 +31,7 @@ function DashboardList() {
             }   
         >
             <div className="mt-3 border-b">
-                <div className="grid grid-cols-12 py-2 font-medium">
+                <div className="grid grid-cols-12 py-2 px-2 font-medium">
                   <div className="col-span-8">Title</div>
                   <div  className="col-span-2">Visibility</div>
                   <div className="col-span-2 text-right">Created</div>

frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from 'UI';
 import { connect } from 'react-redux';
-import{ IDashboard } from "App/mstore/types/dashboard";
+import { IDashboard } from 'App/mstore/types/dashboard';
 import { checkForRecent } from 'App/date';
 import { withSiteId, dashboardSelected } from 'App/routes';
 import { useStore } from 'App/mstore';
@@ -22,34 +22,28 @@ function DashboardListItem(props: Props) {
         history.push(path);
     };
     return (
-        <>
+        <div className="hover:bg-active-blue px-2 cursor-pointer" onClick={onItemClick}>
             <div className="grid grid-cols-12 py-4 border-t select-none">
                 <div className="col-span-8 flex items-start">
-                    <div className="flex items-center link capitalize-first" onClick={onItemClick}>
+                    <div className="flex items-center capitalize-first">
                         <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
                             <Icon name="columns-gap" size="16" color="tealx" />
                         </div>
-                        <div>
-                            {dashboard.name}
-                        </div>
+                        <div>{dashboard.name}</div>
                     </div>
                 </div>
                 {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
                 <div className="col-span-2">
                     <div className="flex items-center">
-                        <Icon name={dashboard.isPublic ? "user-friends" : "person-fill"} className="mr-2" />
+                        <Icon name={dashboard.isPublic ? 'user-friends' : 'person-fill'} className="mr-2" />
                         <span>{dashboard.isPublic ? 'Team' : 'Private'}</span>
                     </div>
                 </div>
-                <div className="col-span-2 text-right">
-                    {checkForRecent(dashboard.createdAt, 'LLL dd, yyyy, hh:mm a')}
+                <div className="col-span-2 text-right">{checkForRecent(dashboard.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
             </div>
+            {dashboard.description ? <div className="text-disabled-text px-4 pb-2">{dashboard.description}</div> : null}
         </div>
-            <div className="text-disabled-text px-4 pb-2">
-                {dashboard.description}
-            </div>
-        </>
     );
 }
 // @ts-ignore
-export default connect(state => ({ siteId: state.getIn([ 'site', 'siteId' ]) }))(withRouter(DashboardListItem))
+export default connect((state) => ({ siteId: state.getIn(['site', 'siteId']) }))(withRouter(DashboardListItem));

frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css

@@ -0,0 +1,5 @@
+.tooltipContainer {
+  & > tippy-popper > tippy-tooltip {
+    padding: 0!important;
+  }
+}

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -17,6 +17,10 @@ import DashboardOptions from '../DashboardOptions';
 import SelectDateRange from 'Shared/SelectDateRange';
 import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
+// @ts-ignore
+import stl from './DashboardView.module.css';
 
 interface IProps {
     siteId: string;
@@ -27,6 +31,7 @@ interface IProps {
 type Props = IProps & RouteComponentProps;
 
 function DashboardView(props: Props) {
+    const [isTooltipShown, setTooltip] = React.useState(false);
     const { siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
     const { showModal } = useModal();
@@ -123,9 +128,21 @@ function DashboardView(props: Props) {
                             onDoubleClick={() => onEdit(true)}
                             className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
                             actionButton={
-                                <Button variant="primary" onClick={onAddWidgets}>
+                                <OutsideClickDetectingDiv onClickOutside={() => setTooltip(false)}>
+                                    {/* @ts-ignore */}
+                                    <Tooltip 
+                                        interactive
+                                        useContext
+                                        // @ts-ignore
+                                        theme="nopadding"
+                                        open={isTooltipShown}
+                                        html={<div style={{ padding: 0 }}><AddMetricContainer isPopup siteId={siteId} /></div>}
+                                    >
+                                        <Button variant="primary" onClick={() => setTooltip(true)}>
                                             Add Metric
                                         </Button>
+                                    </Tooltip>
+                                </OutsideClickDetectingDiv>
                             }
                         />
                     </div>

frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx

@@ -50,20 +50,11 @@ function AddMetric({ metrics, history, siteId, title, description }: IProps) {
                         <h1 className="text-2xl">{title}</h1>
                         <div className="text-disabled-text">{description}</div>
                     </div>
-                    {title.includes('Custom') ? (
-                        <div>
-                            <span className="text-md link" onClick={onCreateNew}>
+                   
+                    <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
                         + Create new
-                            </span>
-                        </div>
-                    ) : (
-                        <div>
-                            Don’t find the one you need?
-                            <span className="text-md link ml-2" onClick={onCreateNew}>
-                                + Create custom metric
-                            </span>
-                        </div>
-                    )}
+                    </Button>
+                    
                 </div>
 
                 <div className="grid h-full grid-cols-4 gap-4 px-8 items-start py-1" style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridTemplateRows: 'max-content' }}>

frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx

@@ -12,39 +12,42 @@ interface AddMetricButtonProps {
     title: string;
     description: string;
     isPremade?: boolean;
+    isPopup?: boolean;
     onClick: () => void;
 }
 
-function AddMetricButton({ iconName, title, description, onClick, isPremade }: AddMetricButtonProps) {
+function AddMetricButton({ iconName, title, description, onClick, isPremade, isPopup }: AddMetricButtonProps) {
     return (
         <div
             onClick={onClick}
             className={cn(
-                'px-4 py-8 flex items-center flex-col hover:bg-gray-lightest group rounded border cursor-pointer',
-                isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background'
+                'flex items-center hover:bg-gray-lightest hover:!border-gray-light group rounded border cursor-pointer',
+                isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background',
+                isPopup ? 'p-4 z-50' : 'px-4 py-8 flex-col'
             )}
             style={{ borderColor: 'rgb(238, 238, 238)' }}
         >
             <div
                 className={cn(
                     'p-6 my-3 rounded-full group-hover:bg-gray-light',
-                    isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background'
+                    isPremade
+                        ? 'bg-figmaColors-primary-outlined-hover-background fill-figmaColors-accent-secondary group-hover:!bg-figmaColors-accent-secondary group-hover:!fill-white'
+                        : 'bg-figmaColors-secondary-outlined-hover-background fill-figmaColors-secondary-outlined-resting-border group-hover:!bg-teal group-hover:!fill-white'
                 )}
             >
-                <Icon
-                    name={iconName}
-                    size={26}
-                    className="group-hover:fill-gray-medium"
-                    style={{ fill: isPremade ? '#3EAAAF' : 'rgba(63, 81, 181, 0.5)' }}
-                />
+                <Icon name={iconName} size={26} style={{ fill: 'inherit' }} />
+            </div>
+            <div className={isPopup ? 'flex flex-col text-left ml-4' : 'flex flex-col text-center items-center'}>
+                <div className="font-bold text-base text-figmaColors-text-primary">{title}</div>
+                <div className={cn('text-disabled-test text-figmaColors-text-primary text-base', isPopup ? 'w-full' : 'mt-2 w-2/3 text-center')}>
+                    {description}
+                </div>
             </div>
-            <div className="font-bold mb-2 text-figmaColors-text-primary">{title}</div>
-            <div className="text-disabled-test w-2/3 text-center text-figmaColors-text-primary">{description}</div>
         </div>
     );
 }
 
-function AddMetricContainer({ siteId }: any) {
+function AddMetricContainer({ siteId, isPopup }: any) {
     const { showModal } = useModal();
     const [categories, setCategories] = React.useState<Record<string, any>[]>([]);
     const { dashboardStore } = useStore();
@@ -78,20 +81,26 @@ function AddMetricContainer({ siteId }: any) {
             { right: true }
         );
     };
+
+    const classes = isPopup
+        ? 'bg-white border rounded p-4 grid grid-rows-2 gap-4'
+        : 'bg-white border border-dashed hover:!border-gray-medium rounded p-8 grid grid-cols-2 gap-8';
     return (
-        <div style={{ borderColor: 'rgb(238, 238, 238)', height: 285 }} className="bg-white border border-dashed rounded p-8 grid grid-cols-2 gap-8">
+        <div style={{ borderColor: 'rgb(238, 238, 238)', height: isPopup ? undefined : 300 }} className={classes}>
             <AddMetricButton
                 title="+ Add custom Metric"
                 description="Metrics that are manually created by you or your team"
                 iconName="bar-pencil"
                 onClick={onAddCustomMetrics}
                 isPremade
+                isPopup={isPopup}
             />
             <AddMetricButton
                 title="+ Add Ready-Made Metric"
                 description="Curated metrics predfined by OpenReplay."
                 iconName="grid-check"
                 onClick={onAddPredefinedMetrics}
+                isPopup={isPopup}
             />
         </div>
     );

frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx

@@ -83,20 +83,13 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
                         <h1 className="text-2xl">{title}</h1>
                         <div className="text-disabled-text">{description}</div>
                     </div>
-                    {title.includes('Custom') ? (
-                        <div>
-                            <span className="text-md link" onClick={onCreateNew}>
-                                + Create new
-                            </span>
-                        </div>
-                    ) : (
-                        <div>
+
+                    <div className="flex items-center">
                         Don’t find the one you need?
-                            <span className="text-md link ml-2" onClick={onCreateNew}>
+                        <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
                             + Create custom metric
-                            </span>
+                        </Button>
                     </div>
-                    )}
                 </div>
 
                 <div className="flex px-8 h-full" style={{ maxHeight: 'calc(100vh - 160px)' }}>

frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js

@@ -29,8 +29,7 @@ function handleClickOutside(e) {
 
 document.addEventListener('click', handleClickOutside);
 
-
-export default React.memo(function OutsideClickDetectingDiv({ onClickOutside, children, ...props}) {
+function OutsideClickDetectingDiv({ onClickOutside, children, ...props}) {
   const ref = useRef(null);
   useLayoutEffect(() => {
     function handleClickOutside(event) {
@@ -44,7 +43,6 @@ export default React.memo(function OutsideClickDetectingDiv({ onClickOutside, ch
   }, [ ref ]);
 
   return <div ref={ref} {...props}>{children}</div>;
-});
-
-
+}
 
+export default React.memo(OutsideClickDetectingDiv);

frontend/app/styles/general.css

@@ -278,6 +278,9 @@ p {
 .tippy-tooltip.openreplay-theme .tippy-backdrop {
   background-color: $tealx;
 }
+.tippy-tooltip[data-theme~='nopadding'], .nopadding-theme {
+  padding: 0!important
+}
 
 @media print {
   .no-print {