style: new card with subtitle and shadow

src/js/components/Overview/ChartCard.tsx

@@ -1,15 +1,29 @@
 import React, { memo } from 'react';
 import Chart from './Chart';
 import { Card, Button, Tooltip, Space, Typography, Row } from 'antd';
-import { CloseOutlined, TeamOutlined, QuestionOutlined } from '@ant-design/icons';
+import { CloseOutlined, TeamOutlined } from '@ant-design/icons';
 import CustomEmpty from '../Util/CustomEmpty';
 import { CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
 import { ChartDataField } from '@/types/data';
 
-const CARD_STYLE = { width: '100%', height: '415px', borderRadius: '11px' };
+const CARD_STYLE = { width: '100%', height: '415px', borderRadius: '11px', boxShadow: '0 2px 10px rgba(0,0,0,0.1)' };
 const ROW_EMPTY_STYLE = { height: `${CHART_HEIGHT}px` };
 
+const TitleComponent: React.FC<TitleComponentProps> = ({ title, description }) => (
+  <Space.Compact direction="vertical" style={{ fontWeight: 'normal', padding: '5px 5px' }}>
+    <Typography.Text style={{ fontSize: '20px', fontWeight: '600' }}>{title}</Typography.Text>
+    <Typography.Text type="secondary" style={{ width: '375px' }} ellipsis={{ tooltip: description }}>
+      {description}
+    </Typography.Text>
+  </Space.Compact>
+);
+
+interface TitleComponentProps {
+  title: string;
+  description: string;
+}
+
 const ChartCard = memo(({ section, chart, onRemoveChart, width }: ChartCardProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
@@ -21,10 +35,6 @@ const ChartCard = memo(({ section, chart, onRemoveChart, width }: ChartCardProps
   } = chart;
 
   const extraOptionsData = [
-    {
-      icon: <QuestionOutlined />,
-      description: t(description),
-    },
     {
       icon: <CloseOutlined />,
       description: td('Remove this chart'),
@@ -59,7 +69,12 @@ const ChartCard = memo(({ section, chart, onRemoveChart, width }: ChartCardProps
   // We add a key to the chart which includes width to force a re-render if width changes.
   return (
     <div key={id} style={{ height: '100%', width }}>
-      <Card title={t(title)} style={CARD_STYLE} size="small" extra={<Space size="small">{ed}</Space>}>
+      <Card
+        title={<TitleComponent title={t(title)} description={t(description)} />}
+        style={CARD_STYLE}
+        size="small"
+        extra={<Space size="small">{ed}</Space>}
+      >
         {data.filter((e) => !(e.x === 'missing')).length !== 0 ? (
           <Chart
             chartConfig={chartConfig}

src/js/components/Overview/Counts.tsx

@@ -33,7 +33,7 @@ const Counts = () => {
       <Typography.Title level={3}>{td('Counts')}</Typography.Title>
       <Space direction="horizontal">
         {data.map(({ title, icon, count }, i) => (
-          <Card key={i}>
+          <Card key={i} style={{ boxShadow: '0 2px 10px rgba(0,0,0,0.1)' }}>
             <Statistic title={td(title)} value={count} valueStyle={{ color: COUNTS_FILL }} prefix={icon} />
           </Card>
         ))}

src/js/components/Overview/PublicOverview.tsx

@@ -14,7 +14,7 @@ import { useAppSelector } from '@/hooks';
 import { useTranslation } from 'react-i18next';
 import LastIngestionInfo from './LastIngestion';
 
-const ABOUT_CARD_STYLE = { borderRadius: '11px' };
+const ABOUT_CARD_STYLE = { borderRadius: '11px', boxShadow: '0 2px 10px rgba(0,0,0,0.1)' };
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
 
 const PublicOverview = () => {