Adds secondary variant to announcment banner component

Author: georgeweiler

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

@@ -53,7 +53,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,
 }