diff --git a/frontend/public/flowers.jpg b/frontend/public/flowers.jpg new file mode 100644 index 0000000..97fc70f Binary files /dev/null and b/frontend/public/flowers.jpg differ diff --git a/frontend/src/App.js b/frontend/src/App.js index 2065bb1..801db1f 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -18,6 +18,7 @@ import {ChartSquareBarIcon} from '@heroicons/react/solid'; import NewFamily from './routes/NewFamily'; import Invite from './routes/Invite'; import Kid from './routes/Kid'; +import Grandma from './routes/Grandma'; const Child = {}; @@ -72,6 +73,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/frontend/src/index.css b/frontend/src/index.css index db09a06..713d987 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -17,6 +17,14 @@ background-size: cover; } +.grandma-bg { + @apply fixed h-screen w-screen z-0; + /*opacity: 0.10;*/ + filter: blur(2px); + background-image: url('../public/flowers.jpg'); + background-size: cover; +} + h1, h2 { @apply font-display; } @@ -35,4 +43,12 @@ h1, h2 { .kid { @apply bg-[#7350BC]; +} + +.grandma { + @apply bg-rose-100 text-neutral-600 border-rose-300; +} + +.grandma.slots > div { + @apply border-rose-300; } \ No newline at end of file diff --git a/frontend/src/routes/Family.js b/frontend/src/routes/Family.js index e8ad9d0..1d139e5 100644 --- a/frontend/src/routes/Family.js +++ b/frontend/src/routes/Family.js @@ -27,7 +27,7 @@ const Family = () => { name: 'Gertrude', photo: '/grandmother.jpg', balance: '90,000,023', - id: 'gertrude' + id: 'gertrude/grandma' } ]) diff --git a/frontend/src/routes/Grandma.js b/frontend/src/routes/Grandma.js new file mode 100644 index 0000000..0d9d170 --- /dev/null +++ b/frontend/src/routes/Grandma.js @@ -0,0 +1,119 @@ +import React from "react"; +import {Link, useParams} from "react-router-dom"; +import {ArrowDownIcon, ArrowUpIcon, BitcoinCircleIcon} from '@bitcoin-design/bitcoin-icons-react/filled'; +// unique account within family page +const Account = () => { + + + const {account} = useParams() + + const [transactions, setTransactions] = React.useState([ + { + counterparty: 'Miller Insurance Co.', + memo: 'Insurance payout', + date: '2022-06-01 14:55', + amount: 200000, + direction: 'receive' + }, + { + counterparty: 'Sunnyville', + memo: 'Assisted living rent', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + { + counterparty: 'Dr. Melissa Schafer, MD', + memo: 'Quarterly checkup', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + { + counterparty: 'Miller Insurance Co.', + memo: 'Insurance payout', + date: '2022-06-01 14:55', + amount: 200000, + direction: 'receive' + }, + { + counterparty: 'Sunnyville', + memo: 'Assisted living rent', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + { + counterparty: 'Dr. Melissa Schafer, MD', + memo: 'Quarterly checkup', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + { + counterparty: 'Miller Insurance Co.', + memo: 'Insurance payout', + date: '2022-06-01 14:55', + amount: 200000, + direction: 'receive' + }, + { + counterparty: 'Sunnyville', + memo: 'Assisted living rent', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + { + counterparty: 'Dr. Melissa Schafer, MD', + memo: 'Quarterly checkup', + date: '2022-06-01 14:55', + amount: 100000, + direction: 'send' + }, + ]) + + return ( +
+
+
+

Gertrude's Wallet

+ +
+

Your Balance

+

70,000,000 sats

+
+ +
+ {transactions.map((tx, index)=>{ + return( +
+
+ {tx.direction === 'send' ? + + + + : + + + + } +
+
+

{tx.counterparty}

+

{tx.date}

+

{tx.memo}

+
+
+

{tx.amount}

+
+
+ ) + })} +
+
+
+ ); +}; + +export default Account;