Dashboard: Charts style tweaks, Remove unused chart component (#7478)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on modifying the styling and layout of various components within the dashboard, enhancing user interface elements, and removing unused files.

### Detailed summary
- Deleted `CombinedStatBreakdownCard.tsx` and `CombinedStatBreakdownCard.stories.tsx`.
- Updated class names for better styling on `Link` and `Card` components.
- Removed `max-md:border-r-0` and `max-md:border-l-0` classes from several components.
- Adjusted `min-h` properties for `Card` components.
- Centered text in `EmptyStateContent`.
- Streamlined layout in various components for improved spacing.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -73,7 +73,8 @@ export default async function TeamOverviewPage(props: {
           title="Analytics"
         />
       </div>
-      <div className="flex grow flex-col justify-between gap-10 md:container md:max-w-7xl md:pt-8 md:pb-16">
+
+      <div className="flex grow flex-col justify-between gap-10 container max-w-7xl pt-8 pb-16">
         <div className="flex grow flex-col gap-6">
           <Suspense
             fallback={<LoadingChartState className="h-[458px] border" />}
@@ -86,7 +87,7 @@ export default async function TeamOverviewPage(props: {
             />
           </Suspense>
 
-          <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+          <div className="grid gap-6 md:grid-cols-2">
             <Suspense
               fallback={<LoadingChartState className="h-[431px] border" />}
             >
@@ -242,7 +243,6 @@ async function AsyncTransactionsChartCard(props: {
     clientTransactions.value.length > 0 ? (
     <TransactionsChartCardUI
       aggregatedData={clientTransactions.value}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={clientTransactionsTimeSeries.value}
       searchParams={props.searchParams}
     />
@@ -280,7 +280,6 @@ async function AsyncTotalSponsoredCard(props: {
     userOpUsage.value.length > 0 ? (
     <TotalSponsoredChartCardUI
       aggregatedData={userOpUsage.value}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={userOpUsageTimeSeries.value}
       searchParams={props.searchParams}
     />
@@ -391,7 +390,6 @@ function AppHighlightsCard({
         return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
       }}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       queryKey="appHighlights"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/TransactionCharts.tsx

@@ -20,11 +20,10 @@ export function TransactionsChartsUI({
     <>
       <TransactionsChartCardUI
         aggregatedData={aggregatedData}
-        className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
         data={data}
         searchParams={searchParams}
       />
-      <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+      <div className="grid gap-6 md:grid-cols-2">
         <ChainDistributionCard data={aggregatedData} />
         <ContractDistributionCard client={client} data={aggregatedData} />
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx

@@ -455,7 +455,6 @@ function AppHighlightsCard({
         return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
       }}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       queryKey="appHighlights"
@@ -590,7 +589,6 @@ async function TotalSponsoredCard({
       }
       aggregateFn={(_data, key) => processedAggregatedData[key]}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       isCurrency

apps/dashboard/src/app/(app)/team/components/Analytics/CombinedBarChartCard.tsx

@@ -62,7 +62,7 @@ export function CombinedBarChartCard<
               const key = chart as K;
               return (
                 <Link
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-card"
+                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-accent/50"
                   data-active={activeChart === chart}
                   href={{
                     query: {

apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.stories.tsx

@@ -13,7 +13,7 @@ export function EmptyStateCard({
   description?: string;
 }) {
   return (
-    <Card className="container h-[300px] p-2 md:h-[400px]">
+    <Card className="container min-h-[300px] p-2 md:min-h-[400px]">
       <div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border border-dashed text-center">
         <EmptyStateContent
           description={description}
@@ -42,7 +42,7 @@ export function EmptyStateContent(props: {
         <PlugIcon className="size-5 text-muted-foreground" />
       </div>
 
-      <div className="space-y-0.5">
+      <div className="space-y-0.5 text-center">
         <div className="font-semibold text-lg">No data available</div>
         {description && (
           <div className="text-muted-foreground text-sm">{description}</div>
@@ -52,7 +52,7 @@ export function EmptyStateContent(props: {
       {props.link && (
         <Button
           asChild
-          className="mt-2 rounded-full"
+          className="mt-2 rounded-full text-center"
           size="sm"
           variant="default"
         >