enable theme vars, start on modal components

components/Button.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent } from 'react'
+
+interface ButtonProps {
+  onClick?: (x?) => void
+  disabled?: boolean
+  className?: string
+}
+
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  className,
+  ...props
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md text-th-fgd-1
+      active:border-th-primary hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2 
+      disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button

components/ContributionModal.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import useWalletStore from '../stores/useWalletStore'
+import Input from './Input'
+import Button from './Button'
+import Loading from './Loading'
+import WalletIcon from './WalletIcon'
+
+const ContributionModal = () => {
+  const connected = useWalletStore((s) => s.connected)
+  const wallet = useWalletStore((s) => s.current)
+
+  const [contributionAmount, setContributionAmount] = useState(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleConnectDisconnect = () => {
+    if (connected) {
+      wallet.disconnect()
+    } else {
+      wallet.connect()
+    }
+  }
+
+  const handleSetContribution = () => {
+    setSubmitting(true)
+  }
+
+  useEffect(() => {
+    const submitTimer = setTimeout(() => {
+      setSubmitting(false)
+    }, 1000)
+    return () => clearTimeout(submitTimer)
+  }, [submitting])
+
+  return (
+    <div className="bg-th-bkg-3 rounded-lg p-4 w-2/4 max-w-md">
+      <h2>Plant your seed</h2>
+      <p>Something...</p>
+      <Input
+        disabled={!connected}
+        type="number"
+        step={100}
+        onChange={(e) => setContributionAmount(e.target.value)}
+        value={contributionAmount}
+        className=""
+      />
+      <Button onClick={() => handleSetContribution()} className="w-full">
+        <div className={`flex items-center justify-center text-lg`}>
+          {submitting && <Loading />}
+          Set Contribution
+        </div>
+      </Button>
+      {connected ? (
+        <Button onClick={() => handleConnectDisconnect()}>Disconnect</Button>
+      ) : (
+        <Button onClick={() => handleConnectDisconnect()}>
+          Connect Wallet
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default ContributionModal

components/Input.tsx

@@ -0,0 +1,56 @@
+interface InputProps {
+  type: string
+  value: any
+  onChange: (e) => void
+  className?: string
+  disabled?: boolean
+  [x: string]: any
+}
+
+const Input = ({
+  type,
+  value,
+  onChange,
+  className,
+  wrapperClassName = 'w-full',
+  disabled,
+  prefix,
+  suffix,
+  ...props
+}: InputProps) => {
+  return (
+    <div className={`flex relative ${wrapperClassName}`}>
+      {prefix ? (
+        <div
+          className="flex items-center justify-end p-2 border border-r-0 
+          border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right"
+        >
+          {prefix}
+        </div>
+      ) : null}
+      <input
+        type={type}
+        value={value}
+        onChange={onChange}
+        className={`${className} px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1 
+          border border-th-fgd-4 default-transition hover:border-th-primary 
+          focus:border-th-primary focus:outline-none 
+          ${
+            disabled
+              ? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4'
+              : ''
+          }
+            ${prefix ? 'rounded-l-none' : ''}`}
+        disabled={disabled}
+        {...props}
+      />
+      {suffix ? (
+        <span className="absolute right-0 text-xs flex items-center pr-2 h-full bg-transparent text-th-fgd-4">
+          {suffix}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export default Input

components/Loading.tsx

@@ -0,0 +1,26 @@
+const Loading = () => {
+  return (
+    <svg
+      className={`animate-spin -ml-1 mr-3 h-5 w-5`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className={`opacity-25`}
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className={`opacity-75`}
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Loading

components/Modal.tsx

@@ -0,0 +1,64 @@
+import { Portal } from 'react-portal'
+import { XIcon } from '@heroicons/react/outline'
+
+const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
+  return (
+    <Portal>
+      <div
+        className="fixed z-10 inset-0 overflow-y-auto"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="flex items-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
+          {isOpen ? (
+            <div
+              className="fixed inset-0 bg-black bg-opacity-70 transition-opacity"
+              aria-hidden="true"
+              onClick={onClose}
+            ></div>
+          ) : null}
+
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+
+          {isOpen ? (
+            <div
+              className="inline-block bg-th-bkg-2 
+              rounded-lg text-left shadow-lg transform transition-all 
+              sm:my-8 align-middle sm:max-w-md w-full"
+            >
+              {!hideClose ? (
+                <div className="w-full flex justify-end p-2 pb-0">
+                  <button
+                    onClick={onClose}
+                    className={`text-th-fgd-1 hover:text-th-primary focus:outline-none`}
+                  >
+                    <XIcon className={`h-5 w-5`} />
+                  </button>
+                </div>
+              ) : (
+                <div className="w-full pt-4" />
+              )}
+              {children}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </Portal>
+  )
+}
+
+const Header = ({ children }) => {
+  return (
+    <div className={`flex justify-center bg-th-bkg-2 p-2 pt-0`}>{children}</div>
+  )
+}
+
+Modal.Header = Header
+
+export default Modal

pages/index.tsx

@@ -1,13 +1,17 @@
 import Notifications from '../components/Notification'
 import Balances from '../components/Balances'
 import TopBar from '../components/TopBar'
+import ContributionModal from '../components/ContributionModal'
 
 const Index = () => {
   return (
-    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
+    <div
+      className={`grid grid-cols-1 bg-th-bkg-1 text-th-fgd-1 transition-all`}
+    >
       <TopBar />
-      <Balances />
-      <Notifications />
+      {/* <Balances />
+      <Notifications /> */}
+      <ContributionModal />
     </div>
   )
 }

styles/index.css

@@ -1,3 +1,40 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* theme */
+
+:root {
+  --primary: theme('colors.mango-theme.yellow');
+  --red: theme('colors.mango-theme.red.DEFAULT');
+  --red-dark: theme('colors.mango-theme.red.dark');
+  --green: theme('colors.mango-theme.green.DEFAULT');
+  --green-dark: theme('colors.mango-theme.green.dark');
+  --bkg-1: theme('colors.mango-theme["bkg-1"]');
+  --bkg-2: theme('colors.mango-theme["bkg-2"]');
+  --bkg-3: theme('colors.mango-theme["bkg-3"]');
+  --fgd-1: theme('colors.mango-theme["fgd-1"]');
+  --fgd-2: theme('colors.mango-theme["fgd-2"]');
+  --fgd-3: theme('colors.mango-theme["fgd-3"]');
+  --fgd-4: theme('colors.mango-theme["fgd-4"]');
+}
+
+/* base */
+
+* {
+  @apply m-0 p-0;
+}
+
+body {
+  @apply bg-th-bkg-1 text-th-fgd-1 text-base font-body tracking-wide;
+}
+
+/* type */
+
+h2 {
+  @apply text-xl mb-2 font-bold;
+}
+
+p {
+  @apply text-th-fgd-3;
+}

tailwind.config.js

@@ -1,6 +1,3 @@
-// const colors = require('tailwindcss/colors')
-// const defaultTheme = require('tailwindcss/defaultTheme')
-
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
@@ -19,35 +16,6 @@ module.exports = {
         help: 'help',
       },
       colors: {
-        'mango-orange': {
-          DEFAULT: '#DFAB01',
-          dark: '#CB9C01',
-        },
-        'mango-yellow': '#F2C94C',
-        'mango-red': '#E54033',
-        'mango-green': '#AFD803',
-        'mango-dark': {
-          lighter: '#332F46',
-          light: '#262337',
-          DEFAULT: '#141026',
-        },
-        'mango-med': {
-          light: '#C2BDD9',
-          DEFAULT: '#9490A6',
-          dark: '#706C81',
-        },
-        'mango-light': {
-          light: '#FCFCFF',
-          DEFAULT: '#F0EDFF',
-          dark: '#B9B5CE',
-        },
-        'mango-grey': {
-          lighter: '#f7f7f7',
-          light: '#e6e6e6',
-          dark: '#092e34',
-          darker: '#072428',
-          darkest: '#061f23',
-        },
         'mango-theme': {
           yellow: '#F2C94C',
           red: { DEFAULT: '#E54033', dark: '#C7251A' },