Merge pull request #7 from atlantabitdevs/feature/stephen-updates

Feature/stephen updates

frontend/.gitignore

@@ -14,6 +14,8 @@ bower_components
 
 *.sublime*
 
+build
+
 psd
 thumb
 sketch

frontend/src/App.js

@@ -30,7 +30,7 @@ function App() {
   return (
     <div className="app">
       <nav className={"fixed bg-fam-bg-dark h-screen w-screen z-50 p-8 space-y-8 transition-all " + (menuActive ? 'right-0' : 'right-full')}>
-        <p className="text-4xl lowercase font-display drop-shadow-xl font-[900]">Tribe</p>
+        <p className="text-4xl font-display drop-shadow-xl font-[900]">Cete</p>
         <ul className="space-y-8 text-lg">
           <li>
             <Link className="flex flex-row items-center space-x-2" to="/" onClick={toggleMenu}>

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>
   )
 }

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>

frontend/src/routes/NewFamily.js

@@ -12,7 +12,7 @@ const NewFamily = () => {
     <>
       {step === 0 ?
       <div className="p-8 space-y-8 min-h-screen flex flex-col align-center justify-center bg-snowpeaks bg-cover">
-        <h2 className="text-4xl font-display drop-shadow-xl font-[600]">What is your tribe name?</h2>
+        <h2 className="text-4xl font-display drop-shadow-xl font-[600]">What is your family name?</h2>
 
         <p>We'll walk you through the process of creating a bitcoin vault for your family. First, tell us what to call this vault.</p>
 

frontend/src/routes/Onboarding.js

@@ -6,16 +6,16 @@ const Onboarding = () => {
   return (
     <div className="p-8 space-y-8 min-h-screen flex flex-col align-center justify-center bg-mountains bg-cover">
       <div className="mb-16">
-        <h1 className="text-8xl lowercase font-display drop-shadow-xl font-[900] my-8">Tribe</h1>
+        <h1 className="text-8xl font-display drop-shadow-xl font-[900] my-8">Cete</h1>
 
         <p className="text-2xl">Finances for your people</p>
       </div>
 
       <Link to="/new-family">
-        <Button>Create a new tribe</Button>
+        <Button>Create a new cete</Button>
       </Link>
 
-      <Button style="free">Restore existing tribe</Button>
+      <Button style="free">Restore existing cete</Button>
 
       <p className="text-center drop-shadow-md pt-32">Made with ❤️ in the ATL</p>
     </div>