From 73c45dae3e1e3dc0546f2553636bfd0a929027bd Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 11 Aug 2022 13:50:07 +0200
Subject: [PATCH] fix(player): add border to dashboards, fix font size and
 tooltip

---
 .../DashboardList/DashboardsView.tsx          |  8 +++---
 .../MetricListItem/MetricListItem.tsx         | 27 +++++++------------
 .../components/MetricsView/MetricsView.tsx    |  8 +++---
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
index 10bbfc50d..75b4aaf4e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -21,18 +21,18 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
     }
 
     return (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Dashboards" className="" />
                 </div>
                 <Button variant="primary" onClick={onAddDashboardClick}>Create Dashboard</Button>
-                <div className="ml-auto w-1/4">
+                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
                     <DashboardSearch />
                 </div>
             </div>
-            <div className="text-xl text-disabled-text flex items-center">
-                <Icon name="info-circle-fill" className="mr-2" size={18} />
+            <div className="text-base text-disabled-text flex items-center">
+                <Icon name="info-circle-fill" className="mr-2" size={16} />
                 A dashboard is a custom visualization using your OpenReplay data.
             </div>
             <DashboardList />
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 52747a86c..18f580851 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Icon, NoContent, Label, Link, Pagination, Popup } from 'UI';
-import { checkForRecent, formatDateTimeDefault, convertTimestampToUtcTimestamp } from 'App/date';
-import { getIcon } from 'react-toastify/dist/components';
+import { Icon, Link, Popup } from 'UI';
+import { checkForRecent } from 'App/date';
+import { Tooltip } from 'react-tippy'
 
 interface Props {
     metric: any;
@@ -25,19 +25,6 @@ function DashboardLink({ dashboards}: any) {
 }
 
 function MetricTypeIcon({ type }: any) {
-    const PopupWrapper = (props: any) => {
-        return (
-            <Popup
-                content={<div className="capitalize">{type}</div>}
-                position="top center"
-                on="hover"
-                hideOnScroll={true}
-            >
-                {props.children}
-            </Popup>
-        );
-    }
-
     const getIcon = () => {
         switch (type) {
             case 'funnel':
@@ -50,11 +37,15 @@ function MetricTypeIcon({ type }: any) {
     }
 
     return (
-        <PopupWrapper>
+        <Tooltip
+            html={<div className="capitalize">{type}</div>}
+            position="top"
+            arrow
+        >
             <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
                 <Icon name={getIcon()} size="16" color="tealx" />
             </div>
-        </PopupWrapper>
+        </Tooltip>
     )
 }
 
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index abdf2e5e2..afe0dd337 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -16,18 +16,18 @@ function MetricsView(props: Props) {
         metricStore.fetchList();
     }, []);
     return useObserver(() => (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
                 </div>
                 <Link to={'/metrics/create'}><Button variant="primary">Create Metric</Button></Link>
-                <div className="ml-auto w-1/4">
+                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
                     <MetricsSearch />
                 </div>
             </div>
-            <div className="text-xl text-disabled-text flex items-center">
-                <Icon name="info-circle-fill" className="mr-2" size={18} />
+            <div className="text-base text-disabled-text flex items-center">
+                <Icon name="info-circle-fill" className="mr-2" size={16} />
                 Create custom Metrics to capture key interactions and track KPIs.
             </div>
             <MetricsList />