Dashboards UI Improvements.

frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Card, Col, Modal, Row, Typography} from "antd";
-import {Grid2x2CheckIcon, Plus} from "lucide-react";
+import {GalleryVertical, Plus} from "lucide-react";
 import NewDashboardModal from "Components/Dashboard/components/DashboardList/NewDashModal";
 import {useStore} from "App/mstore";
 
@@ -33,24 +33,22 @@ function AddCardSelectionModal(props: Props) {
                 open={props.open}
                 footer={null}
                 onCancel={props.onClose}
+                className='addCard'
             >
                 <Row gutter={16} justify="center">
                     <Col span={12}>
-                        <Card hoverable onClick={() => onClick(true)}>
+                        <div className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" style={{height: '80px'}} onClick={() => onClick(true)}>
-                            <div className="flex flex-col items-center justify-center" style={{height: '80px'}}>
+                            <GalleryVertical style={{fontSize: '24px', color: '#394EFF'}}/>
-                                <Grid2x2CheckIcon style={{fontSize: '24px', color: '#394EFF'}}/>
+                            <Typography.Text strong>Add from library</Typography.Text>
-                                <Typography.Text strong>Add from library</Typography.Text>
+                            {/*<p>Select from 12 available</p>*/}
-                                {/*<p>Select from 12 available</p>*/}
+                        </div>
-                            </div>
+                        
-                        </Card>
                     </Col>
                     <Col span={12}>
-                        <Card hoverable onClick={() => onClick(false)}>
+                        <div className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" style={{height: '80px'}} onClick={() => onClick(false)}>
-                            <div className="flex flex-col items-center justify-center" style={{height: '80px'}}>
+                            <Plus style={{fontSize: '24px', color: '#394EFF'}}/>
-                                <Plus style={{fontSize: '24px', color: '#394EFF'}}/>
+                            <Typography.Text strong>Create New Card</Typography.Text>
-                                <Typography.Text strong>Create New Card</Typography.Text>
+                        </div>
-                            </div>
-                        </Card>
                     </Col>
                 </Row>
             </Modal>

frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx

@@ -89,7 +89,7 @@ function CardIssues() {
     };
 
   return useObserver(() => (
-    <div className='my-8 bg-white rounded p-4 border'>
+    <div className='bg-white rounded p-4 border'>
       <div className='flex justify-between'>
         <div className='flex items-center'>
           <h1 className='font-medium text-2xl'>Issues</h1>

frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx

@@ -41,7 +41,7 @@ function CardUserList(props: RouteComponentProps<Props>) {
     }, [userId]);
 
     return (
-        <div className="my-8 bg-white rounded p-4 border">
+        <div className="bg-white rounded p-4 border">
             <div className="flex justify-between">
                 <h1 className="font-medium text-2xl">Returning users between</h1>
                 <div>

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

@@ -57,7 +57,7 @@ function FunnelIssues() {
     }, [stages.length, drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]);
 
     return useObserver(() => (
-        <div className="my-8 bg-white rounded p-4 border">
+        <div className="bg-white rounded p-4 border">
             <div className="flex">
                 <h2 className="font-medium text-xl">Most significant issues <span className="font-normal">identified in this funnel</span></h2>
             </div>

frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx

@@ -1,7 +1,7 @@
 import {useHistory} from "react-router";
 import {useStore} from "App/mstore";
 import {useObserver} from "mobx-react-lite";
-import {Button, Drawer, Dropdown, MenuProps, message, Modal} from "antd";
+import {Button, Dropdown, MenuProps, message, Modal} from "antd";
 import {BellIcon, EllipsisVertical, TrashIcon} from "lucide-react";
 import {toast} from "react-toastify";
 import React from "react";
@@ -36,8 +36,7 @@ const CardViewMenu = () => {
         },
         {
             key: 'remove',
-            danger: true,
+            label: 'Delete',
-            label: 'Remove',
             icon: <TrashIcon size={16}/>,
             onClick: () => {
                 Modal.confirm({

frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx

@@ -76,7 +76,7 @@ function ResetPasswordRequest(props: Props) {
               />
             </Form.Field>
             <Button type="submit" variant="primary" className="mt-4 rounded-lg" loading={loading} disabled={loading}>
-              Email password reset link
+              Email Password Reset Link
             </Button>
           </>
         )}

frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx

@@ -54,7 +54,7 @@ function FunnelBar(props: Props) {
                         cursor: 'pointer',
                     }}
                     onClick={() => focusStage?.(index! - 1, filter.isActive)}
-                    className={'hover:border border-red-lightest'}
+                    className={'hover:opacity-75'}
                 />
             </div>
             <div className="flex justify-between py-2">

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import stl from './FunnelWidget.module.css';
 import { observer } from 'mobx-react-lite';
 import { NoContent, Icon } from 'UI';
+import { Tag, Tooltip } from 'antd';
 import { useModal } from 'App/components/Modal';
 
 interface Props {
@@ -90,19 +91,21 @@ function FunnelWidget(props: Props) {
             </div>
             <div className="flex items-center pb-4">
                 <div className="flex items-center">
-                    <span className="text-xl mr-2">Lost conversion</span>
+                    <span className="text-base font-medium mr-2">Lost conversion</span>
-                    <div className="rounded px-2 py-1 bg-red-lightest color-red">
+                    <Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
-                        <span className="text-xl mr-2 font-medium">{funnel.lostConversions}</span>
+                        <Tag bordered={false} color="red" className='text-lg font-medium rounded-lg'>
-                        <span className="text-sm">({funnel.lostConversionsPercentage}%)</span>
+                        {funnel.lostConversions}
-                    </div>
+                        </Tag>
+                    </Tooltip>
                 </div>
                 <div className="mx-3" />
                 <div className="flex items-center">
-                    <span className="text-xl mr-2">Total conversion</span>
+                    <span className="text-base font-medium mr-2">Total conversion</span>
-                    <div className="rounded px-2 py-1 bg-tealx-lightest color-tealx">
+                    <Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
-                        <span className="text-xl mr-2 font-medium">{funnel.totalConversions}</span>
+                        <Tag bordered={false} color="cyan" className='text-lg font-medium rounded-lg'>
-                        <span className="text-sm">({funnel.totalConversionsPercentage}%)</span>
+                        {funnel.totalConversions}
-                    </div>
+                        </Tag>
+                    </Tooltip>
                 </div>
             </div>
             {funnel.totalDropDueToIssues > 0 && <div className="flex items-center mb-2"><Icon name="magic" /> <span className="ml-2">{funnel.totalDropDueToIssues} sessions dropped due to issues.</span></div>}

frontend/app/components/Signup/SignupForm/SignupForm.tsx

@@ -93,7 +93,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
       <div className='m-10 '>
         <img src='/assets/logo.svg' width={200} alt='Logo' />
       </div>
-      <Form onSubmit={onSubmit} className='bg-white border rounded' style={{ maxWidth: '420px' }}>
+      <Form onSubmit={onSubmit} className='bg-white border rounded-lg shadow-sm' style={{ maxWidth: '420px' }}>
         <div className='mb-8'>
           <h2 className='text-center text-2xl font-medium mb-6 border-b p-5 w-full'>
             Create Account
@@ -134,6 +134,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
                 onChange={write}
                 required={true}
                 icon='envelope'
+                className='rounded-lg'
               />
             </Form.Field>
             <Form.Field>
@@ -146,6 +147,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
                 onChange={write}
                 required={true}
                 icon='key'
+                className='rounded-lg'
               />
             </Form.Field>
             <Form.Field>
@@ -157,6 +159,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
                 onChange={write}
                 required={true}
                 icon='user-alt'
+                className='rounded-lg'
               />
             </Form.Field>
             <Form.Field>
@@ -168,13 +171,14 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
                 onChange={write}
                 required={true}
                 icon='buildings'
+                className='rounded-lg'
               />
             </Form.Field>
 
             {passwordError && (
               // <Alert type='error' message={PASSWORD_POLICY} banner icon={null} />
               <Alert
-                className='my-3'
+                className='my-3 rounded-lg'
                 // message="Error Text"
                 description={PASSWORD_POLICY}
                 type='error'
@@ -182,14 +186,14 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
             )}
             {errors && errors.length && (
               <Alert
-                className='my-3'
+                className='my-3 rounded-lg'
                 // message="Error Text"
                 description={errors[0]}
                 type='error'
               />
             )}
 
-            <Button type='submit' variant='primary' loading={loading} className='w-full'>
+            <Button type='submit' variant='primary' loading={loading} className='w-full rounded-lg'>
               Create Account
             </Button>
             <div className='my-6'>