add gitcoin notif bar

components/Body/NotificationBar.tsx

@@ -7,6 +7,7 @@ import {
   Link,
   HStack,
   Center,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
@@ -16,6 +17,9 @@ import axios from "axios";
 const CLOSED_KEY = "new-ui-notif-closed";
 
 function NotificationBar() {
+  const fontSize = useBreakpointValue({ base: "xs", sm: "sm", md: "md" });
+  const padding = useBreakpointValue({ base: 2, sm: 2, md: 3 });
+
   // const isClosed = localStorage.getItem(CLOSED_KEY);
 
   // const [isVisible, setIsVisible] = useState(
@@ -41,52 +45,57 @@ function NotificationBar() {
   //     });
   // }, []);
 
-  return (
+  return process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
-    <Alert status="info" bg={"#151515"}>
+    <Alert
+      status="info"
+      bg={"blackAlpha.400"}
+      py={padding}
+      px={4}
+      borderBottom="1px solid"
+      borderColor="whiteAlpha.200"
+      w="100%"
+      borderRadius={0}
+      margin={0}
+    >
       <Center w="100%">
         <Link
-          href={"https://solana.impersonator.xyz"}
+          href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
           isExternal
           _hover={{
             textDecor: "none",
           }}
         >
-          <HStack>
+          <HStack
-            <Text>
+            position="relative"
-              🟣 <b>SOLANA</b> support is live:
+            sx={{
-            </Text>
+              "&::after": {
-
+                content: '""',
-            <HStack
+                position: "absolute",
-              ml={-0.5}
+                bottom: 0,
-              fontWeight="bold"
+                left: 0,
-              position="relative"
+                right: 0,
-              sx={{
+                height: "2px",
-                "&::after": {
+                background: "linear-gradient(90deg, #FF0080, #7928CA, #FF0080)",
-                  content: '""',
+                backgroundSize: "200% 100%",
-                  position: "absolute",
+                animation: "gradient 3s linear infinite",
-                  bottom: 0,
+                "@keyframes gradient": {
-                  left: 0,
+                  "0%": { backgroundPosition: "0% 0%" },
-                  right: 0,
+                  "100%": { backgroundPosition: "200% 0%" },
-                  height: "2px",
-                  background:
-                    "linear-gradient(90deg, #FF0080, #7928CA, #FF0080)",
-                  backgroundSize: "200% 100%",
-                  animation: "gradient 3s linear infinite",
-                  "@keyframes gradient": {
-                    "0%": { backgroundPosition: "0% 0%" },
-                    "100%": { backgroundPosition: "200% 0%" },
-                  },
                 },
-              }}
+              },
-            >
+            }}
-              <Text>solana.impersonator.xyz</Text>
+          >
-              <ExternalLinkIcon />
+            <Text fontSize={fontSize}>Support on</Text>
+
+            <HStack ml={-0.5} fontWeight="bold">
+              <Text fontSize={fontSize}>Gitcoin Grants</Text>
+              <ExternalLinkIcon fontSize={fontSize} />
             </HStack>
           </HStack>
         </Link>
       </Center>
     </Alert>
-  );
+  ) : null;
 }
 
 export default NotificationBar;

components/Footer.tsx

@@ -92,12 +92,16 @@ function Footer() {
       <VStack>
         <Alert
           status="info"
+          maxW="20rem"
           bg={"whiteAlpha.200"}
           color="white"
           variant="solid"
           rounded="lg"
         >
-          <Stack direction={{ base: "column", md: "row" }}>
+          <Stack
+            direction={{ base: "column", md: "row" }}
+            justifyContent="space-between"
+          >
             <Center>Found the project helpful?</Center>
             <HStack>
               <Button
@@ -215,6 +219,41 @@ function Footer() {
             <FontAwesomeIcon icon={faDiscord} size="2x" />
           </Link>
         </Center>
+        <Center pt="2">
+          <Link
+            href={"https://solana.impersonator.xyz"}
+            isExternal
+            _hover={{
+              textDecor: "none",
+            }}
+          >
+            <HStack
+              fontWeight="bold"
+              position="relative"
+              sx={{
+                "&::after": {
+                  content: '""',
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: "2px",
+                  background:
+                    "linear-gradient(90deg, #FF0080, #7928CA, #FF0080)",
+                  backgroundSize: "200% 100%",
+                  animation: "gradient 3s linear infinite",
+                  "@keyframes gradient": {
+                    "0%": { backgroundPosition: "0% 0%" },
+                    "100%": { backgroundPosition: "200% 0%" },
+                  },
+                },
+              }}
+            >
+              <Text>🟣 SOLANA support is live: solana.impersonator.xyz</Text>
+              <ExternalLinkIcon />
+            </HStack>
+          </Link>
+        </Center>
       </VStack>
       <Spacer flex="1" />
     </Flex>

package.json

@@ -49,5 +49,6 @@
   },
   "devDependencies": {
     "pino-pretty": "^11.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.12.0+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca"
 }