Merge pull request #263 from threshold-network/issue-231-application-image-color

How It Works page - application details styling adjustments

Author: r-czajkowski

src/components/InfoBox/index.tsx

@@ -11,7 +11,7 @@ const InfoBox: FC<{ text?: string; variant?: any } & StackProps> = ({
   const styles = useStyleConfig("InfoBox", { variant })
 
   return (
-    <Stack sx={styles} {...props}>
+    <Stack __css={styles} {...props}>
       {text && <H3>{text}</H3>}
       {children}
     </Stack>

src/pages/Staking/HowItWorks/StakingApplications/ApplicationDetailsCard.tsx

@@ -1,9 +1,8 @@
 import { FC } from "react"
-import { IoAlertCircle, MdCheckCircle } from "react-icons/all"
+import { MdCheckCircle } from "react-icons/all"
 import {
   BodyMd,
   Box,
-  BoxLabel,
   Card,
   H5,
   HStack,
@@ -14,7 +13,7 @@ import {
   useColorModeValue,
   List,
   ListItem,
-  SimpleGrid,
+  Grid,
 } from "@threshold-network/components"
 import InfoBox from "../../../../components/InfoBox"
 
@@ -35,20 +34,33 @@ const ApplicationDetailsCard: FC<Props> = ({
   ctaButtons,
   rewardSteps,
 }) => {
-  const infoBoxBg = useColorModeValue("gray.50", "gray.900")
+  const infoBoxBg = useColorModeValue("gray.50", "blackAlpha.300")
 
   return (
     <Card boxShadow="none" as="section">
       <LabelSm mb={6}>{preTitle}</LabelSm>
-      <SimpleGrid columns={{ base: 1, xl: 2 }} spacing={10}>
-        <Stack spacing={6}>
+      <Grid
+        gridAutoColumns="minmax(0, 1fr)"
+        gridAutoFlow="column"
+        gridTemplate={{
+          base: `
+          "app-details"
+          "cta-buttons"
+        `,
+          xl: `
+            "app-details    app-details    cta-buttons"
+          `,
+        }}
+        gridGap="8"
+      >
+        <Stack spacing={6} gridArea="app-details">
           <H5>{title}</H5>
           <BodyMd>{description}</BodyMd>
           <InfoBox bg={infoBoxBg}>
             <Image m="auto" maxH="180px" maxW="360px" w="100%" src={imgSrc} />
           </InfoBox>
         </Stack>
-        <Box>
+        <Box gridArea="cta-buttons">
           {ctaButtons}
           <LabelSm mb={6}>How to earn rewards</LabelSm>
           <List mb={6} as={Stack} spacing={2}>
@@ -62,7 +74,7 @@ const ApplicationDetailsCard: FC<Props> = ({
             })}
           </List>
         </Box>
-      </SimpleGrid>
+      </Grid>
     </Card>
   )
 }

src/pages/Staking/HowItWorks/StakingApplications/index.tsx

@@ -117,7 +117,10 @@ const StakingApplications: PageComponent = () => {
             </ListItem>
           </List>
         </Stack>
-        <Image maxW="528px" src={iconMap.stakingApps[colorMode]} />
+        <Image
+          maxW={{ base: "100%", xl: "528px" }}
+          src={iconMap.stakingApps[colorMode]}
+        />
       </Stack>
       <Stack spacing={6}>
         <ApplicationDetailsCard

src/pages/Staking/HowItWorks/index.tsx

@@ -51,6 +51,7 @@ const HowItWorksPage: PageComponent = () => {
   return (
     <Box>
       <AnnouncementBanner
+        variant="secondary"
         imgSrc={howItWorksIllustration}
         title="Find more information about staking below, then go to the staking page."
         href="/staking"

src/theme/AnnouncementBanner.ts

@@ -38,6 +38,7 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => {
       background: mode("gradient.3", undefined)(props),
       backgroundClip: mode("text", undefined)(props),
       textFillColor: mode("transparent", undefined)(props),
+      margin: { base: "auto", xl: 0 },
     },
     title: {
       textAlign: { base: "center", xl: "unset" },
@@ -53,7 +54,20 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => {
   }
 }
 
+const secondaryVariant: PartsStyleFunction<typeof parts> = (props) => ({
+  container: {
+    bg: mode("brand.50", "#2B3036")(props),
+    border: mode("none", "1px solid")(props),
+    borderColor: "brand.300",
+  },
+})
+
+const variants = {
+  secondary: secondaryVariant,
+}
+
 export const AnnouncementBanner = {
   parts: parts.keys,
   baseStyle,
+  variants,
 }