Various style improvements

frontend/app/components/Client/Integrations/Integrations.tsx

@@ -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/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/DashboardList/DashboardList.tsx

@@ -74,46 +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-xl font-medium">
-                                        Create your first dashboard.
-                                    </Typography.Text>
-                                    {/* <div className="text-base text-gray-500">
-                                        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>
-                                    <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">
-                                        <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>
                 )}
             />
@@ -138,6 +114,7 @@ function DashboardList({siteId}: { siteId: string }) {
                 })}
             />)
     );
+    
 }
 
 export default connect((state: any) => ({

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/ExampleCards.tsx

@@ -13,6 +13,7 @@ import ByUrl from "./Examples/SessionsBy/ByUrl";
 import {ERRORS, FUNNEL, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS} from "App/constants/card";
 import {FilterKey} from "Types/filter/filterType";
 import {Activity, BarChart, TableCellsMerge, TrendingUp} from "lucide-react";
+import { size } from "@floating-ui/react-dom-interactions";
 
 const TYPE = {
     FUNNEL: 'funnel',
@@ -31,7 +32,7 @@ const TYPE = {
 
 export const CARD_CATEGORIES = [
     {
-        key: 'product-analytics', label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS]
+        key: 'product-analytics', label: 'Product Analytics', icon: TrendingUp, size:32, types: [USER_PATH, ERRORS]
     },
     {key: 'performance-monitoring', label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES]},
     {key: 'web-analytics', label: 'Web Analytics', icon: BarChart, types: [TABLE]},

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,10 +13,10 @@ function ExCard({
 }) {
   return (
     <div
-      className={'rounded overflow-hidden border p-4 bg-white hover:border-gray-light hover:shadow'}
+      className={'rounded-lg overflow-hidden border border-transparent p-4 bg-white hover:border-blue hover:shadow-sm'}
       style={{ width: '100%', height: 286 }}
     >
-      <div className={'font-semibold text-lg'}>{title}</div>
+      <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>
   );

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

@@ -63,7 +63,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 && (
@@ -124,6 +124,7 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected, selecte
         }))}
         value={selected}
         onChange={setSelected}
+        className='w-fit'
     />
 );
 
@@ -134,7 +135,7 @@ interface ExampleCardsGridProps {
 const ExampleCardsGrid: React.FC<ExampleCardsGridProps> = ({items}) => (
     <div
         className="w-full grid grid-cols-2 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/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/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/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; }
@@ -386,4 +398,10 @@ p {
 
 .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;
 }