add vision field to fish

Author: mutoo

app/containers/ModalCritterDetail/components/detail-fish.js

@@ -201,7 +201,7 @@ const DetailFish = ({ data }) => {
           </Text>
         </Container>
         <Container flex="0 0 auto" width={['100%', '', '50%']} mb="lg">
-          <Heading mr="lg">Price</Heading>
+          <Heading mr="lg">Rarity</Heading>
           <Text
             as="span"
             sx={{
@@ -210,11 +210,11 @@ const DetailFish = ({ data }) => {
               fontStyle: 'italic',
             }}
           >
-            {data?.price} bells ( {data?.price * 1.5} when sell to C.J. )
+            {data?.rarity}
           </Text>
         </Container>
         <Container flex="0 0 auto" width={['100%', '', '50%']} mb="lg">
-          <Heading mr="lg">Rarity</Heading>
+          <Heading mr="lg">Vision</Heading>
           <Text
             as="span"
             sx={{
@@ -223,7 +223,20 @@ const DetailFish = ({ data }) => {
               fontStyle: 'italic',
             }}
           >
-            {data?.rarity}
+            {data?.vision}
+          </Text>
+        </Container>
+        <Container flex="0 0 auto" width={['100%', '', '50%']} mb="lg">
+          <Heading mr="lg">Price</Heading>
+          <Text
+            as="span"
+            sx={{
+              fontSize: '14px',
+              fontWeight: 'bold',
+              fontStyle: 'italic',
+            }}
+          >
+            {data?.price} bells ( {data?.price * 1.5} when sell to C.J. )
           </Text>
         </Container>
         <Container flex="0 0 auto" width={['100%', '', '50%']} mb="lg">