Various style updates in dashboards and other pages. (#2308)

* Various minor style updates

* Various style improvements

* Update ExampleCards.tsx

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' />

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">

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' }}>

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

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} />

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}>

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>

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'>

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>}

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={

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>

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>
 

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" />

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) => ({

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>

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>
     );
 }

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>

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

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>

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>

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}

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>

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>

frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css

@@ -2,4 +2,4 @@
   & > tippy-popper > tippy-tooltip {
     padding: 0!important;
   }
-}
+}

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>

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 && (

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 />

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>

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}/>

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>

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}

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 }

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

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>

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

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;

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: [''] })}
                     >

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}

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;

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">

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}

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',

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}

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}

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;
 }

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 {