Feat/continue develop scrvusd

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/AdvancedDetails.tsx

@@ -0,0 +1,28 @@
+import { Card, CardHeader, Stack, Typography } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { t } from '@lingui/macro'
+
+const { Spacing } = SizesAndSpaces
+
+const AdvancedDetails = () => (
+  <Card>
+    <CardHeader
+      size="small"
+      title={t`Advanced Details`}
+      slotProps={{ title: { variant: 'small' }, root: { variant: 'small' } }}
+      sx={{
+        padding: {
+          mobile: `${Spacing.lg.mobile} ${Spacing.md.mobile} ${Spacing.sm.mobile}`,
+          tablet: `${Spacing.lg.tablet} ${Spacing.md.tablet} ${Spacing.sm.tablet}`,
+          desktop: `${Spacing.lg.desktop} ${Spacing.md.desktop} ${Spacing.sm.desktop}`,
+        },
+        alignItems: 'end',
+      }}
+    />
+    <Stack direction="column" spacing={Spacing.md}>
+      <Typography variant="bodyMBold">{t`Advanced Details`}</Typography>
+    </Stack>
+  </Card>
+)
+
+export default AdvancedDetails

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/index.tsx

@@ -1,13 +1,14 @@
 import type { TimeOption } from '@ui-kit/lib/types/scrvusd'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { Card, CardHeader, Box } from '@mui/material'
+import { Stack, Card, CardHeader, Box } from '@mui/material'
 import { useState } from 'react'
 import StatsStack from './StatsStack'
 import ChartHeader, { ChartOption } from '@ui-kit/shared/ui/ChartHeader'
 import { useScrvUsdYield } from '@loan/entities/scrvusdYield'
 import { useScrvUsdRevenue } from '@loan/entities/scrvusdRevenue'
 import RevenueLineChart from './RevenueLineChart'
 import DistributionsBarChart from './DistributionsBarChart'
+import AdvancedDetails from './AdvancedDetails'
 
 const { Spacing, MaxWidth } = SizesAndSpaces
 
@@ -25,31 +26,41 @@ const Statistics = () => {
   const { data: revenueData } = useScrvUsdRevenue({})
 
   return (
-    <Card
-      sx={{
-        backgroundColor: (t) => t.design.Layer[1].Fill,
-        width: '100%',
-        maxWidth: MaxWidth.statistics,
-      }}
-    >
-      <CardHeader
-        title="Statistics"
-        sx={{ padding: `0 ${Spacing.md.desktop} ${Spacing.sm.desktop}`, alignItems: 'end' }}
-      />
-      <Box sx={{ padding: Spacing.md }}>
-        <StatsStack />
-      </Box>
-      <ChartHeader
-        activeChartOption={activeChartOption}
-        setActiveChartOption={setActiveChartOption}
-        activeTimeOption={activeTimeOption}
-        setActiveTimeOption={setActiveTimeOption}
-        chartOptions={chartOptions}
-        timeOptions={timeOptions}
-      />
-      {activeChartOption.label === 'Savings Rate' && <RevenueLineChart data={yieldData ?? []} />}
-      {activeChartOption.label === 'Distributions' && <DistributionsBarChart data={revenueData ?? null} />}
-    </Card>
+    <Stack direction="column" spacing={0}>
+      <Card
+        sx={{
+          backgroundColor: (t) => t.design.Layer[1].Fill,
+          width: '100%',
+          maxWidth: MaxWidth.statistics,
+        }}
+      >
+        <CardHeader
+          title="Statistics"
+          sx={{
+            padding: {
+              mobile: `${Spacing.lg.mobile} ${Spacing.md.mobile} ${Spacing.sm.mobile}`,
+              tablet: `${Spacing.lg.tablet} ${Spacing.md.tablet} ${Spacing.sm.tablet}`,
+              desktop: `${Spacing.lg.desktop} ${Spacing.md.desktop} ${Spacing.sm.desktop}`,
+            },
+            alignItems: 'end',
+          }}
+        />
+        <Box sx={{ padding: Spacing.md }}>
+          <StatsStack />
+        </Box>
+        <ChartHeader
+          activeChartOption={activeChartOption}
+          setActiveChartOption={setActiveChartOption}
+          activeTimeOption={activeTimeOption}
+          setActiveTimeOption={setActiveTimeOption}
+          chartOptions={chartOptions}
+          timeOptions={timeOptions}
+        />
+        {activeChartOption.label === 'Savings Rate' && <RevenueLineChart data={yieldData ?? []} />}
+        {activeChartOption.label === 'Distributions' && <DistributionsBarChart data={revenueData ?? null} />}
+      </Card>
+      <AdvancedDetails />
+    </Stack>
   )
 }
 

packages/curve-ui-kit/src/shared/ui/ChartHeader.tsx

@@ -57,9 +57,14 @@ const ChartHeader = ({
           <Icon name="Maximize" size={20} />
         </IconButton>
       </ToggleButtonGroup>
-      <Select value={activeTimeOption} onChange={handleTimeOption} size="small" sx={{ width: '100px' }}>
+      <Select
+        value={activeTimeOption}
+        onChange={handleTimeOption}
+        size="small"
+        sx={{ width: '100px', textTransform: 'uppercase' }}
+      >
         {timeOptions.map((option) => (
-          <MenuItem value={option} key={option}>
+          <MenuItem value={option} key={option} sx={{ textTransform: 'uppercase' }}>
             {option}
           </MenuItem>
         ))}

packages/curve-ui-kit/src/themes/components.ts

@@ -30,11 +30,29 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
         paddingBlock: SizesAndSpaces.Spacing.sm.desktop + ' 0',
         paddingInline: SizesAndSpaces.Spacing.md.desktop + ' 0',
         borderBottom: `1px solid ${design.Layer[3].Outline}`,
-        height: '4rem',
-        minHeight: `calc(${SizesAndSpaces.ButtonSize.lg} + 1px)`, // 1px for the border
+        minHeight: `calc(${SizesAndSpaces.ButtonSize.lg} + 1px)`,
+        variants: [
+          {
+            props: { size: 'small' }, // todo: currently not working, applying styles inline
+            style: {
+              minHeight: SizesAndSpaces.Sizing.md.desktop,
+              padding: `0 ${SizesAndSpaces.Spacing.md.desktop} ${SizesAndSpaces.Spacing.sm.desktop}`,
+            },
+          },
+        ],
       },
       action: { alignContent: 'center', margin: 0 },
-      title: { ...typography.headingSBold },
+      title: {
+        ...typography.headingSBold,
+        variants: [
+          {
+            props: { size: 'small' },
+            style: {
+              ...typography.headingXsBold,
+            },
+          },
+        ],
+      },
     },
   },
   MuiCardActions: {

packages/curve-ui-kit/src/themes/mui-overrides.d.ts

@@ -14,3 +14,9 @@ declare module '@mui/material/styles' {
     highlight: string
   }
 }
+
+declare module '@mui/material/CardHeader' {
+  interface CardHeaderPropsVariantOverrides {
+    size?: true
+  }
+}