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}
+
+
+
+ )
+ })}
+
+
+
+ );
+};
+
+export default Account;