From cf147ff47d078b979641294af455b8fdb103a141 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Wed, 26 Jun 2024 19:16:29 +0200
Subject: [PATCH] Various style updates in dashboards and other pages. (#2308)

* Various minor style updates

* Various style improvements

* Update ExampleCards.tsx
---
 .../Assist/RecordingsList/Recordings.tsx      |  2 +-
 .../Client/Audit/AuditView/AuditView.tsx      |  2 +-
 .../Client/CustomFields/CustomFields.js       |  2 +-
 .../Client/Integrations/Integrations.tsx      | 12 +-----
 .../app/components/Client/Modules/Modules.tsx |  4 +-
 .../Client/ProfileSettings/ProfileSettings.js |  2 +-
 .../app/components/Client/Roles/Roles.tsx     |  2 +-
 .../Client/SessionsListingSettings.tsx        |  2 +-
 .../app/components/Client/Sites/Sites.tsx     |  2 +-
 .../app/components/Client/Users/UsersView.tsx |  2 +-
 .../components/Client/Webhooks/Webhooks.tsx   |  2 +-
 .../Dashboard/Widgets/CardSessionsByList.tsx  | 10 ++---
 .../components/Alerts/AlertsView.tsx          |  2 +-
 .../DashboardList/DashboardList.tsx           | 43 ++++++-------------
 .../DashboardList/DashboardsView.tsx          |  2 +-
 .../DashboardList/NewDashModal/CreateCard.tsx |  4 +-
 .../NewDashModal/Examples/Count.tsx           |  2 +
 .../NewDashModal/Examples/ExCard.tsx          | 18 ++++----
 .../Examples/SessionsBy/ByUrl.tsx             |  1 +
 .../NewDashModal/Examples/Trend.tsx           |  7 +--
 .../NewDashModal/NewDashboardModal.tsx        | 10 ++++-
 .../DashboardList/NewDashModal/SelectCard.tsx |  5 ++-
 .../DashboardSelectionModal.tsx               |  5 ++-
 .../DashboardView/DashboardView.module.css    |  2 +-
 .../components/FilterSeries/AddStepButton.tsx |  2 +-
 .../components/FilterSeries/FilterSeries.tsx  |  2 +-
 .../Funnels/FunnelIssues/FunnelIssues.tsx     |  2 +-
 .../components/MetricsView/MetricsView.tsx    |  2 +-
 .../components/WidgetForm/CardBuilder.tsx     |  3 +-
 .../components/WidgetForm/WidgetFormNew.tsx   |  2 +-
 .../WidgetPreview/WidgetPreview.tsx           |  2 +-
 .../WidgetWrapper/WidgetWrapper.tsx           |  2 +-
 .../ForgotPassword/ForgotPassword.tsx         |  2 +-
 frontend/app/components/Login/Login.tsx       |  2 +-
 .../UsabilityTesting/UsabilityTesting.tsx     |  6 +--
 .../FilterAutoComplete/FilterAutoComplete.tsx |  2 +-
 .../Filters/FilterModal/FilterModal.tsx       |  4 +-
 .../FilterSelection/FilterSelection.tsx       |  2 +-
 .../FilterValueDropdown.tsx                   |  2 +-
 .../LiveSessionList/LiveSessionList.tsx       |  2 +-
 .../LiveSessionSearchField.tsx                |  2 +-
 .../app/components/shared/Select/Select.tsx   |  2 +-
 .../AiSessionSearchField.tsx                  |  2 +-
 .../SessionSearchField/SessionSearchField.tsx |  2 +-
 frontend/app/styles/general.css               | 22 ++++++++++
 frontend/app/styles/global.scss               |  2 +-
 46 files changed, 114 insertions(+), 102 deletions(-)

diff --git a/frontend/app/components/Assist/RecordingsList/Recordings.tsx b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
index 4da82724d..00d99e6b5 100644
--- a/frontend/app/components/Assist/RecordingsList/Recordings.tsx
+++ b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
@@ -26,7 +26,7 @@ function Recordings(props: Props) {
   };
 
   return (
-    <div style={{ maxWidth: '1360px', margin: 'auto' }} className='bg-white rounded py-4 border h-screen overflow-y-scroll'>
+    <div style={{ maxWidth: '1360px', margin: 'auto' }} className='bg-white rounded-lg py-4 border h-screen overflow-y-scroll'>
       <div className='flex items-center mb-4 justify-between px-6'>
         <div className='flex items-baseline mr-3'>
           <PageTitle title='Training Videos' />
diff --git a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
index 4a0430622..0f21bd71c 100644
--- a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
+++ b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
@@ -29,7 +29,7 @@ function AuditView() {
     }
 
     return useObserver(() => (
-        <div className="bg-white rounded-lg">
+        <div className="bg-white rounded-lg shadow-sm border">
             <div className="flex items-center mb-4 px-5 pt-5">
                 <PageTitle title={
                     <div className="flex items-center">
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index 933e6170d..01cabb532 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -68,7 +68,7 @@ function CustomFields(props) {
 
     const { fields, loading } = props;
     return (
-        <div className="p-5 bg-white rounded-lg">
+        <div className="bg-white rounded-lg shadow-sm border p-5 ">
             <div className={cn(styles.tabHeader)}>
                 <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
                 <div style={{ marginRight: '15px' }}>
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 9ed478fc4..e81a7038a 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -108,7 +108,7 @@ function Integrations(props: Props) {
 
   return (
     <>
-      <div className='mb-4 p-5 bg-white rounded-lg border'>
+      <div className='bg-white rounded-lg border shadow-sm p-5 mb-4'>
         {!hideHeader && <PageTitle title={<div>Integrations</div>} />}
 
         <IntegrationFilters onChange={onChange} activeItem={activeFilter} filters={filters} />
@@ -117,15 +117,7 @@ function Integrations(props: Props) {
       <div className='mb-4' />
 
       <div className={cn(`
-    grid 
-    gap-3 
-    auto-cols-max 
-    ${allIntegrations.length > 0 ? 'p-2' : ''}
-    grid-cols-1    // default to 1 column
-    sm:grid-cols-1 // 1 column on small screens and up
-    md:grid-cols-2 // 2 columns on medium screens and up
-    lg:grid-cols-3 // 3 columns on large screens and up
-    xl:grid-cols-3 // 3 columns on extra-large screens
+    mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3
 `)}>
         {allIntegrations.map((integration: any) => (
           <IntegrationItem
diff --git a/frontend/app/components/Client/Modules/Modules.tsx b/frontend/app/components/Client/Modules/Modules.tsx
index a0ba4c1f0..2ee7c1424 100644
--- a/frontend/app/components/Client/Modules/Modules.tsx
+++ b/frontend/app/components/Client/Modules/Modules.tsx
@@ -46,7 +46,7 @@ function Modules(props: Props) {
 
   return (
     <div>
-      <div className='bg-white rounded-lg border p-4'>
+      <div className='bg-white rounded-lg border shadow-sm p-4'>
         <h3 className='text-2xl'>Modules</h3>
         <ul className='mt-3 ml-4 list-disc'>
           <li>OpenReplay's modules are a collection of advanced features that provide enhanced functionality.</li>
@@ -54,7 +54,7 @@ function Modules(props: Props) {
         </ul>
       </div>
 
-      <div className='mt-4 grid grid-cols-3 gap-3'>
+      <div className='mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
         {modulesState.map((module) => (
           <div key={module.key} className='flex flex-col h-full'>
             <ModuleCard module={module} onToggle={onToggle} />
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
index f7a7dbaca..2b3ea3e8e 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
@@ -19,7 +19,7 @@ export default class ProfileSettings extends React.PureComponent {
     render() {
         const { account, isEnterprise } = this.props;
         return (
-            <div className="bg-white rounded-lg p-5">
+            <div className="bg-white rounded-lg  border shadow-sm p-5">
                 <PageTitle title={<div>Account</div>} />
                 <div className="flex items-center">
                     <div className={styles.left}>
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 5335e9764..470cd611b 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -65,7 +65,7 @@ function Roles(props: Props) {
     return (
         <React.Fragment>
             <Loader loading={loading}>
-                <div className="bg-white rounded-lg">
+                <div className="bg-white rounded-lg shadow-sm border">
                     <div className={cn(stl.tabHeader, 'flex items-center')}>
                         <div className="flex items-center mr-auto px-5 pt-5">
                             <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
diff --git a/frontend/app/components/Client/SessionsListingSettings.tsx b/frontend/app/components/Client/SessionsListingSettings.tsx
index d60a44774..79a78061a 100644
--- a/frontend/app/components/Client/SessionsListingSettings.tsx
+++ b/frontend/app/components/Client/SessionsListingSettings.tsx
@@ -19,7 +19,7 @@ const connector = connect(mapStateToProps);
 
 function SessionsListingSettings(props: Props) {
   return (
-    <div className='bg-white rounded-lg p-5'>
+    <div className='bg-white rounded-lg border shadow-sm p-5'>
       <PageTitle title={<div>Sessions Listing</div>} />
 
       <div className='flex flex-col mt-4'>
diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx
index d4ef04aae..b9f046442 100644
--- a/frontend/app/components/Client/Sites/Sites.tsx
+++ b/frontend/app/components/Client/Sites/Sites.tsx
@@ -111,7 +111,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
 
   return (
     <Loader loading={loading}>
-      <div className="bg-white rounded-lg">
+      <div className="bg-white rounded-lg shadow-sm border">
         <div className={cn(stl.tabHeader, 'px-5 pt-5')}>
           <PageTitle
             title={<div className="mr-4">Projects</div>}
diff --git a/frontend/app/components/Client/Users/UsersView.tsx b/frontend/app/components/Client/Users/UsersView.tsx
index 5f5b53fb6..6478c7b60 100644
--- a/frontend/app/components/Client/Users/UsersView.tsx
+++ b/frontend/app/components/Client/Users/UsersView.tsx
@@ -36,7 +36,7 @@ function UsersView(props: Props) {
   }, []);
 
   return (
-    <div className="bg-white rounded-lg">
+    <div className="bg-white rounded-lg shadow-sm border">
       <div className="flex items-center justify-between px-5 pt-5">
         <PageTitle
           title={
diff --git a/frontend/app/components/Client/Webhooks/Webhooks.tsx b/frontend/app/components/Client/Webhooks/Webhooks.tsx
index 58d1d345b..d4c0e52e5 100644
--- a/frontend/app/components/Client/Webhooks/Webhooks.tsx
+++ b/frontend/app/components/Client/Webhooks/Webhooks.tsx
@@ -44,7 +44,7 @@ function Webhooks() {
     };
 
     return (
-        <div className="p-5 bg-white rounded-lg">
+        <div className="bg-white rounded-lg shadow-sm border p-5">
             <div className={cn(styles.tabHeader)}>
                 <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
                 <Button className="ml-auto" variant="primary" onClick={() => init()}>Add Webhook</Button>
diff --git a/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
index 63f296cb0..262916873 100644
--- a/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {List, Progress, Typography} from "antd";
+import { List, Progress, Typography } from "antd";
 import cn from "classnames";
 
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
     onClickHandler: (event: any, data: any) => void;
 }
 
-function CardSessionsByList({list, selected, onClickHandler}: Props) {
+function CardSessionsByList({ list, selected, onClickHandler }: Props) {
     return (
         <List
             dataSource={list}
@@ -16,13 +16,13 @@ function CardSessionsByList({list, selected, onClickHandler}: Props) {
             renderItem={(row: any) => (
                 <List.Item
                     key={row.name}
-                    onClick={(e) => onClickHandler(e, row)}
+                    onClick={(e) => onClickHandler(e, row)} // Remove onClick handler to disable click interaction
                     style={{
                         borderBottom: '1px dotted rgba(0, 0, 0, 0.05)',
                         padding: '4px 10px',
                         lineHeight: '1px'
                     }}
-                    className={cn('rounded hover:bg-active-blue cursor-pointer', selected === row.name ? 'bg-active-blue' : '')}
+                    className={cn('rounded', selected === row.name ? 'bg-active-blue' : '')} // Remove hover:bg-active-blue and cursor-pointer
                 >
                     <List.Item.Meta
                         className="m-0"
@@ -30,7 +30,7 @@ function CardSessionsByList({list, selected, onClickHandler}: Props) {
                         title={(
                             <div className="m-0">
                                 <div className="flex justify-between m-0 p-0">
-                                    <Typography.Text strong>{row.name}</Typography.Text>
+                                    <Typography.Text>{row.name}</Typography.Text>
                                     <Typography.Text type="secondary"> {row.sessionCount}</Typography.Text>
                                 </div>
 
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 2ea7d1153..09fb1eb1a 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -26,7 +26,7 @@ function AlertsView({ siteId }: IAlertsView) {
         return unmount;
       }, [history]);
     return (
-        <div style={{ maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded py-4 border">
+        <div style={{ maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded-lg shadow-sm py-4 border">
             <div className="flex items-center mb-4 justify-between px-6">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Alerts" />
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index c4ef9f2d6..77350083e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -74,40 +74,22 @@ function DashboardList({siteId}: { siteId: string }) {
     return (
         list.length === 0 && !dashboardStore.filter.showMine ? (
             <Empty
-                image={<AnimatedSVG name={ICONS.NO_DASHBOARDS} size={400}/>}
+                image={<AnimatedSVG name={dashboardsSearch !== '' ? ICONS.NO_RESULTS : ICONS.NO_DASHBOARDS} size={600}/>}
+
                 imageStyle={{height: 300}}
                 description={(
                     <div className="text-center">
-                        {dashboardsSearch !== ''
-                            ? <Typography.Text className="my-2 text-lg">
-                                No matching results
+                        <div>
+                            <Typography.Text className="my-2 text-xl font-medium">
+                                Create your first dashboard.
                             </Typography.Text>
-                            : (
-                                <div>
-                                    <Typography.Text className="mb-2 text-lg">
-                                        You haven't created any dashboards yet
-                                    </Typography.Text>
-                                    <div className="text-sm text-gray-500 mt-2">
-                                        A Dashboard is a collection of{' '}
-                                        <Tooltip
-                                            title={
-                                                <div className="text-center">
-                                                    Utilize cards to visualize key user interactions or product
-                                                    performance metrics.
-                                                </div>
-                                            }
-                                            className="text-center"
-                                        >
-                                            <span className="underline decoration-dotted">Cards</span>
-                                        </Tooltip>{' '}
-                                        that can be shared across teams.
-                                    </div>
-
-                                    <div className="my-4">
-                                        <CreateDashboardButton/>
-                                    </div>
-                                </div>
-                            )}
+                            <div className="mb-2 text-lg text-gray-500 mt-2 leading-normal">
+                                Organize your product and technical insights as cards in dashboards to see the bigger picture, <br/>take action and improve user experience.
+                            </div>
+                            <div className="my-4">
+                                <CreateDashboardButton/>
+                            </div>
+                        </div>
                     </div>
                 )}
             />
@@ -132,6 +114,7 @@ function DashboardList({siteId}: { siteId: string }) {
                 })}
             />)
     );
+    
 }
 
 export default connect((state: any) => ({
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
index bb3a152b9..829852dd9 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -5,7 +5,7 @@ import Header from './Header';
 
 function DashboardsView({history, siteId}: { history: any; siteId: string }) {
     return (
-        <div style={{maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded py-4 border">
+        <div style={{maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded-lg py-4 border shadow-sm">
             <Header />
             <DashboardList/>
         </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
index df4d8a3fb..22ac90d79 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
@@ -83,7 +83,7 @@ function CreateCard(props: Props) {
                     <Button type="text" onClick={props.onBack}>
                         <ArrowLeft size={16}/>
                     </Button>
-                    <div className="text-2xl leading-4 font-semibold">
+                    <div className="text-xl leading-4 font-medium">
                         {metric.name}
                     </div>
                 </Space>
@@ -94,7 +94,7 @@ function CreateCard(props: Props) {
                 </Button>
             </div>
             <CardBuilder siteId={siteId}/>
-            <WidgetPreview className="mt-8" name={metric.name} isEditing={true}/>
+            <WidgetPreview className="" name={metric.name} isEditing={true}/>
         </div>
     );
 }
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
index 1f21a6c9a..044824ab0 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
@@ -9,6 +9,7 @@ import {
 import React from 'react';
 
 import ExCard from './ExCard';
+import { size } from '@floating-ui/react-dom-interactions';
 
 const TYPES = {
   Frustrations: 'frustrations',
@@ -37,6 +38,7 @@ function ExampleCount(props: any) {
                 { label: 'Errors', value: '1' },
                 { label: 'Users', value: '2' },
               ]}
+              size='small'
               onChange={(v) => setType(v)}
             />
           </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
index b055c81fd..8fbe5e865 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
@@ -13,15 +13,15 @@ function ExCard({
     onCard: (card: string) => void;
     height?: number;
 }) {
-    return (
-        <div
-            className={'rounded overflow-hidden border p-4 bg-white hover:border-gray-light hover:shadow'}
-            style={{width: '100%', height: height || 286}}
-        >
-            <div className={'font-semibold text-lg'}>{title}</div>
-            <div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
-        </div>
-    );
+  return (
+    <div
+      className={'rounded-lg overflow-hidden border border-transparent p-4 bg-white hover:border-blue hover:shadow-sm'}
+      style={{width: '100%', height: height || 286}}
+    >
+      <div className={'font-medium text-lg'}>{title}</div>
+      <div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
+    </div>
+  );
 }
 
 export default ExCard
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
index 1b2de44e2..b6d35ef76 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
@@ -58,6 +58,7 @@ function ByUrl(props: any) {
               { label: 'Page Title', value: '1' },
             ]}
             onChange={(v) => setMode(Number(v))}
+            size='small'
           />
           </div>
         </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
index 5de714619..1e2cb8770 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
@@ -23,6 +23,7 @@ function ExampleTrend(props: any) {
               { label: 'Multi-Series', value: 'multi' },
             ]}
             onChange={(v) => setIsMulti(v === 'multi')}
+            size='small'
           />
           </div>
         </div>
@@ -78,14 +79,14 @@ function ExampleTrend(props: any) {
           </div>
         ) : null}
       </div>
-      <div className={'flex gap-4 justify-center'}>
+      <div className={'flex gap-4 justify-center hidden'}>
         <div className={'flex gap-2 items-center'}>
           <div className={'w-4 h-4 rounded-full bg-main'} />
-          <div>CTA 1</div>
+          <div>Series 1</div>
         </div>
         <div className={'flex gap-2 items-center'}>
           <div className={'w-4 h-4 rounded-full bg-tealx'} />
-          <div>CTA 2</div>
+          <div>Series 2</div>
         </div>
       </div>
     </ExCard>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index ae48e05af..79b26d019 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@@ -25,7 +25,15 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
 
     return (
         <>
-            <Modal open={open} onCancel={onClose} width={900} destroyOnClose={true} footer={null} closeIcon={false}>
+            <Modal 
+            open={open} 
+            onCancel={onClose} 
+            width={900} 
+            destroyOnClose={true} 
+            footer={null} 
+            closeIcon={false} 
+            className='chooseDashboardCards'
+            centered>
                 <div>
                     <div className="flex flex-col gap-4">
                         {step === 0 && <SelectCard onClose={onClose}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
index 39c6be85f..e4fe08fa4 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@@ -64,7 +64,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
             {/*/>*/}
 
             <Space className="items-center justify-between">
-                <div className="text-lg leading-4 font-semibold">
+                <div className="text-xl leading-4 font-medium">
                     {dashboardId ? (isLibrary ? "Add Card" : "Create Card") : "Select a template to create a card"}
                 </div>
                 {isLibrary && (
@@ -125,6 +125,7 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected, selecte
         }))}
         value={selected}
         onChange={setSelected}
+        className='w-fit'
     />
 );
 
@@ -135,7 +136,7 @@ interface ExampleCardsGridProps {
 const ExampleCardsGrid: React.FC<ExampleCardsGridProps> = ({items}) => (
     <div
         className="w-full grid grid-cols-4 gap-4 overflow-scroll"
-        style={{maxHeight: 'calc(100vh - 210px)'}}
+        style={{maxHeight: 'calc(100vh - 100px)'}}
     >
         {items}
     </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx b/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx
index 2ff69a334..1a1db124d 100644
--- a/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx
@@ -1,6 +1,7 @@
 import {useObserver} from 'mobx-react-lite';
 import React from 'react';
 import {Button, Modal, Form, Icon} from 'UI';
+
 import {useStore} from 'App/mstore'
 import Select from 'Shared/Select';
 
@@ -44,7 +45,7 @@ function DashboardSelectionModal(props: Props) {
     return useObserver(() => (
         <Modal size="small" open={show} onClose={closeHandler}>
             <Modal.Header className="flex items-center justify-between">
-                <div>{'Add to selected dashboard'}</div>
+                <div className='text-xl font-medium'>{'Add to selected dashboard'}</div>
                 <Icon
                     role="button"
                     tabIndex="-1"
@@ -69,7 +70,7 @@ function DashboardSelectionModal(props: Props) {
                 <Button
                     variant="primary"
                     onClick={onSave}
-                    className="float-left mr-2"
+                    className="float-left mr-2 "
                 >
                     Add
                 </Button>
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css
index 42045607f..cda44bd57 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css
@@ -2,4 +2,4 @@
   & > tippy-popper > tippy-tooltip {
     padding: 0!important;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx b/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx
index 7879ff095..cc3c08f92 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx
@@ -23,7 +23,7 @@ function AddStepButton({series, excludeFilterKeys}: Props) {
             onFilterClick={onAddFilter}
             excludeFilterKeys={excludeFilterKeys}
         >
-            <Button type="link" icon={<PlusIcon size={16}/>} size="small">
+            <Button type="link" className='border-none hover:bg-blue-50' icon={<PlusIcon size={16}/>} size="small">
                 ADD STEP
             </Button>
         </FilterSelection>
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 36eb148f3..aa21ecea8 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -115,7 +115,7 @@ function FilterSeries(props: Props) {
     };
 
     return (
-        <div className="border rounded bg-white">
+        <div className="border rounded-lg shadow-sm bg-white ">
             {canExclude && <ExcludeFilters filter={series.filter}/>}
 
             {!hideHeader && (
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
index da3c83c3f..e0513d416 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
@@ -59,7 +59,7 @@ function FunnelIssues() {
     return useObserver(() => (
         <div className="my-8 bg-white rounded p-4 border">
             <div className="flex">
-                <h1 className="font-medium text-2xl">Most significant issues <span className="font-normal">identified in this funnel</span></h1>
+                <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">
                 <FunnelIssuesDropdown />
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index fa7ce7019..5edeec2d9 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 function MetricsView({ siteId }: Props) {
   return useObserver(() => (
-    <div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded pt-4 border">
+    <div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded-lg shadow-sm pt-4 border">
       <MetricViewHeader siteId={siteId} />
       <MetricsList siteId={siteId} />
     </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
index 10778d064..867cb03c3 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
@@ -184,12 +184,13 @@ const SeriesList = observer(() => {
                     </div>
                 ))}
             {hasSeries && (
-                <Card styles={{body: {padding: '4px'}}}>
+                <Card styles={{body: {padding: '4px'}}} className='rounded-full shadow-sm'>
                     <Button
                         type='link'
                         onClick={() => metric.addSeries()}
                         disabled={!canAddSeries}
                         size="small"
+                        className='block w-full'
                     >
                         <Space>
                             <AudioWaveform size={16}/>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index c1d04bd57..fde2b4f4e 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -46,7 +46,7 @@ export default observer(WidgetFormNew);
 
 function DefineSteps({metric, excludeFilterKeys}: any) {
     return (
-        <Space className="px-4 py-2">
+        <Space className="px-4 py-2 rounded-lg shadow-sm">
             <Typography.Text strong>Define Steps</Typography.Text>
             <AddStepButton excludeFilterKeys={excludeFilterKeys} series={metric.series[0]}/>
         </Space>
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index 2173b6ac8..2420319a4 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -34,7 +34,7 @@ function WidgetPreview(props: Props) {
 
     return (
         <>
-            <div className={cn(className, 'bg-white rounded border')}>
+            <div className={cn(className, 'bg-white rounded-xl border shadow-sm mt-0')}>
                 <div className="flex items-center justify-between px-4 pt-2">
                     <h2 className="text-xl">
                         {props.name}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index a84264c64..0a342af52 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -97,7 +97,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
   return (
     <div
       className={cn(
-        'relative rounded bg-white border group',
+        'relative rounded bg-white border group rounded-lg',
         'col-span-' + widget.config.col,
         { 'hover:shadow-border-gray': !isTemplate && isWidget },
         { 'hover:shadow-border-main': isTemplate }
diff --git a/frontend/app/components/ForgotPassword/ForgotPassword.tsx b/frontend/app/components/ForgotPassword/ForgotPassword.tsx
index cb6aced80..2f962e94b 100644
--- a/frontend/app/components/ForgotPassword/ForgotPassword.tsx
+++ b/frontend/app/components/ForgotPassword/ForgotPassword.tsx
@@ -23,7 +23,7 @@ function ForgotPassword(props: Props) {
         <div className="m-10 ">
           <img src="/assets/logo.svg" width={200} />
         </div>
-        <div className="border rounded bg-white" style={{ width: '350px' }}>
+        <div className="border rounded-lg bg-white shadow-sm" style={{ width: '350px' }}>
           {creatingNewPassword ? (
             <h2 className="text-center text-lg font-medium mb-6 border-b p-5 w-full">
               Welcome, join your organization by creating a new password
diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx
index e4140308f..519f693c3 100644
--- a/frontend/app/components/Login/Login.tsx
+++ b/frontend/app/components/Login/Login.tsx
@@ -78,7 +78,7 @@ const Login: React.FC<LoginProps> = ({errors, loading, authDetails, login, setJw
         <div className="m-10 ">
           <img src="/assets/logo.svg" width={200}/>
         </div>
-        <div className="border rounded bg-white">
+        <div className="border rounded-lg bg-white shadow-sm">
           <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
             Login to your account
           </h2>
diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
index b39e2128b..9c5d374d9 100644
--- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
+++ b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
@@ -104,11 +104,11 @@ function TestsTable() {
         />
       </Modal>
 
-      <div className={'rounded bg-white border'}>
+      <div className={'bg-white rounded-lg shadow-sm border'}>
         <div className={'flex items-center p-4 gap-2'}>
-          <Typography.Title level={4} style={{ marginBottom: 0 }}>
+          <h1 style={{ marginBottom: 0 }} className='text-2xl capitalize-first'>
             Usability Tests
-          </Typography.Title>
+          </h1>
           <div className={'ml-auto'} />
           <Button type="primary" onClick={openModal}>
             Create Usability Test
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index 329872117..684f0ddfb 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -37,7 +37,7 @@ const dropdownStyles = {
             cursor: 'pointer',
             height: '26px',
             minHeight: '26px',
-            borderRadius: '3px',
+            borderRadius: '.5rem',
             boxShadow: 'none !important',
         };
         return obj;
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 61966fb48..fd850c0c9 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -185,7 +185,7 @@ function FilterModal(props: Props) {
   return (
     <div
       className={stl.wrapper}
-      style={{ width: '480px', maxHeight: '380px', overflowY: 'auto' }}
+      style={{ width: '480px', maxHeight: '380px', overflowY: 'auto', borderRadius:'.5rem', }}
     >
       <div
         className={searchQuery && !isResultEmpty ? 'mb-6' : ''}
@@ -207,7 +207,7 @@ function FilterModal(props: Props) {
                       key={filter.label}
                       className={cn(
                         stl.optionItem,
-                        'flex items-center py-2 cursor-pointer -mx-2 px-2 gap-2'
+                        'flex items-center py-2 cursor-pointer -mx-2 px-2 gap-2 rounded-lg hover:shadow-sm'
                       )}
                       onClick={() => onFilterClick({ ...filter, value: [''] })}
                     >
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index 0c7a72bd4..c8eb01438 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -62,7 +62,7 @@ function FilterSelection(props: Props) {
         )}
       </OutsideClickDetectingDiv>
       {showModal && (
-        <div className='absolute left-0 border shadow rounded bg-white z-50'>
+        <div className='absolute left-0 rounded-lg shadow bg-white z-50'>
           <FilterModal
             isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
             onFilterClick={onFilterClick}
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
index b51519b83..54509dfc8 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -12,7 +12,7 @@ const dropdownStyles = {
       cursor: 'pointer',
       height: '26px',
       minHeight: '26px',
-      borderRadius: '3px',
+      borderRadius: '.5rem',
       boxShadow: 'none !important',
     };
     return obj;
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 22c2cb68f..5f67e292d 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -84,7 +84,7 @@ function LiveSessionList(props: Props) {
 
   return (
     <div>
-      <div className="bg-white p-3 rounded border">
+      <div className="bg-white p-3 rounded-lg border shadow-sm">
         <div className="flex mb-6 justify-between items-center">
           <div className="flex items-center">
             <h3 className="text-2xl capitalize mr-2">
diff --git a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
index 08dd17866..cac367484 100644
--- a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
+++ b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
@@ -43,7 +43,7 @@ function LiveSessionSearchField(props: Props) {
       />
 
       { showModal && (
-        <div className="absolute left-0 border shadow rounded bg-white z-50">
+        <div className="absolute left-0 shadow-sm rounded-lg bg-white z-50">
           <LiveFilterModal
             searchQuery={searchQuery}
             isMainSearch={true}
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index 9ebb378b6..f4f5f32a5 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -64,7 +64,7 @@ export default function <Value extends ValueObject>({
     menu: (provided: any, state: any) => ({
       ...provided,
       top: 31,
-      borderRadius: '3px',
+      borderRadius: '.5rem',
       right: right ? 0 : undefined,
       border: `1px solid ${colors['gray-light']}`,
       // borderRadius: '3px',
diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index 3f563566a..cae038e0c 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -89,7 +89,7 @@ function SessionSearchField(props: Props) {
       />
 
       {showModal && (
-        <div className="absolute left-0 border shadow rounded bg-white z-50">
+        <div className="absolute left-0  shadow-sm rounded-lg bg-white z-50">
           <FilterModal
             searchQuery={searchQuery}
             isMainSearch={true}
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
index 04af270e9..c4ac866cf 100644
--- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -58,7 +58,7 @@ function SessionSearchField(props: Props) {
       />
 
       {showModal && (
-        <div className="absolute left-0 border shadow rounded bg-white z-50">
+        <div className="absolute left-0 shadow-sm rounded-lg bg-white z-50">
           <FilterModal
             searchQuery={searchQuery}
             isMainSearch={true}
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index edd2b8711..d9e04fb8f 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -1,3 +1,15 @@
+:root{
+  --bg-teal: #394dfe;
+}
+
+.ant-btn{
+  border-radius: .5rem;
+}
+
+.ant-btn-primary{
+  background-color: var(--bg-teal);
+}
+
 .ml-15 { margin-left: 15px; }
 
 .ph-10 { padding-left: 10px; padding-right: 10px; }
@@ -382,4 +394,14 @@ p {
   border-radius: 3px;
   resize: none;
   background-color: #ffff;
+}
+
+.ant-menu-light .ant-menu-item-selected, :where(.css-dev-only-do-not-override).ant-menu-light>.ant-menu .ant-menu-item-selected{
+  background-color: #E6E9FA;
+}
+
+
+.chooseDashboardCards .ant-modal-content{
+  background-color: #efefef;
+  border-radius: 0.75rem;
 }
\ No newline at end of file
diff --git a/frontend/app/styles/global.scss b/frontend/app/styles/global.scss
index 7c6ae7ec1..34a33ec7b 100644
--- a/frontend/app/styles/global.scss
+++ b/frontend/app/styles/global.scss
@@ -14,7 +14,7 @@ input.no-focus:focus {
 }
 
 .widget-wrapper {
-    @apply rounded border bg-white;
+    @apply rounded-lg shadow-sm border bg-white;
 }
 
 @layer base {