add gg22 notif bar

components/Body/NotificationBar.tsx

@@ -18,15 +18,15 @@ const CLOSED_KEY = "new-ui-notif-closed";
 function NotificationBar() {
   const isClosed = localStorage.getItem(CLOSED_KEY);
 
-  const [isVisible, setIsVisible] = useState(
-    isClosed === "true" ? false : true
-  );
+  // const [isVisible, setIsVisible] = useState(
+  //   isClosed === "true" ? false : true
+  // );
 
-  useEffect(() => {
-    if (!isVisible) {
-      localStorage.setItem(CLOSED_KEY, "true");
-    }
-  }, [isVisible]);
+  // useEffect(() => {
+  //   if (!isVisible) {
+  //     localStorage.setItem(CLOSED_KEY, "true");
+  //   }
+  // }, [isVisible]);
 
   // const [donor, setDonor] = useState<string>();
 
@@ -41,21 +41,52 @@ function NotificationBar() {
   //     });
   // }, []);
 
-  return isVisible ? (
+  return process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
     <Alert status="info" bg={"#151515"}>
       <Center w="100%">
-        <Text>
-          <span style={{ fontSize: "1.2rem" }}>✨</span>{" "}
-          <span style={{ fontWeight: "bold" }}>New UI is here</span>
-        </Text>
+        <Link
+          href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
+          isExternal
+          _hover={{
+            textDecor: "none",
+          }}
+        >
+          <HStack
+            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>Support on</Text>
+
+            <HStack ml={-0.5} fontWeight="bold">
+              <Text>Gitcoin Grants</Text>
+              <ExternalLinkIcon />
+            </HStack>
+          </HStack>
+        </Link>
       </Center>
-      <CloseButton
+      {/* <CloseButton
         alignSelf="flex-start"
         position="relative"
         right={-1}
         top={-1}
         onClick={() => setIsVisible(false)}
-      />
+      /> */}
     </Alert>
   ) : null;
 }

components/Body/index.tsx

@@ -640,7 +640,9 @@ function Body() {
 
   return (
     <>
-      {/* <NotificationBar /> */}
+      {process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" && (
+        <NotificationBar />
+      )}
       <Container mt="10" mb="16" minW={["0", "0", "2xl", "2xl"]}>
         <Flex>
           <Spacer flex="1" />