add link to GeogatedCountryPopover & adjust reach button styling

guildxyz · Apr 29, 2024 · 08b62ff · 08b62ff
1 parent 41c5429
commit 08b62ff
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/platforms/Token/GeogatedCountryAlert.tsx b/src/platforms/Token/GeogatedCountryAlert.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Icon,
+  Link,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -12,7 +13,7 @@ import {
 import { triggerChat } from "components/_app/IntercomProvider"
 import Button from "components/common/Button"
 import { IpGeodata } from "pages/api/ip-geodata"
-import { ArrowSquareIn } from "phosphor-react"
+import { Chat } from "phosphor-react"
 import useSWRImmutable from "swr/immutable"
 
 const BLOCKED_COUNTRY_CODES = [
@@ -75,15 +76,24 @@ export const GeogatedCountryPopover = ({ children, isDisabled }) => {
             Claiming is not available in your country
           </PopoverHeader>
           <PopoverBody pt="0">
-            {`Sorry, but this feature is currently not available in your country. We understand your frustration and are working hard to make it legally accessible. If you have any questions, feel free to `}
+            {`Sorry, but this feature is currently `}
+            <Link
+              href="https://help.guild.xyz/en/articles/9246601-restricted-countries"
+              isExternal
+              display="inline"
+              colorScheme="blue"
+            >
+              not available in your country.
+            </Link>
+            {` We understand your frustration and are working hard to make it legally accessible. If you have any questions, feel free to `}
             <Button
               variant="link"
               fontWeight={"semibold"}
-              opacity="0.8"
               onClick={triggerChat}
+              opacity="0.8"
             >
               reach out to us
-              <Icon as={ArrowSquareIn} ml="0.5" mb="-0.5" />
+              <Icon as={Chat} ml="1" mb="-0.5" />
             </Button>
           </PopoverBody>
         </PopoverContent>