chore: use header tags more often and at right places

opynfinance · Feb 13, 2023 · 3c14564 · 3c14564
1 parent 3912418
commit 3c14564
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 52 deletions.
diff --git a/packages/frontend/src/components/InputNew/InputToken.tsx b/packages/frontend/src/components/InputNew/InputToken.tsx
@@ -59,6 +59,9 @@ const useInputTokenProps = makeStyles((theme) =>
     textMonospace: {
       fontFamily: 'DM Mono',
     },
+    fontMedium: {
+      fontWeight: 500,
+    },
   }),
 )
 
@@ -152,7 +155,7 @@ export const InputToken: React.FC<InputTokenProps> = ({
 
           {showMaxAction && (
             <ButtonBase onClick={onBalanceClick}>
-              <Typography variant="subtitle2" color="primary">
+              <Typography variant="body2" color="primary" className={classes.fontMedium}>
                 (Max)
               </Typography>
             </ButtonBase>

diff --git a/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx b/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx
@@ -28,6 +28,7 @@ import { pnlGraphOptions } from '@constants/diagram'
 import useAppMemo from '@hooks/useAppMemo'
 import { useOnChainETHPrice } from '@hooks/useETHPrice'
 import { toTokenAmount } from '@utils/calculations'
+import PerformanceMetric from '@components/Strategies/PerformanceMetric'
 
 const useTextFieldStyles = makeStyles((theme) =>
   createStyles({
@@ -80,29 +81,6 @@ const CustomTextField: React.FC<TextFieldProps> = ({ inputRef, label, InputProps
   )
 }
 
-const PerformanceMetric: React.FC<{ label: string; value: number }> = ({ label, value }) => {
-  const classes = useStyles()
-
-  return (
-    <Box display="flex" justifyContent="flex-end" gridGap="6px">
-      <Typography className={classes.textSmall}>{label}</Typography>
-
-      <Box minWidth="6ch" display="flex" justifyContent="flex-end">
-        <Typography
-          className={clsx(
-            classes.textSmall,
-            classes.textMonospace,
-            value >= 0 ? classes.colorSuccess : classes.colorError,
-          )}
-        >
-          {value >= 0 && '+'}
-          {formatNumber(value)}%
-        </Typography>
-      </Box>
-    </Box>
-  )
-}
-
 const TooltipTitle = () => (
   <>
     {'Annualized return based on selected dates.'}
@@ -190,7 +168,9 @@ const StrategyPerformance: React.FC<StrategyPerformanceProps> = ({ strategyPnLSe
         </Typography>
 
         <Box display="flex" alignItems="baseline" gridGap="12px">
-          <Typography className={classes.description}>Annualized ETH Return</Typography>
+          <Typography variant="h4" className={classes.description}>
+            Annualized ETH Return
+          </Typography>
 
           <Box position="relative" top="3px">
             <Tooltip title={<TooltipTitle />}>
@@ -204,7 +184,9 @@ const StrategyPerformance: React.FC<StrategyPerformanceProps> = ({ strategyPnLSe
         <Typography className={clsx(classes.description, classes.textMonospace)}>
           {formatNumber(tvl, 0) + ' ETH'}
         </Typography>
-        <Typography className={classes.description}>Open Interest</Typography>
+        <Typography variant="h4" className={classes.description}>
+          Open Interest
+        </Typography>
       </Box>
 
       <Box display="flex" justifyContent="space-between" alignItems="flex-end" gridGap="12px" flexWrap="wrap">

diff --git a/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx b/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx
@@ -21,10 +21,10 @@ import {
 } from '@state/crab/atoms'
 import { BIG_ZERO, CRABV2_START_DATE } from '@constants/index'
 import { useETHPrice } from '@hooks/useETHPrice'
-import { useOSQTHPrice } from '@hooks/useOSQTHPrice'
 import { formatCurrency, formatNumber } from '@utils/formatter'
 import { pnlGraphOptions } from '@constants/diagram'
 import useAppMemo from '@hooks/useAppMemo'
+import PerformanceMetric from '@components/Strategies/PerformanceMetric'
 
 const useTextFieldStyles = makeStyles((theme) =>
   createStyles({
@@ -77,29 +77,6 @@ const CustomTextField: React.FC<TextFieldProps> = ({ inputRef, label, InputProps
   )
 }
 
-const PerformanceMetric: React.FC<{ label: string; value: number }> = ({ label, value }) => {
-  const classes = useStyles()
-
-  return (
-    <Box display="flex" justifyContent="flex-end" gridGap="6px">
-      <Typography className={classes.textSmall}>{label}</Typography>
-
-      <Box minWidth="6ch" display="flex" justifyContent="flex-end">
-        <Typography
-          className={clsx(
-            classes.textSmall,
-            classes.textMonospace,
-            value >= 0 ? classes.colorSuccess : classes.colorError,
-          )}
-        >
-          {value >= 0 && '+'}
-          {formatNumber(value)}%
-        </Typography>
-      </Box>
-    </Box>
-  )
-}
-
 const TooltipTitle = () => (
   <>
     {'Annualized return based on selected dates.'}
@@ -187,7 +164,9 @@ const StrategyPerformance: React.FC<StrategyPerformanceProps> = ({ strategyPnLSe
         </Typography>
 
         <Box display="flex" alignItems="baseline" gridGap="12px">
-          <Typography className={classes.description}>Annualized USDC Return</Typography>
+          <Typography variant="h4" className={classes.description}>
+            Annualized USDC Return
+          </Typography>
 
           <Box position="relative" top="3px">
             <Tooltip title={<TooltipTitle />}>
@@ -199,7 +178,9 @@ const StrategyPerformance: React.FC<StrategyPerformanceProps> = ({ strategyPnLSe
 
       <Box display="flex" gridGap="12px">
         <Typography className={clsx(classes.description, classes.textMonospace)}>{formatCurrency(tvl, 0)}</Typography>
-        <Typography className={classes.description}>Open Interest</Typography>
+        <Typography variant="h4" className={classes.description}>
+          Open Interest
+        </Typography>
       </Box>
 
       <Box display="flex" justifyContent="space-between" alignItems="flex-end" gridGap="12px" flexWrap="wrap">

diff --git a/packages/frontend/src/components/Strategies/PerformanceMetric.tsx b/packages/frontend/src/components/Strategies/PerformanceMetric.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Box, Typography } from '@material-ui/core'
+import clsx from 'clsx'
+
+import useStyles from './styles'
+import { formatNumber } from '@utils/formatter'
+
+const PerformanceMetric: React.FC<{ label: string; value: number }> = ({ label, value }) => {
+  const classes = useStyles()
+
+  return (
+    <Box display="flex" justifyContent="flex-end" alignItems="center" gridGap="6px">
+      <Typography variant="h4" className={classes.textSmall}>
+        {label}
+      </Typography>
+
+      <Box minWidth="6ch" display="flex" justifyContent="flex-end">
+        <Typography
+          className={clsx(
+            classes.textSmall,
+            classes.textMonospace,
+            value >= 0 ? classes.colorSuccess : classes.colorError,
+          )}
+        >
+          {value >= 0 && '+'}
+          {formatNumber(value)}%
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+
+export default PerformanceMetric