refining new card section

frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx

@@ -24,76 +24,76 @@ interface TabItem {
 const tabItems: Record<string, TabItem[]> = {
   product_analytics: [
     {
-      icon: <LineChart />,
+      icon: <LineChart width={16} />,
       title: 'Trends',
       description: 'Track session trends over time.',
     },
     {
-      icon: <AlignStartVertical />,
+      icon: <AlignStartVertical width={16} />,
       title: 'Funnel',
       description: 'Visualize user progression through critical steps.',
     },
     {
-      icon: <Icon name={'dashboards/user-journey'} />,
+      icon: <Icon name={'dashboards/user-journey'} size={16} />,
       title: 'Journeys',
       description: 'Understand the paths users take through your product.',
     },
     {
-      icon: <Icon name={'dashboards/cohort-chart'} />,
+      icon: <Icon name={'dashboards/cohort-chart'} size={16} />,
       title: 'Retention',
       description: 'Analyze user retention over specific time periods.',
     },
     {
-      icon: <Icon name={'dashboards/heatmap-2'} />,
+      icon: <Icon name={'dashboards/heatmap-2'} size={16} />,
       title: 'Heatmaps',
       description: 'Generate a report using by asking AI.',
     },
   ],
   monitors: [
     {
-      icon: <Icon name={'dashboards/circle-alert'} />,
+      icon: <Icon name={'dashboards/circle-alert'} size={16} />,
       title: 'JS Errors',
       description: 'Monitor JS errors affecting user experience.',
     },
     {
-      icon: <ArrowUpDown />,
+      icon: <ArrowUpDown width={16}/>,
       title: 'Top Network Requests',
       description: 'Identify the most frequent network requests.',
     },
     {
-      icon: <WifiOff />,
+      icon: <WifiOff width={16}/>,
       title: '4xx/5xx Requests',
       description: 'Track client and server errors for performance issues.',
     },
     {
-      icon: <Turtle />,
+      icon: <Turtle width={16}/>,
       title: 'Slow Network Requests',
       description: 'Pinpoint the slowest network requests causing delays.',
     },
   ],
   web_analytics: [
     {
-      icon: <FileStack />,
+      icon: <FileStack width={16}/>,
       title: 'Top Pages',
       description: 'Discover the most visited pages on your site.',
     },
     {
-      icon: <AppWindow />,
+      icon: <AppWindow width={16}/>,
       title: 'Top Browsers',
       description: 'Analyze the browsers your visitors are using the most.',
     },
     {
-      icon: <Combine />,
+      icon: <Combine width={16}/>,
       title: 'Top Referrer',
       description: 'See where your traffic is coming from.',
     },
     {
-      icon: <Users />,
+      icon: <Users width={16}/>,
       title: 'Top Users',
       description: 'Identify the users with the most interactions.',
     },
     {
-      icon: <ArrowDown10 />,
+      icon: <ArrowDown10 width={16}/>,
       title: 'Speed Index by Country',
       description: 'Measure performance across different regions.',
     },
@@ -107,8 +107,8 @@ function CategoryTab({ tab }: { tab: string }) {
       {items.map((item, index) => (
         <div key={index} className={'flex items-start gap-2 p-2'}>
           {item.icon}
-          <div>
-            <div className={'font-semibold'}>{item.title}</div>
+          <div className={'leading-none'}>
+            <div>{item.title}</div>
             <div className={'text-disabled-text text-sm'}>{item.description}</div>
           </div>
         </div>
@@ -127,11 +127,11 @@ function AddCardSection() {
   return (
     <div
       className={
-        'p-4 rounded bg-white border border-gray-light flex flex-col gap-2'
+        'm-10 py-4 px-8 rounded bg-white border border-gray-light flex flex-col gap-2 w-fit'
       }
     >
       <div className={'flex justify-between border-b border-b-gray-light p-2'}>
-        <div className={'font-semibold'}>Add a card to dashboard</div>
+        <div className={'font-semibold text-lg'}>Add a card to dashboard</div>
         <div>Ask AI</div>
       </div>
       <div>
@@ -144,11 +144,11 @@ function AddCardSection() {
       <CategoryTab tab={tab} />
       <div
         className={
-          'w-full flex items-center border-t border-t-gray-light gap-2'
+          'w-full flex items-center justify-center border-t border-t-gray-light gap-2 pt-2'
         }
       >
         <FolderOutlined />
-        <div>Add existing card</div>
+        <div className={'font-semibold'}>Add existing card</div>
       </div>
     </div>
   );

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -98,7 +98,7 @@ function DashboardView(props: Props) {
     const isSaas = /app\.openreplay\.com/.test(originStr);
     return (
         <Loader loading={loading}>
-            <div style={{maxWidth: '1360px', margin: 'auto'}} className={'rounded border border-gray-light'}>
+            <div style={{maxWidth: '1360px', margin: 'auto'}} className={'rounded border border-gray-light bg-gray-light-blue'}>
                 {/* @ts-ignore */}
                 <DashboardHeader renderReport={props.renderReport} siteId={siteId} dashboardId={dashboardId}/>
                 {isSaas ? <AiQuery /> : null}

frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { useStore } from 'App/mstore';
 import WidgetWrapperNew from 'Components/Dashboard/components/WidgetWrapper/WidgetWrapperNew';
-import { Empty } from 'antd';
-import { NoContent, Loader } from 'UI';
-import { useObserver } from 'mobx-react-lite';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { Loader } from 'UI';
+import { observer } from 'mobx-react-lite';
+import AddCardSection from "../AddCardSection/AddCardSection";
 
 interface Props {
   siteId: string;
@@ -16,32 +15,16 @@ interface Props {
 function DashboardWidgetGrid(props: Props) {
   const { dashboardId, siteId } = props;
   const { dashboardStore } = useStore();
-  const loading = useObserver(() => dashboardStore.isLoading);
+  const loading = dashboardStore.isLoading;
   const dashboard = dashboardStore.selectedDashboard;
-  const list = useObserver(() => dashboard?.widgets);
+  const list = dashboard?.widgets;
 
-  return useObserver(() => (
+  return (
     <Loader loading={loading}>
       {
         list?.length === 0 ? (
-          <div className="bg-gray-light-blue rounded-lg shadow-sm p-5">
-            <NoContent
-              show={true}
-              icon="no-metrics-chart"
-              title={
-                <div className="text-center">
-                   <div className='mb-4'>
-                   <AnimatedSVG name={ICONS.NO_RESULTS} size={60} />
-                   </div>
-                  <div className="text-xl font-medium mb-2">
-                    There are no cards in this dashboard
-                  </div>
-                  <div className="text-base font-normal">
-                  Create a card by clicking the "Add Card" button to visualize insights here.
-                  </div>
-                </div>
-              }
-            />
+          <div className={'flex-1 flex justify-center items-center'}>
+            <AddCardSection />
           </div>
         ) : (
           <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
@@ -65,7 +48,7 @@ function DashboardWidgetGrid(props: Props) {
         )
       }
     </Loader>
-  ));
+  );
 }
 
-export default DashboardWidgetGrid;
+export default observer(DashboardWidgetGrid);