9c0df36e16
* style: enforce sorting of imports * style: alphabetize imports * style: merge duplicated imports
49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Tooltip, Pointer, P } from 'loot-design/src/components/common';
|
|
import { colors } from 'loot-design/src/style';
|
|
|
|
import { Title } from './common';
|
|
import Navigation from './Navigation';
|
|
|
|
function TransactionAdd({ targetRect, navigationProps }) {
|
|
return (
|
|
<Tooltip
|
|
targetRect={targetRect}
|
|
position="bottom-center"
|
|
width={400}
|
|
style={{
|
|
border: 'none',
|
|
backgroundColor: 'transparent',
|
|
color: colors.n1,
|
|
boxShadow: 'none',
|
|
marginTop: 5,
|
|
fontSize: 14
|
|
}}
|
|
>
|
|
<Pointer
|
|
backgroundColor="white"
|
|
pointerPosition="center"
|
|
innerStyle={{ padding: 20 }}
|
|
>
|
|
<Title>Let's add some transactions</Title>
|
|
<P>
|
|
You can add transactions in two ways: import files from your bank or
|
|
manually add individual transactions. You can usually download these
|
|
files straight from your online bank account. (QIF/OFX/QFX is
|
|
supported, sometimes called a "Quicken File")
|
|
</P>
|
|
|
|
<P isLast={true}>
|
|
Try <strong>clicking "Add New"</strong> to see how adding transactions
|
|
affects your budget.
|
|
</P>
|
|
|
|
<Navigation {...navigationProps} showBack={false} />
|
|
</Pointer>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export default TransactionAdd;
|