Merge pull request #8739 from Marcelixoo/refactor/migrate-bug-bounty-…

…cards-to-chakra-ui Migrate BugBountyCards component to chakra UI [Relates to #6374]
ethereum · Dec 22, 2022 · 30c10b2 · 30c10b2
2 parents dbfc5d8 + 53b8efe
commit 30c10b2
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 120 deletions.
diff --git a/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts b/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts
@@ -10,6 +10,7 @@ const shadows = {
       "0 14px 66px rgba(0,0,0,.07), 0 10px 17px rgba(0,0,0,.03), 0 4px 7px rgba(0,0,0,.05)",
     dark: "0 14px 66px hsla(0,0%,96.1%,.07), 0 10px 17px hsla(0,0%,96.1%,.03), 0 4px 7px hsla(0,0%,96.1%,.05)",
   },
+  tableBoxHover: "0px 8px 17px rgba(0, 0, 0, 0.15)",
   tableItemBox: {
     light: "0 1px 1px rgba(0, 0, 0, 0.1)",
     dark: "0 1px 1px hsla(0,0%,100%,.1)",

diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
@@ -1,113 +1,163 @@
 import React from "react"
-import styled from "@emotion/styled"
+import {
+  Center,
+  CenterProps,
+  Flex,
+  FlexProps,
+  Heading,
+  HeadingProps,
+  Text,
+  TextProps,
+  Divider,
+  Box,
+  BoxProps,
+  useToken,
+} from "@chakra-ui/react"
+
 import { TranslationKey } from "../utils/translations"
 import ButtonLink from "./ButtonLink"
 
 import Translation from "./Translation"
 
-const CardRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin: 4rem 1rem;
-  flex-wrap: wrap;
-`
-
-const StyledButton = styled(ButtonLink)`
-  margin: 1rem;
-`
-
-const Card = styled.div`
-  flex: 1 1 260px;
-  @media (max-width: 1228px) {
-    flex: 1 1 360px;
-  }
-  display: flex;
-  flex-direction: column;
-  background: ${(props) => props.theme.colors.Background};
-  border-radius: 2px;
-  box-shadow: ${(props) => props.theme.colors.tableBoxShadow};
-  border: 1px solid ${(props) => props.theme.colors.border};
-  margin: 1rem;
-  justify-content: space-between;
-  &:hover {
-    border-radius: 4px;
-    box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
-    background: ${(props) => props.theme.colors.tableBackgroundHover};
-    transition: transform 0.1s;
-    transform: scale(1.02);
-  }
-`
-
-const Label = styled.div`
-  display: flex;
-  justify-content: center;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  border-top-left-radius: 1px;
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
-  padding: 0.25rem 0rem;
-`
-
-const LowLabel = styled(Label)`
-  background: ${(props) => props.theme.colors.lowBug};
-  color: ${(props) => props.theme.colors.black300};
-`
-
-const MediumLabel = styled(Label)`
-  background: ${(props) => props.theme.colors.mediumBug};
-  color: ${(props) => props.theme.colors.black300};
-`
-
-const HighLabel = styled(Label)`
-  background: ${(props) => props.theme.colors.fail400};
-  color: ${(props) => props.theme.colors.white};
-`
-
-const CriticalLabel = styled(Label)`
-  background: ${(props) => props.theme.colors.fail600};
-  color: ${(props) => props.theme.colors.white};
-`
-
-const H2 = styled.h2`
-  font-size: 1.5rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 22px;
-  letter-spacing: 0px;
-  padding: 1rem;
-  text-align: left;
-  margin-bottom: -0.5rem;
-  margin-top: 0.5rem;
-`
-
-const Description = styled.p`
-  font-size: 1.25rem;
-  padding: 1rem;
-  padding-top: 0rem;
-  padding-bottom: 0rem;
-  opacity: 0.6;
-`
-
-const Divider = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
-`
-
-const SubHeader = styled.p`
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  margin-left: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-  opacity: 0.6;
-`
-
-const Text = styled.div`
-  margin: 1rem;
-  margin-top: 0.5rem;
-`
+const CardRow = ({ children }) => (
+  <Flex justifyContent="space-between" my={16} mx={4} flexWrap="wrap">
+    {children}
+  </Flex>
+)
+
+const SubmitBugBountyButton = ({ children, ...props }) => (
+  <ButtonLink m={4} to="https://forms.gle/Gnh4gzGh66Yc3V7G8" {...props}>
+    {children}
+  </ButtonLink>
+)
+
+const Card = ({ children, ...props }: FlexProps) => {
+  const tableBoxShadow = useToken("colors", "tableBoxShadow")
+
+  return (
+    <Flex
+      flexDir="column"
+      flex={{ base: "1 1 412px", xl: "1 1 260px" }}
+      justifyContent="space-between"
+      bg="background"
+      borderRadius="2px"
+      boxShadow={tableBoxShadow}
+      border="1px solid"
+      borderColor="border"
+      m={4}
+      _hover={{
+        borderRadius: "base",
+        boxShadow: "tableBoxHover",
+        background: "tableBackgroundHover",
+        transition: "transform 0.1s",
+        transform: "scale(1.02)",
+      }}
+      {...props}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+type LabelVariant = "low" | "medium" | "high" | "critical"
+
+type LabelProps = CenterProps & {
+  variant: LabelVariant
+}
+
+const stylePropsByVariant = {
+  low: {
+    bg: "lowBug",
+    color: "black300",
+  },
+  medium: {
+    bg: "mediumBug",
+    color: "black300",
+  },
+  high: {
+    bg: "fail400",
+    color: "white",
+  },
+  critical: {
+    bg: "fail600",
+    color: "white",
+  },
+}
+
+const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
+  const variantStyleProps = stylePropsByVariant[variant]
+
+  return (
+    <Center
+      borderTopRightRadius="1px"
+      borderTopLeftRadius="1px"
+      borderBottomRightRadius={0}
+      borderBottomLeftRadius={0}
+      borderBottom="1px solid"
+      borderColor="border"
+      fontSize="sm"
+      px={0}
+      py={1}
+      textTransform="uppercase"
+      {...variantStyleProps}
+      {...props}
+    >
+      {children}
+    </Center>
+  )
+}
+
+const H2 = ({ children, ...props }: HeadingProps) => {
+  return (
+    <Heading
+      fontSize="2xl"
+      fontStyle="normal"
+      fontWeight="bold"
+      lineHeight="22px"
+      letterSpacing={0}
+      p={4}
+      textAlign="left"
+      mb={-2}
+      mt={2}
+      {...props}
+    >
+      {children}
+    </Heading>
+  )
+}
+
+const Description = ({ children, ...props }: TextProps) => {
+  return (
+    <Text as="p" fontSize="xl" px={4} py={0} opacity="0.6" {...props}>
+      {children}
+    </Text>
+  )
+}
+
+const SubHeader = ({ children, ...props }: TextProps) => {
+  return (
+    <Text
+      as="p"
+      textTransform="uppercase"
+      fontSize="sm"
+      ml={4}
+      mt={4}
+      mb={2}
+      opacity="0.6"
+      {...props}
+    >
+      {children}
+    </Text>
+  )
+}
+
+const TextBox = ({ children, ...props }: BoxProps) => {
+  return (
+    <Box m={4} mt={2} {...props}>
+      {children}
+    </Box>
+  )
+}
 
 export interface BugBountyCardInfo {
   lowLabelTranslationId?: TranslationKey
@@ -188,24 +238,24 @@ const BugBountyCards: React.FC<IProps> = () => (
     {bugBountyCardsInfo.map((card, idx) => (
       <Card key={`bug-bounty-card-${idx}`}>
         {card.lowLabelTranslationId && (
-          <LowLabel>
+          <Label variant="low">
             <Translation id={card.lowLabelTranslationId} />
-          </LowLabel>
+          </Label>
         )}
         {card.mediumLabelTranslationId && (
-          <MediumLabel>
+          <Label variant="medium">
             <Translation id={card.mediumLabelTranslationId} />
-          </MediumLabel>
+          </Label>
         )}
         {card.highLabelTranslationId && (
-          <HighLabel>
+          <Label variant="high">
             <Translation id={card.highLabelTranslationId} />
-          </HighLabel>
+          </Label>
         )}
         {card.criticalLabelTranslationId && (
-          <CriticalLabel>
+          <Label variant="critical">
             <Translation id={card.criticalLabelTranslationId} />
-          </CriticalLabel>
+          </Label>
         )}
         <H2>
           <Translation id={card.h2TranslationId} />
@@ -216,29 +266,29 @@ const BugBountyCards: React.FC<IProps> = () => (
         <SubHeader>
           <Translation id={card.subDescriptionTranslationId} />
         </SubHeader>
-        <Divider />
+        <Divider opacity="1" />
         <SubHeader>
           <Translation id={card.subHeader1TranslationId} />
         </SubHeader>
-        <Text>
+        <TextBox>
           <ul>
             {card.severityList.map((listItemId) => (
               <li key={`${listItemId}`}>
                 <Translation id={listItemId} />
               </li>
             ))}
           </ul>
-        </Text>
-        <Divider />
+        </TextBox>
+        <Divider opacity="1" />
         <SubHeader>
           <Translation id={card.subHeader2TranslationId} />
         </SubHeader>
-        <Text>
+        <TextBox>
           <Translation id={card.textTranslationId} />
-        </Text>
-        <StyledButton to="https://forms.gle/Gnh4gzGh66Yc3V7G8">
+        </TextBox>
+        <SubmitBugBountyButton>
           <Translation id={card.styledButtonTranslationId} />
-        </StyledButton>
+        </SubmitBugBountyButton>
       </Card>
     ))}
   </CardRow>