Merge pull request #152 from bento-platform/new-card

style: new card with subtitle and shadow
bento-platform · Mar 6, 2024 · ab0e761 · ab0e761
2 parents f339cc9 + 68c0404
commit ab0e761
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 17 deletions.
diff --git a/src/js/components/Beacon/BeaconQueryUi.tsx b/src/js/components/Beacon/BeaconQueryUi.tsx
@@ -17,6 +17,7 @@ import {
   BUTTON_AREA_STYLE,
   BUTTON_STYLE,
 } from '@/constants/beaconConstants';
+import { BOX_SHADOW } from '@/constants/overviewConstants';
 const { Text, Title } = Typography;
 // TODOs
 // example searches, either hardcoded or configurable
@@ -240,7 +241,7 @@ const BeaconQueryUi = () => {
       <BeaconSearchResults />
       <Card
         title={td('Search')}
-        style={{ borderRadius: '10px', maxWidth: '1200px', width: '100%' }}
+        style={{ borderRadius: '10px', maxWidth: '1200px', width: '100%', ...BOX_SHADOW }}
         bodyStyle={CARD_BODY_STYLE}
         headStyle={CARD_HEAD_STYLE}
       >

diff --git a/src/js/components/Overview/ChartCard.tsx b/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 { CHART_HEIGHT, BOX_SHADOW } 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', ...BOX_SHADOW };
 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}

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
@@ -4,7 +4,7 @@ import { TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
 import ExpSvg from '../Util/ExpSvg';
-import { COUNTS_FILL } from '@/constants/overviewConstants';
+import { COUNTS_FILL, BOX_SHADOW } from '@/constants/overviewConstants';
 import { useAppSelector, useTranslationDefault } from '@/hooks';
 
 const Counts = () => {
@@ -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={BOX_SHADOW}>
             <Statistic title={td(title)} value={count} valueStyle={{ color: COUNTS_FILL }} prefix={icon} />
           </Card>
         ))}

diff --git a/src/js/components/Overview/LastIngestion.tsx b/src/js/components/Overview/LastIngestion.tsx
@@ -8,6 +8,7 @@ import { useAppSelector } from '@/hooks';
 import { getDataTypeLabel } from '@/types/dataTypes';
 
 import { LastIngestionDataTypeResponse } from '@/types/lastIngestionDataTypeResponse';
+import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 const LastIngestionInfo: React.FC = () => {
   const { t, i18n } = useTranslation(DEFAULT_TRANSLATION);
@@ -44,7 +45,7 @@ const LastIngestionInfo: React.FC = () => {
       <Space direction="horizontal">
         {hasData ? (
           queryableDataTypes.map((dataType: LastIngestionDataTypeResponse) => (
-            <Card key={dataType.id}>
+            <Card style={BOX_SHADOW} key={dataType.id}>
               <Space direction="vertical">
                 <Typography.Text style={{ color: 'rgba(0,0,0,0.45)' }}>
                   {t(getDataTypeLabel(dataType.id))}

diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
@@ -5,7 +5,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { convertSequenceAndDisplayData, saveValue } from '@/utils/localStorage';
 import type { Sections } from '@/types/data';
 
-import { LOCALSTORAGE_CHARTS_KEY } from '@/constants/overviewConstants';
+import { BOX_SHADOW, LOCALSTORAGE_CHARTS_KEY } from '@/constants/overviewConstants';
 
 import OverviewSection from './OverviewSection';
 import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
@@ -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', ...BOX_SHADOW };
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
 
 const PublicOverview = () => {

diff --git a/src/js/components/Provenance/DatasetProvenance.tsx b/src/js/components/Provenance/DatasetProvenance.tsx
@@ -11,6 +11,7 @@ import CreatedByTable from './Tables/CreatedByTable';
 import DownloadDats from './DownloadDats';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
 import { ProvenanceStoreDataset } from '@/types/provenance';
+import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 const { Item } = Descriptions;
 const { Text, Title } = Typography;
@@ -29,7 +30,7 @@ const DatasetProvenance = ({ metadata, loading }: DatasetProvenanceProps) => {
             {t(metadata.version)}
           </Title>,
         ]}
-        style={{ borderRadius: '11px' }}
+        style={{ borderRadius: '11px', ...BOX_SHADOW }}
         loading={loading}
       >
         {/* --- DESCRIPTION ---*/}

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
@@ -5,7 +5,7 @@ import { BiDna } from 'react-icons/bi';
 import { PieChart } from 'bento-charts';
 import CustomEmpty from '../Util/CustomEmpty';
 import ExpSvg from '../Util/ExpSvg';
-import { COUNTS_FILL, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
+import { BOX_SHADOW, COUNTS_FILL, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useTranslationDefault } from '@/hooks';
 import { ChartData } from '@/types/data';
 
@@ -24,7 +24,14 @@ const SearchResultsPane = ({
   return (
     <div style={{ paddingBottom: 8, display: 'flex', justifyContent: 'center', width: '100%' }}>
       <Card
-        style={{ borderRadius: '10px', padding: '10px 33px', maxWidth: '1200px', width: '100%', minHeight: '28rem' }}
+        style={{
+          borderRadius: '10px',
+          padding: '10px 33px',
+          maxWidth: '1200px',
+          width: '100%',
+          minHeight: '28rem',
+          ...BOX_SHADOW,
+        }}
         loading={isFetchingData}
       >
         <Row gutter={16}>

diff --git a/src/js/constants/beaconConstants.ts b/src/js/constants/beaconConstants.ts
@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 export const WRAPPER_STYLE: CSSProperties = {
   display: 'flex',
@@ -11,6 +12,7 @@ export const FORM_ROW_GUTTERS: [number, number] = [16, 16];
 
 export const CARD_STYLE: CSSProperties = {
   height: '100%',
+  ...BOX_SHADOW,
 };
 
 export const CARD_BODY_STYLE: CSSProperties = {

diff --git a/src/js/constants/overviewConstants.ts b/src/js/constants/overviewConstants.ts
@@ -5,3 +5,5 @@ export const LOCALSTORAGE_CHARTS_KEY = 'charts';
 export const CHART_HEIGHT = 350;
 export const PIE_CHART_HEIGHT = 300; // rendered slightly smaller since labels can clip
 export const DEFAULT_CHART_WIDTH = 1;
+
+export const BOX_SHADOW = { boxShadow: '0 2px 10px rgba(0,0,0,0.05)' };