feat(ui) - cards - fixes and ui improvements

frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx

@@ -10,8 +10,8 @@ function AddCardModal(props: Props) {
   return (
     <>
       <Modal.Header title="Add Card" />
-      <Modal.Content className="p-0">
-        <MetricTypeList siteId={props.siteId} dashboardId={props.dashboardId} />
+      <Modal.Content className="px-3 pb-6">
+        <MetricTypeList siteId={props.siteId} dashboardId={parseInt(props.dashboardId)} />
       </Modal.Content>
     </>
   );

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

@@ -3,7 +3,8 @@ import { Icon, Checkbox, Tooltip } from 'UI';
 import { checkForRecent } from 'App/date';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
-import { TYPES, TIMESERIES, TABLE, CLICKMAP, FUNNEL, ERRORS, RESOURCE_MONITORING } from 'App/constants/card';
+import { TYPES } from 'App/constants/card';
+import cn from 'classnames';
 
 interface Props extends RouteComponentProps {
   metric: any;
@@ -32,7 +33,10 @@ function MetricTypeIcon({ type }: any) {
 function MetricListItem(props: Props) {
   const { metric, history, siteId, selected, toggleSelection = () => {}, disableSelection = false } = props;
 
-  const onItemClick = () => {
+  const onItemClick = (e: React.MouseEvent) => {
+    if (!disableSelection) {
+      return toggleSelection(e);
+    }
     const path = withSiteId(`/metrics/${metric.metricId}`, siteId);
     history.push(path);
   };
@@ -55,7 +59,7 @@ function MetricListItem(props: Props) {
         
         <div className="flex items-center">
           <MetricTypeIcon type={metric.metricType} />
-          <div className="link capitalize-first">{metric.name}</div>
+          <div className={ cn("capitalize-first", { "link" : disableSelection })}>{metric.name}</div>
         </div>
       </div>
       <div className="col-span-4">{metric.owner}</div>

frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx

@@ -21,15 +21,16 @@ function MetricTypeItem(props: Props) {
   } = props;
   return (
     <div
-      className="flex items-start p-4 hover:bg-active-blue cursor-pointer group hover-color-teal"
+      className="rounded color-gray-darkest flex items-start border border-transparent p-4 hover:bg-active-blue hover:!border-active-blue-border cursor-pointer group hover-color-teal"
       onClick={onClick}
     >
       <div className="pr-4 pt-1">
-        <Icon name={icon} size="20" />
+        {/* @ts-ignore */}
+        <Icon name={icon} size="20" color="gray-dark" />
       </div>
       <div className="flex flex-col items-start text-left">
-        <div className="text-base group-hover:color-teal">{title}</div>
-        <div className="text-xs">{description}</div>
+        <div className="text-base">{title}</div>
+        <div className="text-sm color-gray-medium font-normal">{description}</div>
       </div>
     </div>
   );

frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx

@@ -50,7 +50,7 @@ function MetricViewHeader() {
       </div>
       <div className="text-base text-disabled-text flex items-center px-6">
         <Icon name="info-circle-fill" className="mr-2" size={16} />
-        Create custom Metrics to capture key interactions and track KPIs.
+        Create custom Cards to capture key interactions and track KPIs.
       </div>
     </div>
   );

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

@@ -18,9 +18,9 @@ function GridView(props: Props) {
             key={metric.metricId}
             widget={metric}
             active={selectedList.includes(metric.metricId)}
-            isTemplate={true}
+            // isTemplate={true}
             isWidget={metric.metricType === 'predefined'}
-            onClick={() => toggleSelection(parseInt(metric.metricId))}
+            // onClick={() => toggleSelection(parseInt(metric.metricId))}
           />
         </React.Fragment>
       ))}

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

@@ -8,26 +8,28 @@ interface Props {
   selectedList: any;
   toggleSelection?: (metricId: any) => void;
   toggleAll?: (e: any) => void;
-  disableSelection?: boolean
+  disableSelection?: boolean;
+  allSelected?: boolean
 }
 function ListView(props: Props) {
-  const { siteId, list, selectedList, toggleSelection, disableSelection = false } = props;
+  const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false } = props;
   return (
     <div>
       <div className="grid grid-cols-12 py-2 font-medium px-6">
-        {!disableSelection && (
-          <div className="col-span-4 flex items-center">
-          <Checkbox
-            name="slack"
-            className="mr-4"
-            type="checkbox"
-            checked={selectedList.length === list.length}
-            // onClick={() => selectedList(list.map((i: any) => i.metricId))}
-            onClick={props.toggleAll}
-          />
+        <div className="col-span-4 flex items-center">
+          {!disableSelection && (
+            <Checkbox
+              name="slack"
+              className="mr-4"
+              type="checkbox"
+              checked={allSelected}
+              // onClick={() => selectedList(list.map((i: any) => i.metricId))}
+              onClick={props.toggleAll}
+            />
+          )}
           <span>Title</span>
         </div>
-        )}
+
         <div className="col-span-4">Owner</div>
         <div className="col-span-2">Visibility</div>
         <div className="col-span-2 text-right">Last Modified</div>

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

@@ -76,6 +76,7 @@ function MetricsList({
           list={sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize)}
           selectedList={selectedMetrics}
           toggleSelection={toggleMetricSelection}
+          allSelected={list.length === selectedMetrics.length}
           toggleAll={({ target: { checked, name } }) =>
             setSelectedMetrics(checked ? list.map((i: any) => i.metricId) : [])
           }
@@ -93,7 +94,7 @@ function MetricsList({
         <div className="text-disabled-text">
           Showing{' '}
           <span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out
-          of <span className="font-semibold">{list.length}</span> metrics
+          of <span className="font-semibold">{list.length}</span> cards
         </div>
         <Pagination
           page={metricStore.page}

frontend/app/styles/general.css

@@ -359,4 +359,14 @@ p {
 
 .dev-row  {
   transition: all 0.5s;
+}
+
+.hover-color-teal:hover {
+  color: $teal !important;
+  & div {
+    color: $teal !important;
+  }
+  & svg {
+    fill: $teal !important;
+  }
 }