Merge pull request #711 from threshold-network/no-bridge-fees-padding…

…-fix-for-mobile

No bridge fees improvements

.git-blame-ignore-revs

@@ -3,3 +3,4 @@
 50c6d966435451b12691611784aa0dd6ad0927fa
 1911b2106aada277cb49835f9983e4ba04a1affa
 b89fbc32ba93e921df994499f3c29512ab59a71e
+0b3d20bbba7a706603c91aef512a5f18d5c8ff17

src/components/Navbar/NavbarComponent.tsx

@@ -7,6 +7,7 @@ import {
   Stack,
   useColorModeValue,
   H5,
+  HStack,
 } from "@threshold-network/components"
 import { Routes, Route, Link, useMatch } from "react-router-dom"
 import WalletConnectionAlert from "./WalletConnectionAlert"
@@ -19,6 +20,7 @@ import ThresholdWhite from "../../static/icons/ThresholdWhite"
 import useChakraBreakpoint from "../../hooks/useChakraBreakpoint"
 import { pages } from "../../pages"
 import { PageComponent } from "../../types"
+import { NoBridgeFeesPageTitleBadge } from "../tBTC"
 
 interface NavbarComponentProps {
   account?: string | null
@@ -79,7 +81,15 @@ const renderPageTitle = (PageComponent: PageComponent) => {
       path={`${PageComponent.route.path}/*`}
       element={
         PageComponent.route.title ? (
-          <PageTitle title={PageComponent.route.title} />
+          <HStack display={{ base: "none", md: "flex" }}>
+            <PageTitle title={PageComponent.route.title} />
+            {PageComponent.route.title === "tBTC" && (
+              <NoBridgeFeesPageTitleBadge
+                display={"flex"}
+                alignItems={"center"}
+              />
+            )}
+          </HStack>
         ) : (
           <></>
         )
@@ -89,11 +99,7 @@ const renderPageTitle = (PageComponent: PageComponent) => {
 }
 
 const PageTitle: FC<{ title: string }> = ({ title }) => {
-  return (
-    <H5 ml={12} display={{ base: "none", md: "block" }}>
-      {title}
-    </H5>
-  )
+  return <H5 ml={12}>{title}</H5>
 }
 
 const renderMobileHeader = (PageComponent: PageComponent) => {
@@ -103,7 +109,15 @@ const renderMobileHeader = (PageComponent: PageComponent) => {
       path={`${PageComponent.route.path}/*`}
       element={
         PageComponent.route.title ? (
-          <MobileHeader title={PageComponent.route.title} />
+          <HStack display={{ base: "flex", md: "none" }}>
+            <MobileHeader title={PageComponent.route.title} />
+            {PageComponent.route.title === "tBTC" && (
+              <NoBridgeFeesPageTitleBadge
+                display={"flex"}
+                alignItems={"center"}
+              />
+            )}
+          </HStack>
         ) : (
           <></>
         )
@@ -114,14 +128,7 @@ const renderMobileHeader = (PageComponent: PageComponent) => {
 
 const MobileHeader: FC<{ title: string }> = ({ title }) => {
   return (
-    <Box
-      display={{ base: "flex", md: "none" }}
-      as="header"
-      pl={10}
-      py={6}
-      borderBottom="1px"
-      borderColor="gray.100"
-    >
+    <Box as="header" pl={10} py={6} borderBottom="1px" borderColor="gray.100">
       <H5>{title}</H5>
     </Box>
   )

src/components/PageTitleBadge/index.tsx

@@ -0,0 +1,23 @@
+import { Box, BoxProps, useColorModeValue } from "@threshold-network/components"
+import { FC } from "react"
+import pageTitleBadgeIconLight from "../../static/images/page-title-badge-light.svg"
+import pageTitleBadgeIconDark from "../../static/images/page-title-badge-dark.svg"
+
+export const PageTitleBadge: FC<BoxProps> = ({ children, ...restProps }) => {
+  const backgroundImage = useColorModeValue(
+    pageTitleBadgeIconLight,
+    pageTitleBadgeIconDark
+  )
+  return (
+    <Box
+      backgroundImage={backgroundImage}
+      backgroundSize={"cover"}
+      maxWidth={"392px"}
+      width={"100%"}
+      height={"36px"}
+      {...restProps}
+    >
+      {children}
+    </Box>
+  )
+}

src/components/tBTC/NoBridgeFeesPageTitleBadge.tsx

@@ -0,0 +1,27 @@
+import {
+  BodySm,
+  BoxProps,
+  Text,
+  useColorModeValue,
+} from "@threshold-network/components"
+import { FC } from "react"
+import { PageTitleBadge } from "../PageTitleBadge"
+
+export const NoBridgeFeesPageTitleBadge: FC<BoxProps> = ({ ...restProps }) => {
+  const textColor = useColorModeValue("brand.500", "brand.300")
+  return (
+    <PageTitleBadge {...restProps}>
+      <BodySm
+        ml={12}
+        textTransform={"uppercase"}
+        color={textColor}
+        letterSpacing={".5px"}
+      >
+        <Text as="span" fontWeight={"bold"}>
+          No Bridge fees
+        </Text>{" "}
+        until february 10, 2024!
+      </BodySm>
+    </PageTitleBadge>
+  )
+}

src/components/tBTC/index.ts

@@ -1,7 +1,8 @@
-export * from "./TakeNoteList"
-export * from "./Links"
-export * from "./Stats"
-export * from "./tBTCText"
 export * from "./BridgeActivity"
 export * from "./BridgeProcessIndicator"
+export * from "./Links"
+export * from "./NoBridgeFeesPageTitleBadge"
 export * from "./SendBitcoinsToDepositAddressForm"
+export * from "./Stats"
+export * from "./TakeNoteList"
+export * from "./tBTCText"

src/pages/Overview/NoBridgeFeesBanner.tsx

@@ -1,29 +1,31 @@
-import { BodyMd, Stack, Image, VStack } from "@threshold-network/components"
 import {
-  AnnouncementBannerContainer,
-  AnnouncementBannerContainerProps,
-} from "../../components/AnnouncementBanner"
+  BodyMd,
+  Stack,
+  Image,
+  VStack,
+  Card,
+  BoxProps,
+} from "@threshold-network/components"
 import ButtonLink from "../../components/ButtonLink"
 import santaIsComing from "../../static/images/santa-is-coming.png"
 import noBridgeFeesText from "../../static/images/no-bridge-fees-text.svg"
 import { FC } from "react"
 
-export const NoBridgeFeesBanner: FC<AnnouncementBannerContainerProps> = ({
-  ...props
-}) => {
+export const NoBridgeFeesBanner: FC<BoxProps> = ({ ...props }) => {
   return (
-    <AnnouncementBannerContainer
-      hideCloseBtn
-      py={{ base: 6, xl: 8 }}
+    <Card
+      p={{ base: 6, xl: 10 }}
       backgroundImage={santaIsComing}
       backgroundSize={"cover"}
       backgroundPosition={{ base: "25%", xl: "center" }}
+      border={"none"}
+      boxShadow={"none"}
       {...props}
     >
       <Stack
         direction={{ base: "column", xl: "row" }}
-        alignItems={{ base: "left", xl: "center" }}
-        justifyContent={"space-between"}
+        alignItems={{ base: "start", xl: "center" }}
+        justifyContent={{ base: "left", xl: "space-between" }}
       >
         <VStack alignItems={"start"}>
           <Image
@@ -34,11 +36,10 @@ export const NoBridgeFeesBanner: FC<AnnouncementBannerContainerProps> = ({
             until February 10, 2024!
           </BodyMd>
         </VStack>
-
         <ButtonLink to={"/tBTC"} px={"6"} maxWidth={"150px"}>
           Start Minting
         </ButtonLink>
       </Stack>
-    </AnnouncementBannerContainer>
+    </Card>
   )
 }

src/pages/tBTC/HowItWorks/index.tsx

@@ -6,12 +6,10 @@ import { MintingTimelineCard } from "./MintingTimelineCard"
 import { JSONFileCard } from "./JSONFileCard"
 import { Banner } from "./Banner"
 import { PageComponent } from "../../../types"
-import { NoBridgeFeesBanner } from "../../Overview/NoBridgeFeesBanner"
 
 const HowItWorksPage: PageComponent = (props) => {
   return (
     <>
-      <NoBridgeFeesBanner mb={"4"} />
       <Banner />
       <TbtcBridgeCard mb="4" />
       <SimpleGrid columns={{ base: 1, xl: 2 }} spacing="4">