From 0064d6f1113bf81ba6d7e477d50040466484f87d Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Wed, 26 Jun 2024 17:47:42 +0530
Subject: [PATCH] Various minor style updates

---
 .../Assist/RecordingsList/Recordings.tsx           |  2 +-
 .../Client/Audit/AuditView/AuditView.tsx           |  2 +-
 .../components/Client/CustomFields/CustomFields.js |  2 +-
 .../Client/Integrations/Integrations.tsx           |  2 +-
 .../Client/ProfileSettings/ProfileSettings.js      |  2 +-
 frontend/app/components/Client/Roles/Roles.tsx     |  2 +-
 .../components/Client/SessionsListingSettings.tsx  |  2 +-
 frontend/app/components/Client/Sites/Sites.tsx     |  2 +-
 frontend/app/components/Client/Users/UsersView.tsx |  2 +-
 .../app/components/Client/Webhooks/Webhooks.tsx    |  2 +-
 .../Dashboard/components/Alerts/AlertsView.tsx     |  2 +-
 .../components/DashboardList/DashboardList.tsx     | 14 ++++++++++----
 .../components/DashboardList/DashboardsView.tsx    |  2 +-
 .../components/MetricsView/MetricsView.tsx         |  2 +-
 .../UsabilityTesting/UsabilityTesting.tsx          |  6 +++---
 .../shared/LiveSessionList/LiveSessionList.tsx     |  2 +-
 frontend/app/styles/general.css                    |  4 ++++
 frontend/app/styles/global.scss                    |  2 +-
 18 files changed, 32 insertions(+), 22 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..65c0ed6e7 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} />
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/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..442ce6790 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -84,10 +84,10 @@ function DashboardList({siteId}: { siteId: string }) {
                             </Typography.Text>
                             : (
                                 <div>
-                                    <Typography.Text className="mb-2 text-lg">
-                                        You haven't created any dashboards yet
+                                    <Typography.Text className="mb-2 text-xl font-medium">
+                                        Create your first dashboard.
                                     </Typography.Text>
-                                    <div className="text-sm text-gray-500 mt-2">
+                                    {/* <div className="text-base text-gray-500">
                                         A Dashboard is a collection of{' '}
                                         <Tooltip
                                             title={
@@ -98,9 +98,15 @@ function DashboardList({siteId}: { siteId: string }) {
                                             }
                                             className="text-center"
                                         >
-                                            <span className="underline decoration-dotted">Cards</span>
+                                            <span className="underline decoration-dotted">cards</span>
                                         </Tooltip>{' '}
                                         that can be shared across teams.
+                                    </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>
 
                                     <div className="my-4">
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/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/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/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/styles/general.css b/frontend/app/styles/general.css
index edd2b8711..37bd008eb 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -382,4 +382,8 @@ 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;
 }
\ 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 {