feat: add CardTitle

lifinance · Apr 26, 2022 · 260339a · 260339a
1 parent fd0afa3
commit 260339a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 39 deletions.
diff --git a/packages/widget/src/components/Card/CardContainer.tsx b/packages/widget/src/components/Card/CardContainer.tsx
@@ -1,9 +1,10 @@
 import { Box } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 export const CardContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
   border: `1px solid ${theme.palette.grey[300]}`,
   borderRadius: (theme.shape.borderRadius as number) * 2,
   overflow: 'hidden',
+  flex: 1,
 }));
diff --git a/packages/widget/src/components/Card/CardTitle.tsx b/packages/widget/src/components/Card/CardTitle.tsx
@@ -0,0 +1,10 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const CardTitle = styled(Typography)(({ theme }) => ({
+  fontSize: '0.875rem',
+  lineHeight: '1.286',
+  letterSpacing: '0.01071em',
+  fontWeight: 'bold',
+  padding: theme.spacing(1.75, 2, 0, 2),
+}));
diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
@@ -1,5 +1,5 @@
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import { Avatar, Typography } from '@mui/material';
+import { Avatar } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -9,6 +9,7 @@ import {
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { routes } from '../../utils/routes';
+import { CardTitle } from '../Card';
 import { CardContainer } from '../Card/CardContainer';
 import { Card, SelectTokenCardHeader } from './SelectTokenButton.style';
 
@@ -35,15 +36,7 @@ export const SelectTokenButton: React.FC<SwapFormTypeProps> = ({
   return (
     <CardContainer>
       <Card onClick={handleClick} elevation={0}>
-        <Typography
-          variant="body2"
-          fontWeight="bold"
-          lineHeight={1}
-          pt={2}
-          px={2}
-        >
-          {t(`swap.${formType}`)}
-        </Typography>
+        <CardTitle>{t(`swap.${formType}`)}</CardTitle>
         <SelectTokenCardHeader
           avatar={
             isSelected ? (

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -1,4 +1,4 @@
-import { Avatar, FormControl, Typography } from '@mui/material';
+import { Avatar, FormControl } from '@mui/material';
 import { ChangeEvent } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,7 @@ import {
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { formatAmount } from '../../utils/format';
-import { CardContainer } from '../Card';
+import { CardContainer, CardTitle } from '../Card';
 import { SwapInputAdornment } from '../SwapInputAdornment';
 import { Input } from './SwapInput.style';
 
@@ -44,15 +44,7 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
 
   return (
     <CardContainer>
-      <Typography
-        variant="body2"
-        fontWeight="bold"
-        lineHeight={1}
-        px={2}
-        pt={2}
-      >
-        {t('swap.amount')}
-      </Typography>
+      <CardTitle>{t('swap.amount')}</CardTitle>
       <FormControl fullWidth>
         <Input
           size="small"

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react/no-array-index-key */
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import { Box, BoxProps, IconButton, Skeleton, Typography } from '@mui/material';
+import { Box, BoxProps, IconButton, Skeleton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useSwapRoutes } from '../../hooks';
 import { formatTokenAmount } from '../../utils/format';
 import { routes } from '../../utils/routes';
-import { CardContainer } from '../Card';
+import { CardContainer, CardTitle } from '../Card';
 import { SwapRouteCard } from '../SwapRouteCard';
 import { Stack } from './SwapRoutes.style';
 
@@ -25,9 +25,7 @@ export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
 
   return (
     <CardContainer mb={mb}>
-      <Typography variant="body2" fontWeight="bold" pl={2} pt={2}>
-        {t('swap.routes')}
-      </Typography>
+      <CardTitle>{t('swap.routes')}</CardTitle>
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Stack direction="row" spacing={2}>
           {isLoading

diff --git a/packages/widget/src/pages/SelectTokenPage/ChainSelect.tsx b/packages/widget/src/pages/SelectTokenPage/ChainSelect.tsx
@@ -6,18 +6,17 @@ import {
   MenuItem,
   SelectChangeEvent,
   Skeleton,
-  Typography,
 } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { CardContainer } from '../../components/Card';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
 import { useChains } from '../../hooks/useChains';
 import {
   SwapFormKeyHelper,
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { Select } from './ChainSelect.style';
 
 export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   const { t } = useTranslation();
@@ -36,15 +35,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
 
   return !isLoading ? (
     <CardContainer>
-      <Typography
-        variant="body2"
-        fontWeight="bold"
-        lineHeight={1}
-        px={2}
-        pt={2}
-      >
-        {t(`swap.selectChain`)}
-      </Typography>
+      <CardTitle>{t(`swap.selectChain`)}</CardTitle>
       <FormControl fullWidth>
         <Select
           labelId="label"