Consolidate Link props

.eslintrc.js

@@ -146,10 +146,9 @@ module.exports = {
           'Using default React import is discouraged, please use named exports directly instead.',
       },
       {
-        // forbid <a> in favor of <LinkButton> or <ExternalLink>
+        // forbid <a> in favor of <Link>
         selector: 'JSXOpeningElement[name.name="a"]',
-        message:
-          'Using <a> is discouraged, please use <LinkButton> or <ExternalLink> instead.',
+        message: 'Using <a> is discouraged, please use <Link> instead.',
       },
     ],
     'no-restricted-imports': [

packages/desktop-client/src/components/DevelopmentTopBar.tsx

@@ -1,6 +1,6 @@
 import { theme } from '../style';
 
-import { ExternalLink } from './common/ExternalLink';
+import { Link } from './common/Link';
 import { View } from './common/View';
 
 export function DevelopmentTopBar() {
@@ -20,12 +20,13 @@ export function DevelopmentTopBar() {
     >
       <View>This is a demo build of Actual.</View>
       <View>
-        <ExternalLink
+        <Link
+          variant="external"
           linkColor="purple"
           to={`https://github.com/actualbudget/actual/pull/${process.env.REACT_APP_REVIEW_ID}`}
         >
           Open the PR: #{process.env.REACT_APP_REVIEW_ID}
-        </ExternalLink>
+        </Link>
       </View>
     </View>
   );

packages/desktop-client/src/components/FatalError.tsx

@@ -3,8 +3,7 @@ import React, { useState } from 'react';
 
 import { Block } from './common/Block';
 import { Button } from './common/Button';
-import { ExternalLink } from './common/ExternalLink';
-import { LinkButton } from './common/LinkButton';
+import { Link } from './common/Link';
 import { Modal } from './common/Modal';
 import { Paragraph } from './common/Paragraph';
 import { Stack } from './common/Stack';
@@ -50,12 +49,13 @@ function RenderSimple({ error }: RenderSimpleProps) {
         function properly. If you’re seeing this error, either your browser does
         not support <code>SharedArrayBuffer</code>, or your server is not
         sending the appropriate headers, or you are not using HTTPS. See{' '}
-        <ExternalLink
+        <Link
+          variant="external"
           linkColor="muted"
           to="https://actualbudget.org/docs/troubleshooting/shared-array-buffer"
         >
           our troubleshooting documentation
-        </ExternalLink>{' '}
+        </Link>{' '}
         to learn more. <SharedArrayBufferOverride />
       </Text>
     );
@@ -67,12 +67,13 @@ function RenderSimple({ error }: RenderSimpleProps) {
       <Text>
         There was a problem loading the app in this browser version. If this
         continues to be a problem, you can{' '}
-        <ExternalLink
+        <Link
+          variant="external"
           linkColor="muted"
           to="https://github.com/actualbudget/releases"
         >
           download the desktop app
-        </ExternalLink>
+        </Link>
         .
       </Text>
     );
@@ -89,9 +90,13 @@ function RenderSimple({ error }: RenderSimpleProps) {
       <Text>{msg}</Text>
       <Text>
         Please get{' '}
-        <ExternalLink linkColor="muted" to="https://actualbudget.org/contact">
+        <Link
+          variant="external"
+          linkColor="muted"
+          to="https://actualbudget.org/contact"
+        >
           in touch
-        </ExternalLink>{' '}
+        </Link>{' '}
         for support
       </Text>
     </Stack>
@@ -104,9 +109,9 @@ function RenderUIError() {
       <Paragraph>There was an unrecoverable error in the UI. Sorry!</Paragraph>
       <Paragraph>
         If this error persists, please get{' '}
-        <ExternalLink to="https://actualbudget.org/contact">
+        <Link variant="external" to="https://actualbudget.org/contact">
           in touch
-        </ExternalLink>{' '}
+        </Link>{' '}
         so it can be investigated.
       </Paragraph>
     </>
@@ -146,9 +151,13 @@ function SharedArrayBufferOverride() {
       </Button>
     </>
   ) : (
-    <LinkButton onClick={() => setExpanded(true)} style={{ marginLeft: 5 }}>
+    <Link
+      variant="text"
+      onClick={() => setExpanded(true)}
+      style={{ marginLeft: 5 }}
+    >
       Advanced options
-    </LinkButton>
+    </Link>
   );
 }
 
@@ -171,7 +180,9 @@ export function FatalError({ buttonText, error }: FatalErrorProps) {
           </Button>
         </Paragraph>
         <Paragraph isLast={true} style={{ fontSize: 11 }}>
-          <LinkButton onClick={() => setShowError(true)}>Show Error</LinkButton>
+          <Link variant="text" onClick={() => setShowError(true)}>
+            Show Error
+          </Link>
           {showError && (
             <Block
               style={{

packages/desktop-client/src/components/ManageRules.tsx

@@ -24,7 +24,7 @@ import { useSelected, SelectedProvider } from '../hooks/useSelected';
 import { theme } from '../style';
 
 import { Button } from './common/Button';
-import { ExternalLink } from './common/ExternalLink';
+import { Link } from './common/Link';
 import { Search } from './common/Search';
 import { Stack } from './common/Stack';
 import { Text } from './common/Text';
@@ -267,12 +267,13 @@ function ManageRulesContent({
           >
             <Text>
               Rules are always run in the order that you see them.{' '}
-              <ExternalLink
+              <Link
+                variant="external"
                 to="https://actualbudget.org/docs/budgeting/rules/"
                 linkColor="muted"
               >
                 Learn more
-              </ExternalLink>
+              </Link>
             </Text>
           </View>
           <View style={{ flex: 1 }} />

packages/desktop-client/src/components/Notifications.tsx

@@ -16,8 +16,7 @@ import { SvgDelete } from '../icons/v0';
 import { styles, theme, type CSSProperties } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button';
-import { ExternalLink } from './common/ExternalLink';
-import { LinkButton } from './common/LinkButton';
+import { Link } from './common/Link';
 import { Stack } from './common/Stack';
 import { Text } from './common/Text';
 import { View } from './common/View';
@@ -43,7 +42,8 @@ function compileMessage(
                 if (href[0] === '#') {
                   const actionName = href.slice(1);
                   return (
-                    <LinkButton
+                    <Link
+                      variant="text"
                       key={idx}
                       onClick={async e => {
                         e.preventDefault();
@@ -55,14 +55,19 @@ function compileMessage(
                       }}
                     >
                       {text}
-                    </LinkButton>
+                    </Link>
                   );
                 }
 
                 return (
-                  <ExternalLink linkColor="purple" key={idx} to={match[2]}>
+                  <Link
+                    variant="external"
+                    linkColor="purple"
+                    key={idx}
+                    to={match[2]}
+                  >
                     {match[1]}
-                  </ExternalLink>
+                  </Link>
                 );
               }
               return <Text key={idx}>{part}</Text>;

packages/desktop-client/src/components/Titlebar.tsx

@@ -33,7 +33,6 @@ import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import { Button, ButtonWithLoading } from './common/Button';
-import { ExternalLink } from './common/ExternalLink';
 import { Link } from './common/Link';
 import { Paragraph } from './common/Paragraph';
 import { Text } from './common/Text';
@@ -364,12 +363,13 @@ function BudgetTitlebar() {
                 </ButtonWithLoading>
               </Paragraph>
               <Paragraph isLast={true}>
-                <ExternalLink
+                <Link
+                  variant="external"
                   to="https://actualbudget.org/docs/experimental/report-budget"
                   linkColor="muted"
                 >
                   How do these types of budgeting work?
-                </ExternalLink>
+                </Link>
               </Paragraph>
             </Tooltip>
           )}

packages/desktop-client/src/components/UpdateNotification.tsx

@@ -8,7 +8,7 @@ import { SvgClose } from '../icons/v1';
 import { theme } from '../style';
 
 import { Button } from './common/Button';
-import { LinkButton } from './common/LinkButton';
+import { Link } from './common/Link';
 import { Text } from './common/Text';
 import { View } from './common/View';
 
@@ -45,17 +45,19 @@ export function UpdateNotification() {
           <View style={{ flex: 1 }} />
           <View style={{ marginTop: -1 }}>
             <Text>
-              <LinkButton
+              <Link
+                variant="text"
                 onClick={updateApp}
                 style={{
                   color: theme.buttonPrimaryText,
                   textDecoration: 'underline',
                 }}
               >
                 Restart
-              </LinkButton>{' '}
+              </Link>{' '}
               (
-              <LinkButton
+              <Link
+                variant="text"
                 style={{
                   color: theme.buttonPrimaryText,
                   textDecoration: 'underline',
@@ -67,7 +69,7 @@ export function UpdateNotification() {
                 }
               >
                 notes
-              </LinkButton>
+              </Link>
               )
               <Button
                 type="bare"

packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx

@@ -8,7 +8,7 @@ import { useActions } from '../../hooks/useActions';
 import { SvgExclamationOutline } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
-import { ExternalLink } from '../common/ExternalLink';
+import { Link } from '../common/Link';
 import { View } from '../common/View';
 import { Tooltip } from '../tooltips';
 
@@ -41,9 +41,9 @@ function getErrorMessage(type, code) {
   return (
     <>
       An internal error occurred. Try to login again, or get{' '}
-      <ExternalLink to="https://actualbudget.org/contact/">
+      <Link variant="external" to="https://actualbudget.org/contact/">
         in touch
-      </ExternalLink>{' '}
+      </Link>{' '}
       for support.
     </>
   );