Dashboards UI Improvements.

2024-06-28 01:12:24 +05:30 · 2024-06-28 01:12:24 +05:30 · b7b9a897a7
commit b7b9a897a7
parent 13631765e4
9 changed files with 40 additions and 36 deletions
--- a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
+++ b/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" style={{height: '80px'}}>
-                                <Grid2x2CheckIcon style={{fontSize: '24px', color: '#394EFF'}}/>
-                                <Typography.Text strong>Add from library</Typography.Text>
-                                {/*<p>Select from 12 available</p>*/}
-                            </div>
-                        </Card>
+                        <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)}>
+                            <GalleryVertical style={{fontSize: '24px', color: '#394EFF'}}/>
+                            <Typography.Text strong>Add from library</Typography.Text>
+                            {/*<p>Select from 12 available</p>*/}
+                        </div>
+                        
                    </Col>
                    <Col span={12}>
-                        <Card hoverable onClick={() => onClick(false)}>
-                            <div className="flex flex-col items-center justify-center" style={{height: '80px'}}>
-                                <Plus style={{fontSize: '24px', color: '#394EFF'}}/>
-                                <Typography.Text strong>Create New Card</Typography.Text>
-                            </div>
-                        </Card>
+                        <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)}>
+                            <Plus style={{fontSize: '24px', color: '#394EFF'}}/>
+                            <Typography.Text strong>Create New Card</Typography.Text>
+                        </div>
                    </Col>
                </Row>
            </Modal>
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/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>
--- a/frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx
+++ b/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>
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
+++ b/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>
--- a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
+++ b/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: 'Remove',
+            label: 'Delete',
            icon: <TrashIcon size={16}/>,
            onClick: () => {
                Modal.confirm({
--- a/frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx
+++ b/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>
          </>
        )}
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/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">
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/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>
-                    <div className="rounded px-2 py-1 bg-red-lightest color-red">
-                        <span className="text-xl mr-2 font-medium">{funnel.lostConversions}</span>
-                        <span className="text-sm">({funnel.lostConversionsPercentage}%)</span>
-                    </div>
+                    <span className="text-base font-medium mr-2">Lost conversion</span>
+                    <Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
+                        <Tag bordered={false} color="red" className='text-lg font-medium rounded-lg'>
+                        {funnel.lostConversions}
+                        </Tag>
+                    </Tooltip>
                </div>
                <div className="mx-3" />
                <div className="flex items-center">
-                    <span className="text-xl mr-2">Total conversion</span>
-                    <div className="rounded px-2 py-1 bg-tealx-lightest color-tealx">
-                        <span className="text-xl mr-2 font-medium">{funnel.totalConversions}</span>
-                        <span className="text-sm">({funnel.totalConversionsPercentage}%)</span>
-                    </div>
+                    <span className="text-base font-medium mr-2">Total conversion</span>
+                    <Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
+                        <Tag bordered={false} color="cyan" className='text-lg font-medium rounded-lg'>
+                        {funnel.totalConversions}
+                        </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>}
--- a/frontend/app/components/Signup/SignupForm/SignupForm.tsx
+++ b/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'>