fix: clean up the form a little more (#5410)

shapeshift · Oct 4, 2023 · 7f4b954 · 7f4b954
1 parent 0996078
commit 7f4b954
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 63 deletions.
diff --git a/src/components/FeeExplainer/FeeExplainer.tsx b/src/components/FeeExplainer/FeeExplainer.tsx
@@ -1,14 +1,4 @@
-import {
-  Box,
-  Card,
-  CardBody,
-  CardHeader,
-  Divider,
-  Flex,
-  Heading,
-  Stack,
-  useToken,
-} from '@chakra-ui/react'
+import { Box, Card, CardBody, Flex, Heading, Stack, useToken } from '@chakra-ui/react'
 import { LinearGradient } from '@visx/gradient'
 import { GridColumns, GridRows } from '@visx/grid'
 import { ParentSize, ScaleSVG } from '@visx/responsive'
@@ -264,7 +254,7 @@ export const FeeOutput: React.FC<FeeOutputProps> = ({ tradeSize, foxHolding }) =
   })
 
   return (
-    <CardHeader fontWeight='medium' pb={0}>
+    <Flex fontWeight='medium' pb={0}>
       <Stack width='full'>
         <Flex gap={4}>
           <Box flex={1} textAlign='center'>
@@ -292,9 +282,10 @@ export const FeeOutput: React.FC<FeeOutputProps> = ({ tradeSize, foxHolding }) =
           color='text.subtle'
           fontSize='sm'
           textAlign='center'
+          mb={4}
         />
       </Stack>
-    </CardHeader>
+    </Flex>
   )
 }
 
@@ -318,31 +309,28 @@ export const FeeExplainer = () => {
   }, [currentFoxHoldings, isLoading])
 
   return (
-    <Card flexDir='column' maxWidth='600px' width='full' mx='auto'>
-      <CardBody flex='1' p={feeExplainerCardBody}>
-        <Heading as='h5'>{translate('foxDiscounts.simulateTitle')}</Heading>
-        <Text color='text.subtle' translation='foxDiscounts.simulateBody' />
-      </CardBody>
-      <CardBody
-        flex='1'
-        flexDir='column'
-        justifyContent='center'
-        alignItems='center'
-        p={feeExplainerCardBody}
-      >
-        <Card>
-          <FeeOutput tradeSize={tradeSize} foxHolding={foxHolding} />
-          <FeeChart tradeSize={tradeSize} foxHolding={foxHolding} onHover={onHover} />
-          <Divider />
+    <Stack maxWidth='600px' width='full' mx='auto' spacing={0}>
+      <Card flexDir='column' borderBottomRadius={0}>
+        <CardBody flex='1' p={feeExplainerCardBody}>
+          <Heading as='h5' mb={2}>
+            {translate('foxDiscounts.simulateTitle')}
+          </Heading>
+          <Text color='text.subtle' translation='foxDiscounts.simulateBody' />
           <FeeSliders
             tradeSize={tradeSize}
             setTradeSize={setTradeSize}
             foxHolding={foxHolding}
             setFoxHolding={setFoxHolding}
             currentFoxHoldings={currentFoxHoldings ?? '0'}
           />
-        </Card>
-      </CardBody>
-    </Card>
+        </CardBody>
+      </Card>
+      <Card borderTopRadius={0} borderTopWidth={1} borderColor='border.base'>
+        <CardBody p={feeExplainerCardBody}>
+          <FeeOutput tradeSize={tradeSize} foxHolding={foxHolding} />
+          <FeeChart tradeSize={tradeSize} foxHolding={foxHolding} onHover={onHover} />
+        </CardBody>
+      </Card>
+    </Stack>
   )
 }
diff --git a/src/components/FeeExplainer/FeeSliders.tsx b/src/components/FeeExplainer/FeeSliders.tsx
@@ -1,18 +1,14 @@
 import { TriangleDownIcon } from '@chakra-ui/icons'
 import {
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
   Center,
-  Divider,
   Flex,
   Skeleton,
   Slider,
   SliderFilledTrack,
   SliderMark,
   SliderThumb,
   SliderTrack,
+  Stack,
   VStack,
 } from '@chakra-ui/react'
 import { useTranslate } from 'react-polyglot'
