diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx index 10852738cb..9df6cd3472 100644 --- a/packages/desktop-client/src/components/common.tsx +++ b/packages/desktop-client/src/components/common.tsx @@ -141,6 +141,7 @@ export function Link({ style, children, ...nativeProps }: LinkProps) { font: 'inherit', ':hover': { textDecoration: 'underline', + boxShadow: 'none', }, }, styles.smallText, diff --git a/packages/desktop-client/src/components/modals/CreateAccount.js b/packages/desktop-client/src/components/modals/CreateAccount.js index a2cade1a87..152ef80082 100644 --- a/packages/desktop-client/src/components/modals/CreateAccount.js +++ b/packages/desktop-client/src/components/modals/CreateAccount.js @@ -5,7 +5,6 @@ import { pushModal } from 'loot-core/src/client/actions/modals'; import useNordigenStatus from '../../hooks/useNordigenStatus'; import { authorizeBank } from '../../nordigen'; -import { colors } from '../../style'; import { View, Text, Modal, P, Button, ButtonWithLoading } from '../common'; export default function CreateAccount({ modalProps, syncServerStatus }) { @@ -41,73 +40,83 @@ export default function CreateAccount({ modalProps, syncServerStatus }) { return ( {() => ( - - - Link your bank accounts to automatically download - transactions. We offer hundreds of banks to sync with, and Nordigen - will provide reliable, up-to-date information. - - - - {isNordigenSetupComplete - ? 'Link bank account' - : 'Set-up Nordigen for bank-sync'} - - {isNordigenSetupComplete && ( - - )} - - {syncServerStatus !== 'online' && ( -

- Nordigen integration is only available for budgets using - actual-server.{' '} - - Learn more. - -

- )} - - - You can also create a local account if you want to track - transactions manually. You can add transactions manually or import - QIF/OFX/QFX files. + + + Create a local account if you want to add + transactions manually. You can also{' '} + + import QIF/OFX/QFX files into a local account + + . + + + + + {syncServerStatus === 'online' ? ( + <> + + {isNordigenSetupComplete + ? 'Link bank account with Nordigen' + : 'Set up Nordigen for bank sync'} + + + Link a bank account to automatically download + transactions. Nordigen provides reliable, up-to-date + information from hundreds of banks. + + + ) : ( + <> + +

+ Connect to an Actual server to set up{' '} + + automatic syncing with Nordigen + + . +

+ + )} - - )} diff --git a/packages/desktop-client/src/components/modals/NordigenExternalMsg.js b/packages/desktop-client/src/components/modals/NordigenExternalMsg.js index 975a3b2bdb..1dc7bf36e5 100644 --- a/packages/desktop-client/src/components/modals/NordigenExternalMsg.js +++ b/packages/desktop-client/src/components/modals/NordigenExternalMsg.js @@ -6,10 +6,11 @@ import { sendCatch } from 'loot-core/src/platform/client/fetch'; import useNordigenStatus from '../../hooks/useNordigenStatus'; import AnimatedLoading from '../../icons/AnimatedLoading'; +import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple'; import { colors } from '../../style'; import { Error, Warning } from '../alerts'; import Autocomplete from '../autocomplete/Autocomplete'; -import { View, Modal, Button, P, Link } from '../common'; +import { View, Modal, Button, P, Link, Menu, Tooltip } from '../common'; import { FormField, FormLabel } from '../forms'; import { COUNTRY_OPTIONS } from './countries'; @@ -77,6 +78,7 @@ export default function NordigenExternalMsg({ let [country, setCountry] = useState(); let [error, setError] = useState(null); let [isNordigenSetupComplete, setIsNordigenSetupComplete] = useState(null); + let [menuOpen, setMenuOpen] = useState(false); let data = useRef(null); const { @@ -141,7 +143,14 @@ export default function NordigenExternalMsg({ {isBankOptionError ? ( Failed loading available banks: Nordigen access credentials might be - misconfigured. Please set them up again. + misconfigured. Please{' '} + + set them up + {' '} + again. ) : ( country && @@ -189,18 +198,50 @@ export default function NordigenExternalMsg({ before proceeding. - + + + + ); }; diff --git a/upcoming-release-notes/1137.md b/upcoming-release-notes/1137.md new file mode 100644 index 0000000000..2ffeb25f8b --- /dev/null +++ b/upcoming-release-notes/1137.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [j-f1] +--- + +Nordigen: Update design of the “create account” flow