Merge pull request #123 from threshold-network/how-it-works-page-updates

How it works page updates Fix some styling issues on How it works page based on the feedback. Mainly changes related towrong spacing between elements and wrong font colors.
threshold-network · Jun 13, 2022 · 887cf2b · 887cf2b
2 parents 6f67865 + b92d2ea
commit 887cf2b
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 40 deletions.
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
@@ -1,17 +1,19 @@
-import { FC } from "react"
+import { FC, ReactElement } from "react"
 import { Icon, Link, LinkProps, useColorModeValue } from "@chakra-ui/react"
 import { FiArrowUpRight } from "react-icons/all"
 
 interface Props {
   href: string
   text: string
   withArrow?: boolean
+  icon?: ReactElement
 }
 
 const ExternalLink: FC<Props & LinkProps> = ({
   text,
   href,
   withArrow,
+  icon,
   ...props
 }) => {
   const defaultColor = useColorModeValue("brand.500", "white")
@@ -26,9 +28,11 @@ const ExternalLink: FC<Props & LinkProps> = ({
       textDecoration="underline"
       {...props}
     >
-      {text}{" "}
-      {withArrow && (
-        <Icon boxSize="12px" as={FiArrowUpRight} color={finalColor} />
+      {text}
+      {withArrow ? (
+        <Icon boxSize="12px" ml="1" as={FiArrowUpRight} color={finalColor} />
+      ) : (
+        icon
       )}
     </Link>
   )

diff --git a/src/components/LinkDetailsListItem/index.tsx b/src/components/LinkDetailsListItem/index.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react"
 import { Box, HStack, ListItem, ListItemProps } from "@chakra-ui/react"
+import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { Body1, Body3 } from "../Typography"
 import ExternalLink from "../ExternalLink"
 import { ExternalHref } from "../../enums"
@@ -18,27 +19,24 @@ const LinkDetailsListItem: FC<LinkDetailsListItemProps> = ({
   cta = "Learn more",
   ...props
 }) => (
-  <ListItem
-    as={HStack}
-    spacing="4"
-    bg="gray.50"
-    p="4"
-    borderRadius="2"
-    {...props}
-  >
-    <Box bg="brand.500" borderRadius="8px" w="48px" height="48px" />
-    <Box>
-      <Body1>{title}</Body1>
-      <Body3>{subTitle}</Body3>
-    </Box>
-    <ExternalLink
-      fontWeight="600"
-      color="gray.700"
-      ml="auto !important"
-      text={cta}
-      href={href}
-      withArrow
-    />
+  <ListItem spacing="4" bg="gray.50" p="4" borderRadius="2" {...props}>
+    <HStack>
+      <Box bg="brand.500" borderRadius="8px" w="48px" height="48px" />
+      <Box>
+        <Body1>{title}</Body1>
+        <Body3>{subTitle}</Body3>
+      </Box>
+      <ExternalLink
+        fontSize="14px"
+        lineHeight="20px"
+        fontWeight="600"
+        color="gray.700"
+        ml="auto !important"
+        text={cta}
+        href={href}
+        icon={<ExternalLinkIcon ml="2" w="14px" h="14px" />}
+      />
+    </HStack>
   </ListItem>
 )
 

diff --git a/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx b/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx
@@ -1,23 +1,23 @@
 import { FC, ComponentProps } from "react"
 import { List, ListItem } from "@chakra-ui/react"
 import Card from "../../../components/Card"
-import { Label3 } from "../../../components/Typography"
+import { Label3, Body2 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
 
 export const AboutAddressesCard: FC<ComponentProps<typeof Card>> = (props) => {
   return (
     <Card {...props}>
       <Label3>about the Addresses you need to provide</Label3>
-      <List mt="5" spacing="6">
+      <List mt="5" spacing="5">
         {aboutAddresses.map((action) => (
           <ListItem key={action.sectionName}>
-            <BoxLabel w="fit-content" mb="5">
+            <BoxLabel w="fit-content" mb="4">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
               {action.items.map((item, index) => (
                 <ListItem key={`${action.sectionName}-${index}`}>
-                  {item}
+                  <Body2>{item}</Body2>
                 </ListItem>
               ))}
             </List>

diff --git a/src/pages/Staking/HowItWorks/ProvidersCard.tsx b/src/pages/Staking/HowItWorks/ProvidersCard.tsx
@@ -3,8 +3,8 @@ import { List } from "@chakra-ui/react"
 import Card from "../../../components/Card"
 import { Label3 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
-import { ExternalHref } from "../../../enums"
 import LinkDetailsListItem from "../../../components/LinkDetailsListItem"
+import { ExternalHref } from "../../../enums"
 
 export const ProvidersCard: FC<ComponentProps<typeof Card>> = (props) => {
   return (

diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx
@@ -1,23 +1,23 @@
 import { FC, ComponentProps } from "react"
 import { List, ListItem } from "@chakra-ui/react"
 import Card from "../../../components/Card"
-import { Label3 } from "../../../components/Typography"
+import { Label3, Body2 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
 
 export const StakingActionsCard: FC<ComponentProps<typeof Card>> = (props) => {
   return (
-    <Card gridArea="staking-actions">
+    <Card gridArea="staking-actions" {...props}>
       <Label3>staking actions</Label3>
-      <List mt="5" spacing="6">
+      <List mt="5" spacing="5">
         {stakingActions.map((action) => (
           <ListItem key={action.sectionName}>
-            <BoxLabel w="fit-content" mb="5">
+            <BoxLabel w="fit-content" mb="4">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
               {action.items.map((item, index) => (
                 <ListItem key={`${action.sectionName}-${index}}`}>
-                  {item}
+                  <Body2>{item}</Body2>
                 </ListItem>
               ))}
             </List>

diff --git a/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx b/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx
@@ -1,5 +1,5 @@
 import { FC, ComponentProps } from "react"
-import { UnorderedList, ListItem } from "@chakra-ui/react"
+import { UnorderedList, ListItem, useColorModeValue } from "@chakra-ui/react"
 import Card from "../../../components/Card"
 import { Body2, Label3 } from "../../../components/Typography"
 import ViewInBlockExplorer from "../../../components/ViewInBlockExplorer"
@@ -8,6 +8,9 @@ import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 export const ThresholdStakesCard: FC<
   ComponentProps<typeof Card> & { tStakingContractAddress: string }
 > = ({ tStakingContractAddress, ...props }) => {
+  const bulletColor = useColorModeValue("gray.700", "gray.300")
+  const bulletColorStyle = { "::marker": { color: bulletColor } }
+
   return (
     <Card {...props}>
       <Label3>threshold stakes</Label3>
@@ -21,12 +24,16 @@ export const ThresholdStakesCard: FC<
           id={tStakingContractAddress}
           type={ExplorerDataType.ADDRESS}
           text="Threshold Staking Contract"
-        />
+        />{" "}
         supports two types of stakes:
       </Body2>
-      <UnorderedList mt="5">
-        <ListItem>Legacy Stakes (NuCypher and Keep Network stakes)</ListItem>
-        <ListItem>New T Stakes</ListItem>
+      <UnorderedList mt="5" pl="2.5">
+        <ListItem sx={bulletColorStyle}>
+          <Body2>Legacy Stakes (NuCypher and Keep Network stakes)</Body2>
+        </ListItem>
+        <ListItem sx={bulletColorStyle}>
+          <Body2>New T Stakes</Body2>
+        </ListItem>
       </UnorderedList>
     </Card>
   )

diff --git a/src/pages/Staking/HowItWorks/index.tsx b/src/pages/Staking/HowItWorks/index.tsx
@@ -29,6 +29,7 @@ const HowItWorksPage: PageComponent = (props) => {
             "legacy-stakes   new-t-stakes"
             "legacy-stakes   staking-actions"
             "addresses       staking-actions"
+            "addresses       staking-actions"
             "addresses       providers"
           `,
       }}