@@ -32,15 +28,15 @@ export const FeeSliders: React.FC<FeeSlidersProps> = ({
 }) => {
   const translate = useTranslate()
   return (
-    <VStack height='100%' spacing={0} mb={8} divider={<Divider />}>
-      <Card width='full' variant='unstyled' boxShadow='none'>
-        <CardHeader display='flex' width='full' justifyContent='space-between' fontWeight='medium'>
+    <VStack height='100%' spacing={8} mt={6}>
+      <Stack spacing={4} width='full'>
+        <Flex width='full' justifyContent='space-between' fontWeight='medium'>
           <Text translation='foxDiscounts.foxPower' />
           <Skeleton isLoaded={!isLoading}>
-            <Amount.Crypto value={foxHolding.toString()} symbol='FOX' />
+            <Amount.Crypto value={foxHolding.toString()} symbol='FOX' fontWeight='bold' />
           </Skeleton>
-        </CardHeader>
-        <CardBody width='100%'>
+        </Flex>
+        <Stack width='100%'>
           <Slider
             min={0}
             max={CHART_TRADE_SIZE_MAX_FOX}
@@ -49,7 +45,7 @@ export const FeeSliders: React.FC<FeeSlidersProps> = ({
             onChange={setFoxHolding}
           >
             <SliderTrack>
-              <SliderFilledTrack />
+              <SliderFilledTrack bg='blue.500' />
             </SliderTrack>
             <SliderThumb />
             <SliderMark value={250000} {...labelStyles}>
@@ -64,25 +60,22 @@ export const FeeSliders: React.FC<FeeSlidersProps> = ({
             <SliderMark value={1000000} {...labelStyles}>
               1MM
             </SliderMark>
-            <SliderMark value={Number(currentFoxHoldings)} top='-10px !important' color='blue.500'>
+            <SliderMark
+              value={Number(currentFoxHoldings)}
+              top='-14px !important'
+              color='yellow.500'
+            >
               <TriangleDownIcon />
             </SliderMark>
           </Slider>
-        </CardBody>
-        <CardFooter display='flex' width='full' alignItems='center' justifyContent='space-between'>
-          <Flex gap={2} alignItems='center'>
-            <Center boxSize={2} bg='blue.500' borderRadius='full' />
-            <RawText>{translate('foxDiscounts.currentFoxPower')}</RawText>
-          </Flex>
-          <Amount.Crypto value={currentFoxHoldings} symbol='FOX' maximumFractionDigits={0} />
-        </CardFooter>
-      </Card>
-      <Card width='full' variant='unstyled' boxShadow='none'>
-        <CardHeader display='flex' width='full' justifyContent='space-between' fontWeight='medium'>
+        </Stack>
+      </Stack>
+      <Stack width='full' spacing={4}>
+        <Flex width='full' justifyContent='space-between' fontWeight='medium'>
           <Text translation='foxDiscounts.tradeSize' />
-          <Amount.Fiat value={tradeSize} />
-        </CardHeader>
-        <CardBody width='100%' pb={8}>
+          <Amount.Fiat value={tradeSize} fontWeight='bold' />
+        </Flex>
+        <Stack width='100%' pb={8}>
           <Slider min={0} max={CHART_TRADE_SIZE_MAX_USD} value={tradeSize} onChange={setTradeSize}>
             <SliderMark value={CHART_TRADE_SIZE_MAX_USD * 0.2} {...labelStyles}>
               <Amount.Fiat value={CHART_TRADE_SIZE_MAX_USD * 0.2} abbreviated />
@@ -94,12 +87,24 @@ export const FeeSliders: React.FC<FeeSlidersProps> = ({
               <Amount.Fiat value={CHART_TRADE_SIZE_MAX_USD * 0.8} abbreviated={true} />
             </SliderMark>
             <SliderTrack>
-              <SliderFilledTrack />
+              <SliderFilledTrack bg='blue.500' />
             </SliderTrack>
             <SliderThumb />
           </Slider>
-        </CardBody>
-      </Card>
+        </Stack>
+      </Stack>
+      <Flex gap={2} alignItems='center' justifyContent='space-between' fontSize='sm'>
+        <Flex gap={2} alignItems='center'>
+          <Center boxSize={2} bg='yellow.500' borderRadius='full' />
+          <RawText>{translate('foxDiscounts.currentFoxPower')}</RawText>
+        </Flex>
+        <Amount.Crypto
+          fontWeight='bold'
+          value={currentFoxHoldings}
+          symbol='FOX'
+          maximumFractionDigits={0}
+        />
+      </Flex>
     </VStack>
   )
 }
diff --git a/src/components/FeeExplainer/common.tsx b/src/components/FeeExplainer/common.tsx
@@ -2,7 +2,7 @@ export const CHART_TRADE_SIZE_MAX_USD = 400000
 export const CHART_TRADE_SIZE_MAX_FOX = 1100000 // let them go a bit past a millionexport const labelStyles = {
 
 export const labelStyles = {
-  fontSize: 'sm',
+  fontSize: 'xs',
   mt: '2',
   ml: '-2.5',
   color: 'text.subtle',