Funnel UI improvements

frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx

@@ -61,7 +61,7 @@ function FunnelIssues() {
             <div className="flex">
                 <h2 className="font-medium text-xl">Most significant issues <span className="font-normal">identified in this funnel</span></h2>
             </div>
-            <div className="my-6 flex justify-between items-start">
+            <div className="my-6 flex justify-between items-center">
                 <FunnelIssuesDropdown />
                 <div className="flex-shrink-0">
                     <FunnelIssuesSort />

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx

@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
 import Select from 'Shared/Select'
 import { components } from 'react-select';
 import { Icon } from 'UI';
+import { Button } from 'antd';
+import { FunnelPlotOutlined } from '@ant-design/icons';
 import FunnelIssuesSelectedFilters from '../FunnelIssuesSelectedFilters';
 import { useStore } from 'App/mstore';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@@ -59,7 +61,7 @@ function FunnelIssuesDropdown() {
     }
 
     return (
-        <div className="flex items-start">
+        <div className="flex items-center gap-2">
             <Select
                 menuIsOpen={isOpen}
                 // onMenuOpen={() => setIsOpen(true)}
@@ -69,8 +71,8 @@ function FunnelIssuesDropdown() {
                 styles={{
                     control: (provided: any) => ({
                         ...provided,
-                        border: 'none',
-                        boxShadow: 'none',
+                        border:'transparent',
+                        borderColor:'transparent',
                         backgroundColor: 'transparent',
                         minHeight: 'unset',
                     }),
@@ -92,14 +94,16 @@ function FunnelIssuesDropdown() {
                         >
                             <components.Control {...props}>
                                 { children }
-                                <button
+                                <Button
                                     id="dd-button"
-                                    className="px-2 py-1 bg-white rounded-2xl border border-teal border-dashed color-teal flex items-center hover:bg-active-blue select-none"
+                                    className="px-2 select-none gap-0"
                                     onClick={() => setIsOpen(!isOpen)}
+                                    icon={<FunnelPlotOutlined />}
+                                    type='primary' ghost
+                                    size='small'
                                 >
-                                    <Icon name="funnel" size={16} color="teal" className="pointer-events-none" />
                                     <span className="ml-2 pointer-events-none">Issues</span>
-                                </button>
+                                </Button>
                                 
                             </components.Control>
                         </OutsideClickDetectingDiv>

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Icon } from 'UI';
+import{Tag} from 'antd';
+import {CloseOutlined} from '@ant-design/icons'
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
@@ -14,12 +16,15 @@ function FunnelIssuesSelectedFilters(props: Props) {
     return (
         <div className="flex items-center flex-wrap">
             {issuesFilter.map((option, index) => (
-                <div key={index} className="transition-all ml-2 mb-2 flex items-center border rounded-2xl bg-white select-none overflow-hidden">
-                    <span className="pl-3 color-gray-dark">{option.label}</span>
-                    <button className="ml-1 hover:bg-active-blue px-2 py-2" onClick={() => removeSelectedValue(option.value)}>
-                        <Icon name="close"/>
-                    </button>
-                </div>
+                <Tag
+                bordered = {false}
+                key={index}
+                closable
+                onClose={() => removeSelectedValue(option.value)}
+                className="select-none rounded-lg text-base gap-1 bg-indigo-50 flex items-center"
+              >
+                {option.label}
+              </Tag>
             ))}
         </div>
     );

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx

@@ -1,6 +1,7 @@
 import { useStore } from 'App/mstore';
 import React from 'react';
-import Select from 'Shared/Select';
+// import Select from 'Shared/Select';
+import { Select } from 'antd';
   
 const sortOptions = [
     { value: 'afectedUsers-desc', label: 'Affected Users (High)' },
@@ -24,12 +25,19 @@ function FunnelIssuesSort(props: Props) {
 
     return (
         <div>
-            <Select
+            {/* <Select
                 plain
                 defaultValue={sortOptions[0].value}
                 options={sortOptions}
                 alignRight={true}
                 onChange={onSortChange}
+            /> */}
+            <Select
+                className='w-60 border-0 rounded-lg'
+                defaultValue={sortOptions[0].value}
+                options={sortOptions}
+                onChange={onSortChange}
+                size='small'
             />
         </div>
     );

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Icon, Checkbox, Tooltip, confirm, Modal } from 'UI';
-import { Dropdown, Button, Input } from 'antd';
+import { Icon, Checkbox, confirm, Modal } from 'UI';
+import { Dropdown, Button, Input, Tooltip } from 'antd';
 import { checkForRecent } from 'App/date';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
@@ -26,7 +26,7 @@ function MetricTypeIcon({ type }: any) {
   }, [type]);
 
   return (
-    <Tooltip delay={0} title={<div className="capitalize">{card.title}</div>}>
+    <Tooltip title={<div className="capitalize">{card.title}</div>}>
       <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
         {card.icon && <Icon name={card.icon} size="16" color="tealx" />}
       </div>

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

@@ -86,7 +86,7 @@ function MetricsList({
         )}
 
         <div className='w-full flex items-center justify-between py-4 px-6 border-t'>
-          <div className='text-disabled-text'>
+          <div className=''>
             Showing{' '}
             <span className='font-semibold'>{Math.min(cards.length, metricStore.pageSize)}</span> out
             of <span className='font-semibold'>{cards.length}</span> cards

frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css

@@ -1,6 +1,8 @@
 .wrapper {
-  background-color: white;
-  outline: solid thin #CCC;
+  background-color: #FFF;
+  outline: solid thin #EEE;
+  border-radius: .5rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   & .body {
       display: flex;
       border-bottom: solid thin $gray-light;
@@ -11,7 +13,7 @@
 .preSelections {
     width: 130px;
     background-color: white;
-    border-right: solid thin $gray-light;
+    border-right: solid thin #EEE;
     & > div {
         padding: 8px 10px;
         width: 100%;

frontend/app/components/ui/Icons/activity.tsx

@@ -12,6 +12,7 @@ interface Props {
 function Activity(props: Props) {
     const { size = 14, width = size, height = size, fill = '' } = props;
     return (
+      
       <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/></svg>
   );
 }