fix(ui): metric rows, paddings, dashboard nav link

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 px-2 font-medium">
+                <div className="grid grid-cols-12 py-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

@@ -22,14 +22,14 @@ function DashboardListItem(props: Props) {
         history.push(path);
     };
     return (
-        <div className="hover:bg-active-blue px-2 cursor-pointer" onClick={onItemClick}>
+        <div className="hover:bg-active-blue 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 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 className="color-blue capitalize-first">{dashboard.name}</div>
                     </div>
                 </div>
                 {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}

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

@@ -21,10 +21,10 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
     }
 
     return (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
-                    <PageTitle title="Dashboards" className="" />
+                    <PageTitle title="Dashboards" />
                 </div>
                 <Button variant="primary" onClick={onAddDashboardClick}>Create Dashboard</Button>
                 <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -1,27 +1,13 @@
 import React from 'react';
-import { Icon, Link, Popup } from 'UI';
+import { Icon, Link } from 'UI';
 import { checkForRecent } from 'App/date';
 import { Tooltip } from 'react-tippy'
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { withSiteId } from 'App/routes';
 
-interface Props {
+interface Props extends RouteComponentProps {
     metric: any;
-}
-
-function DashboardLink({ dashboards}: any) {
-    return (
-        dashboards.map((dashboard: any) => (
-            <React.Fragment key={dashboard.dashboardId}>
-            <Link to={`/dashboard/${dashboard.dashboardId}`}>
-                <div className="flex items-center mb-1 py-1">
-                    <div className="mr-2">
-                        <Icon name="circle-fill" size={4} color="gray-medium" />
-                    </div>
-                    <span className="link leading-4 capitalize-first">{dashboard.name}</span>
-                </div>
-            </Link>
-            </React.Fragment>
-        ))
-    );
+    siteId: string;
 }
 
 function MetricTypeIcon({ type }: any) {
@@ -49,18 +35,23 @@ function MetricTypeIcon({ type }: any) {
     )
 }
 
-function MetricListItem(props: Props) {
-    const { metric } = props;
 
-    
+
+function MetricListItem(props: Props) {
+    const { metric, history, siteId } = props;
+
+    const onItemClick = () => {
+        const path = withSiteId(`/metrics/${metric.metricId}`, siteId);
+        history.push(path);
+    };
     return (
-        <div className="grid grid-cols-12 py-4 border-t select-none">
+        <div className="grid grid-cols-12 py-4 border-t select-none hover:bg-active-blue cursor-pointer" onClick={onItemClick}>
             <div className="col-span-3 flex items-start">
                 <div className="flex items-center">
                     <MetricTypeIcon type={metric.metricType} />
-                    <Link to={`/metrics/${metric.metricId}`} className="link capitalize-first">
+                    <div className="color-blue capitalize-first">
                         {metric.name}
-                    </Link>
+                    </div>
                 </div>
             </div>
             <div className="col-span-3">{metric.owner}</div>
@@ -75,4 +66,4 @@ function MetricListItem(props: Props) {
     );
 }
 
-export default MetricListItem;
+export default withRouter(MetricListItem);

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -8,7 +8,7 @@ import { sliceListPerPage } from 'App/utils';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { IWidget } from 'App/mstore/types/widget';
 
-function MetricsList() {
+function MetricsList({ siteId }: { siteId: string }) {
     const { metricStore } = useStore();
     const metrics = useObserver(() => metricStore.metrics);
     const metricsSearch = useObserver(() => metricStore.metricsSearch);
@@ -46,7 +46,7 @@ function MetricsList() {
 
                 {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
                     <React.Fragment key={metric.metricId}>
-                        <MetricListItem metric={metric} />
+                        <MetricListItem metric={metric} siteId={siteId} />
                     </React.Fragment>
                 ))}
             </div>

frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx

@@ -9,14 +9,14 @@ import { useObserver } from 'mobx-react-lite';
 interface Props{
     siteId: number;
 }
-function MetricsView(props: Props) {
+function MetricsView({ siteId }: Props) {
     const { metricStore } = useStore();
 
     React.useEffect(() => {
         metricStore.fetchList();
     }, []);
     return useObserver(() => (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
@@ -30,7 +30,7 @@ function MetricsView(props: Props) {
                 <Icon name="info-circle-fill" className="mr-2" size={16} />
                 Create custom Metrics to capture key interactions and track KPIs.
             </div>
-            <MetricsList />
+            <MetricsList siteId={siteId} />
         </div>
     ));
 }

frontend/app/components/Header/Header.js

@@ -4,6 +4,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import cn from 'classnames';
 import { 
   sessions,
+  metrics,
   assist,
   client,
   dashboard,
@@ -27,6 +28,7 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 const DASHBOARD_PATH = dashboard();
+const METRICS_PATH = metrics();
 const SESSIONS_PATH = sessions();
 const ASSIST_PATH = assist();
 const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
@@ -94,6 +96,9 @@ const Header = (props) => {
         to={ withSiteId(DASHBOARD_PATH, siteId) }
         className={ styles.nav }
         activeClassName={ styles.active }
+        isActive={ (_, location) => {
+          return location.pathname.includes(DASHBOARD_PATH) || location.pathname.includes(METRICS_PATH);
+        }}
       >         
         <span>{ 'Dashboards' }</span>
       </NavLink>