Re-implement token title card to fix all layout issues

oasisprotocol · Jun 30, 2023 · 3d223d1 · 3d223d1
1 parent a19b05b
commit 3d223d1
Showing 1 changed file with 43 additions and 12 deletions.
diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
@@ -2,7 +2,9 @@ import { FC } from 'react'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useLoaderData } from 'react-router-dom'
 import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
 import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
 import { ContractVerificationIcon } from '../../components/ContractVerificationIcon'
@@ -27,16 +29,45 @@ export const TokenTitleCard: FC = () => {
 
   return (
     <Card>
-      <CardHeader
-        disableTypography
-        component="h2"
-        title={title}
-        subheader={subTitle}
-        action={
-          addressEth ? (
+      <CardContent>
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
+              {title}
+            </Typography>
+            &nbsp;
+            <Typography
+              variant="h2"
+              sx={{
+                color: COLORS.grayMedium,
+                fontWeight: 700,
+              }}
+            >
+              {subTitle}
+            </Typography>
+          </Box>
+          {addressEth && (
             <Box
               sx={{
-                display: 'inline-flex',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
               }}
             >
               <ContractVerificationIcon
@@ -47,9 +78,9 @@ export const TokenTitleCard: FC = () => {
               <AccountLink scope={account} address={addressEth} />
               <CopyToClipboard value={account.address_eth || account.address} />
             </Box>
-          ) : null
-        }
-      />
+          )}
+        </Box>
+      </CardContent>
     </Card>
   )
 }