Update basic buttons to match the style guide

dapp/src/components/AcrePointsClaimModal.tsx

@@ -175,12 +175,7 @@ function AcrePointsClaimModalBase({
         </VStack>
       </MotionBox>
 
-      <Button
-        opacity={0}
-        onClick={closeModal}
-        data-close-button
-        variant="outline"
-      >
+      <Button onClick={closeModal} data-close-button variant="outline">
         Yay!
       </Button>
 

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -205,8 +205,9 @@ export default function ConnectWalletButton({
       <CardHeader>
         <ArrivingSoonTooltip shouldDisplayTooltip={connector.isDisabled}>
           <Button
-            variant="ghost"
+            variant="unstyled"
             boxSize="full"
+            display="flex"
             justifyContent="start"
             p={6}
             onClick={handleButtonClick}

dapp/src/components/Footer.tsx

@@ -5,14 +5,11 @@ import {
   List,
   ListItem,
   LinkProps,
-  Link,
-  Button,
-  Icon,
 } from "@chakra-ui/react"
 import { externalHref } from "#/constants"
 import { AcreSignIcon } from "#/assets/icons"
 import { useMobileMode } from "#/hooks"
-import { IconArrowUpRight } from "@tabler/icons-react"
+import LinkButton from "./shared/LinkButton"
 
 type FooterListItem = Pick<LinkProps, "href" | "children">
 
@@ -61,14 +58,7 @@ const getItemsList = (
   <List __css={styles.list}>
     {items.map((link) => (
       <ListItem key={link.href}>
-        <Button
-          as={Link}
-          __css={styles.link}
-          iconSpacing={0}
-          rightIcon={<Icon as={IconArrowUpRight} />}
-          {...link}
-          isExternal
-        />
+        <LinkButton isExternal {...link} />
       </ListItem>
     ))}
   </List>

dapp/src/components/Header/ConnectWallet.tsx

@@ -190,7 +190,7 @@ export default function ConnectWallet() {
                   closeOnClick={false}
                 >
                   <IconButton
-                    variant="ghost"
+                    variant="unstyled"
                     aria-label={option.id}
                     icon={<Icon as={option.icon} boxSize={5} />}
                     px={2}

dapp/src/components/MezoBeehiveModal.tsx

@@ -5,21 +5,20 @@ import {
   HStack,
   VStack,
   Icon,
-  Button,
   Card,
   CardBody,
   CardHeader,
   ModalCloseButton,
-  Link,
   Flex,
   Text,
 } from "@chakra-ui/react"
 import { AcreSignIcon, MatsIcon, MezoSignIcon } from "#/assets/icons"
-import { IconArrowUpRight, IconChartPieFilled } from "@tabler/icons-react"
+import { IconChartPieFilled } from "@tabler/icons-react"
 import { externalHref } from "#/constants"
 import { numbersUtils } from "#/utils"
 import { useMats } from "#/hooks"
 import withBaseModal from "./ModalRoot/withBaseModal"
+import LinkButton from "./shared/LinkButton"
 
 function MezoBeehiveModalBase() {
   const { data } = useMats()
@@ -115,18 +114,9 @@ function MezoBeehiveModalBase() {
                   activate a trillion dollar opportunity.
                 </Text>
 
-                <Button
-                  as={Link}
-                  href={externalHref.MEZO_INFO}
-                  isExternal
-                  variant="link"
-                  textDecorationLine="none"
-                  rightIcon={
-                    <Icon as={IconArrowUpRight} boxSize={4} color="acre.50" />
-                  }
-                >
+                <LinkButton href={externalHref.MEZO_INFO} isExternal>
                   More info
-                </Button>
+                </LinkButton>
               </VStack>
             </CardBody>
           </Card>

dapp/src/components/MobileModeBanner/index.tsx

@@ -58,7 +58,8 @@ function MobileModeBanner(props: MobileModeBannerProps) {
         {!forceOpen && (
           <Button
             onClick={handleBannerOpen}
-            variant="ghost"
+            variant="unstyled"
+            display="flex"
             rightIcon={
               <MotionIcon
                 as={IconChevronDown}
@@ -68,7 +69,6 @@ function MobileModeBanner(props: MobileModeBannerProps) {
             }
             iconSpacing={0}
             color="acre.50"
-            p={0}
             h="auto"
             ml={2}
           >

dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   HStack,
   Icon,
-  Link,
   ModalBody,
   ModalCloseButton,
   ModalFooter,
@@ -19,6 +18,7 @@ import {
   IconReload,
   IconServerBolt,
 } from "@tabler/icons-react"
+import LinkButton from "#/components/shared/LinkButton"
 // import TooltipIcon from "#/components/shared/TooltipIcon"
 
 export default function ServerErrorModal({
@@ -42,8 +42,7 @@ export default function ServerErrorModal({
           Your deposit didn't go through but no worries, your funds are
           safe.
         </Text>
-        <Button
-          as={Link}
+        <LinkButton
           size="lg"
           width="100%"
           variant="outline"
@@ -52,7 +51,7 @@ export default function ServerErrorModal({
           isExternal
         >
           Get help on Discord
-        </Button>
+        </LinkButton>
       </ModalBody>
       <ModalFooter
         py={6}
@@ -75,7 +74,6 @@ export default function ServerErrorModal({
           </Text>
         </Flex>
         <Button
-          // TODO: Use a loading button
           isLoading={isLoading}
           leftIcon={<Icon as={IconReload} boxSize={5} color="acre.50" />}
           variant="outline"

dapp/src/components/TransactionModal/SuccessModal.tsx

@@ -1,7 +1,5 @@
 import React from "react"
 import {
-  HStack,
-  Icon,
   ModalBody,
   ModalCloseButton,
   ModalFooter,
@@ -13,7 +11,6 @@ import { LoadingSpinnerSuccessIcon } from "#/assets/icons"
 import { useActionFlowTokenAmount, useActionFlowTxHash } from "#/hooks"
 import CurrencyBalanceWithConversion from "#/components/shared/CurrencyBalanceWithConversion"
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
-import { IconArrowUpRight } from "@tabler/icons-react"
 import { activitiesUtils } from "#/utils"
 import { Alert, AlertIcon, AlertDescription } from "#/components/shared/Alert"
 import BlockExplorerLink from "../shared/BlockExplorerLink"
@@ -65,15 +62,12 @@ export default function SuccessModal({ type }: SuccessModalProps) {
             </Text>
           )}
           {ACTION_FLOW_TYPES.STAKE === type && txHash && (
-            /* TODO: Update styles */
-            <BlockExplorerLink id={txHash} type="transaction" chain="bitcoin">
-              <HStack gap={1}>
-                <Text size="sm" color="text.primary" fontWeight="semibold">
-                  View on Mempool
-                </Text>
-                <Icon as={IconArrowUpRight} color="acre.50" boxSize={4} />
-              </HStack>
-            </BlockExplorerLink>
+            <BlockExplorerLink
+              id={txHash}
+              type="transaction"
+              chain="bitcoin"
+              text="View on Mempool"
+            />
           )}
         </VStack>
       </ModalBody>

dapp/src/components/UnexpectedErrorModal.tsx

@@ -1,8 +1,6 @@
 import React from "react"
 import {
-  Button,
   Icon,
-  Link,
   ModalBody,
   ModalCloseButton,
   ModalFooter,
@@ -13,6 +11,7 @@ import { externalHref } from "#/constants"
 import { IconBrandDiscordFilled } from "@tabler/icons-react"
 import { BaseModalProps } from "#/types"
 import withBaseModal from "./ModalRoot/withBaseModal"
+import LinkButton from "./shared/LinkButton"
 
 export function UnexpectedErrorModalBase({ withCloseButton }: BaseModalProps) {
   return (
@@ -25,8 +24,7 @@ export function UnexpectedErrorModalBase({ withCloseButton }: BaseModalProps) {
         <Text size="md">Please try again.</Text>
       </ModalBody>
       <ModalFooter py={6} px={8} flexDirection="row">
-        <Button
-          as={Link}
+        <LinkButton
           size="lg"
           width="100%"
           variant="outline"
@@ -35,7 +33,7 @@ export function UnexpectedErrorModalBase({ withCloseButton }: BaseModalProps) {
           isExternal
         >
           Get help on Discord
-        </Button>
+        </LinkButton>
       </ModalFooter>
     </>
   )

dapp/src/components/shared/BlockExplorerLink.tsx

@@ -1,33 +1,31 @@
 import React from "react"
 import { Chain, ExplorerDataType } from "#/types"
-import { Link, LinkProps } from "@chakra-ui/react"
 import { chainUtils } from "#/utils"
+import LinkButton, { LinkButtonProps } from "./LinkButton"
 
 type BlockExplorerLinkProps = {
   id: string
   type: ExplorerDataType
   chain?: Chain
-} & Omit<LinkProps, "isExternal">
+  text?: string
+} & Omit<LinkButtonProps, "href" | "isExternal" | "children">
 
-function BlockExplorerLink({
+export default function BlockExplorerLink({
   id,
   type,
+  text,
   chain = "bitcoin",
-  children,
-  ...restProps
+  ...props
 }: BlockExplorerLinkProps) {
   const { link, title } = chainUtils.createLinkToBlockExplorerForChain(
     chain,
     id,
     type,
   )
 
-  // TODO: Update when ButtonLink is ready
   return (
-    <Link href={link} isExternal {...restProps}>
-      {children ?? title}
-    </Link>
+    <LinkButton href={link} isExternal {...props}>
+      {text ?? title}
+    </LinkButton>
   )
 }
-
-export default BlockExplorerLink

dapp/src/components/shared/Form/FormSubmitButton.tsx

@@ -1,21 +1,22 @@
 import React from "react"
 import { useFormikContext } from "formik"
-import { ButtonProps } from "@chakra-ui/react"
-import LoadingButton from "../LoadingButton"
+import { Button, ButtonProps } from "@chakra-ui/react"
+import Spinner from "../Spinner"
 
 export default function FormSubmitButton({ children, ...props }: ButtonProps) {
   const { isSubmitting, isValid } = useFormikContext()
 
   return (
-    <LoadingButton
+    <Button
       type="submit"
       size="lg"
       width="100%"
       isLoading={isSubmitting}
       isDisabled={!isValid}
+      spinner={<Spinner />}
       {...props}
     >
       {children}
-    </LoadingButton>
+    </Button>
   )
 }

dapp/src/components/shared/LinkButton.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Button, ButtonProps, Icon, Link, LinkProps } from "@chakra-ui/react"
+import { IconArrowUpRight } from "@tabler/icons-react"
+
+export type LinkButtonProps = ButtonProps & LinkProps
+
+export default function LinkButton({ children, ...props }: LinkButtonProps) {
+  return (
+    <Button
+      as={Link}
+      variant="link"
+      className="link-button"
+      textDecoration="none !important"
+      rightIcon={
+        <Icon
+          as={IconArrowUpRight}
+          color="acre.50"
+          sx={{
+            ".link-button:hover &": {
+              color: "currentColor",
+            },
+            ".link-button:active &": {
+              color: "currentColor",
+            },
+            ".link-button[disabled] &": {
+              color: "currentColor",
+            },
+          }}
+        />
+      }
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}

dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx

@@ -24,16 +24,7 @@ function ClaimableBalanceLabel() {
   if (claimableBalance <= 0) return null
 
   return (
-    <Button
-      mt={5}
-      onClick={debouncedClaimPoints}
-      w="full"
-      colorScheme="oldPalette.green"
-      bgColor="green.50"
-      color="ivoire.10"
-      fontWeight="semibold"
-      size="lg"
-    >
+    <Button mt={5} onClick={debouncedClaimPoints} w="full" size="lg">
       Claim {formattedClaimablePointsAmount} PTS
     </Button>
   )