enable theme vars, start on modal components
This commit is contained in:
parent
057798b2a1
commit
3e03233fe0
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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"
|
||||
>
|
||||
​
|
||||
</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
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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' },
|
||||
|
|
Loading…
Reference in New Issue