Added transaction buttons

atlantabitdevs · May 7, 2022 · e062ac4 · e062ac4
1 parent cc83fe6
commit e062ac4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/frontend/src/components/Button.js b/frontend/src/components/Button.js
@@ -1,7 +1,11 @@
 import React from "react";
 
-const Button = ({children, style, to, disabled, onClick}) => {
-  let classes = "w-full p-4 rounded-md text-white font-display text-xl"
+const Button = ({children, style, to, disabled, onClick, size, direction}) => {
+  let classes = "w-full rounded-md text-white font-display"
+
+  if(size === 'small') classes += ' p-2 text-lg'
+  else classes += ' p-4 text-xl'
+
   if(style !== 'free') {
     classes += ' drop-shadow-md'
     classes += disabled ? ' bg-fam-orange-inactive' : ' bg-fam-orange'
@@ -12,7 +16,9 @@ const Button = ({children, style, to, disabled, onClick}) => {
 
   return (
     <button className={classes} disabled={disabled} onClick={onClick}>
-      <span className="drop-shadow-md flex flex-row align-center justify-center space-x-2">{children}</span>
+      <span className={"drop-shadow-md flex align-center justify-center items-center" + (direction === 'vertical' ? ' flex-col space-y-2' : ' flex-row space-x-2')}>
+        {children}
+      </span>
     </button>
   )
 }

diff --git a/frontend/src/routes/Home.js b/frontend/src/routes/Home.js
@@ -2,6 +2,7 @@ import React from "react";
 import { Link, Outlet } from "react-router-dom";
 import Button from '../components/Button';
 import {PlusIcon} from '@heroicons/react/solid';
+import {ReceiveIcon, ScanIcon, SendIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
 
 const Home = () => {
   return (
@@ -10,12 +11,12 @@ const Home = () => {
       <div className="min-w-screen min-h-screen p-8 flex flex-col justify-center z-10 relative">
         <h1 className="text-2xl">Welcome, Jerry</h1>
 
-        <div className="rounded-lg bg-fam-bg-dark p-8 drop-shadow-lg my-4 border border-fam-teal border-solid">
+        <div className="tile">
           <h2 className="mb-4">Your Balance</h2>
           <p className="text-4xl">1000 <span>sats</span></p>
         </div>
 
-        <div className="rounded-lg bg-fam-bg-dark p-8 drop-shadow-lg my-4 border border-fam-teal border-solid space-y-4 flex flex-col">
+        <div className="tile">
           <h2>Members</h2>
 
           <p className="text-lg">Your tribe has no members. Add&nbsp;one! </p>
@@ -24,7 +25,22 @@ const Home = () => {
             <Button><PlusIcon className="w-8 h-8" /> <span>Add Member</span></Button>
           </Link>
         </div>
-
+
+
+        <div className="flex flex-row space-x-2 mt-8">
+          <Link to="/" className="basis-1/3">
+            <Button size="large" direction="vertical"><SendIcon className="w-8 h-8" /> <span>Send</span></Button>
+          </Link>
+          <Link to="/" className="basis-1/3">
+            <Button size="large" direction="vertical"><ScanIcon className="w-8 h-8" /> <span>Scan</span></Button>
+          </Link>
+          <Link to="/onboarding" className="basis-1/3">
+            <Button size="large" direction="vertical">
+              <ReceiveIcon className="w-8 h-8" /> <span>Receive</span>
+            </Button>
+          </Link>
+        </div>
+
       </div>
       <Outlet />
     </div>