UI Improvements

frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx

@@ -7,7 +7,7 @@ import {
   edit as editFilter,
   fetchFilterSearch,
 } from 'Duck/liveSearch';
-import { Button } from 'UI';
+import { Button } from 'antd';
 import { useModal } from 'App/components/Modal';
 import SessionSearchField from 'Shared/SessionSearchField';
 import { MODULES } from 'Components/Client/Modules';
@@ -42,11 +42,11 @@ function AssistSearchField(props: Props) {
         <SessionSearchField />
       </div>
       {props.isEnterprise && props.modules.includes(MODULES.OFFLINE_RECORDINGS)
-       ? <Button variant="outline" onClick={showRecords}>Training Videos</Button> : null
+       ? <Button type="primary" ghost onClick={showRecords}>Training Videos</Button> : null
       }
-      <Button variant="outline" onClick={showStats} disabled={!props.modules.includes(MODULES.ASSIST_STATS) || !props.modules.includes(MODULES.ASSIST)}>Co-Browsing Reports</Button>
+      <Button type="primary" ghost onClick={showStats} disabled={!props.modules.includes(MODULES.ASSIST_STATS) || !props.modules.includes(MODULES.ASSIST)}>Co-Browsing Reports</Button>
       <Button
-        variant="text-primary"
+        type="link"
         className="ml-auto font-medium"
         disabled={!hasFilters && !hasEvents}
         onClick={() => props.clearSearch()}

frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Icon } from 'UI';
+import {Input} from 'antd';
 import { debounce } from 'App/utils';
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
@@ -22,11 +23,12 @@ function AlertsSearch() {
   return (
     <div className="relative">
       <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
-      <input
+      <Input.Search
         value={inputValue}
+        allowClear
         name="alertsSearch"
-        className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
+        className="w-full"
-        placeholder="Filter by title"
+        placeholder="Filter by alert title"
         onChange={write}
       />
     </div>

frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
-import { Button, PageTitle, Icon, Link } from 'UI';
+import { PageTitle, Icon, Link } from 'UI';
+import { Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import withPageTitle from 'HOCs/withPageTitle';
 import { withSiteId, alertCreate } from 'App/routes';
 
@@ -32,7 +34,14 @@ function AlertsView({ siteId }: IAlertsView) {
                     <PageTitle title="Alerts" />
                 </div>
                 <div className="ml-auto flex items-center">
-                    <Link to={withSiteId(alertCreate(), siteId)}><Button variant="primary">New Alert</Button></Link>
+                    <Link to={withSiteId(alertCreate(), siteId)}>
+                    <Button 
+                        type="primary" 
+                        icon={<PlusOutlined />}>
+                            Create Alert
+                    </Button>
+
+                    </Link>
                     <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
                         <AlertsSearch />
                     </div>

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

@@ -29,7 +29,7 @@ function DashboardSearch() {
       allowClear
       name="dashboardsSearch"
       className="w-full"
-      placeholder="Filter by title or description"
+      placeholder="Filter by dashboard title"
       onChange={write}
       onSearch={(value) => dashboardStore.updateKey('filter', { ...dashboardStore.filter, query: value })}
     />

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import {PageTitle, Button, Toggler, Icon} from "UI";
+import {PageTitle, Toggler, Icon} from "UI";
-import {Segmented} from 'antd';
+import {Segmented, Button} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import MetricsSearch from '../MetricsSearch';
 import Select from 'Shared/Select';
 import {useStore} from 'App/mstore';
@@ -24,10 +25,11 @@ function MetricViewHeader({siteId}: { siteId: string }) {
                     <PageTitle title='Cards' className=''/>
                 </div>
                 <div className='ml-auto flex items-center'>
-                    <Button variant='primary'
+                    <Button type='primary'
                         // onClick={() => showModal(<AddCardModal siteId={siteId}/>, {right: true})}
                             onClick={() => setShowAddCardModal(true)}
-                    >New Card</Button>
+                            icon={<PlusOutlined />}
+                    >Create Card</Button>
                     <div className='ml-4 w-1/4' style={{minWidth: 300}}>
                         <MetricsSearch/>
                     </div>
@@ -119,7 +121,8 @@ function ListViewToggler() {
     const listView = useObserver(() => metricStore.listView);
     return (
         <div className='flex items-center'>
-            <Segmented
+            <Segmented 
+                size='small'
                 options={[
                     {
                         label: <div className={'flex items-center gap-2'}>

frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx

@@ -2,6 +2,7 @@ import { useObserver } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import { useStore } from 'App/mstore';
 import { Icon } from 'UI';
+import {Input} from 'antd';
 import { debounce } from 'App/utils';
 
 let debounceUpdate: any = () => {};
@@ -22,12 +23,12 @@ function MetricsSearch() {
 
   return useObserver(() => (
     <div className="relative">
-      <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
+      <Input.Search
-      <input
         value={query}
+        allowClear
         name="metricsSearch"
-        className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
+        className="w-full"
-        placeholder="Filter by title and owner"
+        placeholder="Filter by title or owner"
         onChange={write}
       />
     </div>

frontend/app/components/UsabilityTesting/UsabilityTesting.tsx

@@ -8,7 +8,7 @@ import AnimatedSVG from 'Shared/AnimatedSVG';
 import { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { Loader, NoContent, Pagination, Link, Icon } from 'UI';
 import { checkForRecent, getDateFromMill } from 'App/date';
-import { ArrowRightOutlined } from '@ant-design/icons';
+import { ArrowRightOutlined, PlusOutlined } from '@ant-design/icons';
 import { useHistory, useParams } from 'react-router-dom';
 import { withSiteId, usabilityTestingEdit, usabilityTestingView } from 'App/routes';
 import { debounce } from 'App/utils';
@@ -110,9 +110,10 @@ function TestsTable() {
             Usability Tests
           </h1>
           <div className={'ml-auto'} />
-          <Button type="primary" onClick={openModal}>
+          <Button type="primary" icon={<PlusOutlined />} onClick={openModal}>
             Create Usability Test
           </Button>
+
           <Search
             placeholder="Filter by title"
             allowClear

frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx

@@ -54,7 +54,7 @@ function SessionSearchField(props: Props) {
         id="search"
         type="search"
         autoComplete="off"
-        className="hover:border-gray-medium text-lg placeholder-lg"
+        className="hover:border-gray-medium text-lg placeholder-lg h-9 shadow-sm"
       />
 
       {showModal && (