diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 01edda4..ba08709 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,7 @@
import React from 'react';
import useStyles from './styles/app';
+import { ThemeProvider } from '@material-ui/core/styles';
+import theme from './styles/theme';
import { providers } from 'ethers';
import { Provider } from '@ethersproject/providers'
import { Symfoni } from "./hardhat/SymfoniContext";
@@ -30,16 +32,18 @@ function App() {
}, [window.ethereum.selectedAddress])
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
}
diff --git a/frontend/src/components/base/TextField.tsx b/frontend/src/components/base/TextField.tsx
new file mode 100644
index 0000000..aae7413
--- /dev/null
+++ b/frontend/src/components/base/TextField.tsx
@@ -0,0 +1,222 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
+import InputBase from '@material-ui/core/InputBase'
+import InputLabel from '@material-ui/core/InputLabel'
+import FormControl from '@material-ui/core/FormControl'
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(12, [col] 1fr)',
+ gridTemplateRows: 'auto auto 5px',
+ },
+ margin: {
+ margin: theme.spacing(1),
+ },
+ root: {
+ gridColumnStart: 1,
+ gridColumnEnd: 13,
+ borderRadius: 8,
+ backgroundColor: '#edf2f5',
+ 'label + &': {
+ gridRowStart: 2,
+ gridColumnStart: 1,
+ gridColumnEnd: 13,
+ marginTop: theme.spacing(3),
+ },
+ },
+ multi: {
+ 'label + &': {
+ gridRowStart: 2,
+ gridColumnStart: 1,
+ gridColumnEnd: 13,
+ marginTop: theme.spacing(3),
+ paddingRight: '1.2em'
+ },
+ },
+ input: {
+ borderRadius: 8,
+ backgroundColor: '#edf2f5',
+ fontSize: 16,
+ padding: '20px 12px'
+ },
+ formLabel: {
+ gridRowStart: 1,
+ fontSize: '18px',
+ color: '#939BA1'
+ },
+ top: {
+ gridRowStart: 1
+ },
+ bottomRight: {
+ fontSize: '15px',
+ gridRowStart: 4,
+ gridColumnStart: 12,
+ whiteSpace: 'nowrap'
+ },
+ bottomLeft: {
+ fontSize: '15px',
+ gridRowStart: 4,
+ gridColumnStart: 1,
+ },
+ red: {
+ color: '#db0000'
+ },
+ errorBorder: {
+ border: '1px solid #db0000'
+ },
+ topRight: {
+ gridRowStart: 1,
+ gridColumnStart: 11,
+ [theme.breakpoints.up('sm')]: {
+ marginLeft: '1.3rem'
+ }
+ },
+ toolTip: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gridColumn: '3 / 11',
+ backgroundColor: '#FFFFFF',
+ color: '#FF2D55',
+ textAlign: 'center',
+ borderRadius: '8px',
+ padding: '5px 0',
+ zIndex: 1,
+ boxShadow: '0px 4px 12px rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16)',
+ minHeight: '3rem',
+ minWidth: '9rem',
+ '&:after': {
+ content: 'close-quote',
+ position: 'absolute',
+ top: '43%',
+ left: '50%',
+ marginLeft: '-5px',
+ borderWidth: '10px',
+ borderStyle: 'solid',
+ borderColor: '#FFFFFF transparent transparent transparent'
+ }
+ },
+ toolTipNoArrow: {
+ gridColumn: '5 / 10',
+ backgroundColor: '#FFFFFF',
+ color: '#FF2D55',
+ textAlign: 'center',
+ borderRadius: '8px',
+ padding: '5px 0',
+ zIndex: 1,
+ boxShadow: '0px 4px 12px rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16)'
+ }
+
+}))
+
+const renderLabel = (formLabelClass: string, idFor: string, label: JSX.Element | string, isRequired?: boolean) => (
+
+ {label}
+ {isRequired && *}
+
+)
+
+type InputFnProps = {
+ idFor: string,
+ isRequired?: boolean,
+ endAdornment?: React.ReactNode,
+ errorBorder?: boolean,
+ InputProps?: any,
+ inputClass?: any,
+ label?: string,
+ bottomRightLabel?: string,
+ bottomRightError?: string,
+ bottomLeftLabel?: string,
+ disabled?: boolean,
+ errorText?: string,
+ placeholder?: string,
+ className?: string,
+ name?: string,
+ onChange?(e: React.ChangeEvent<{}>): void,
+ onBlur?: React.FocusEventHandler<{}>,
+ value?: string,
+ multiline?: boolean,
+ topRight?: JSX.Element
+}
+
+function Input({
+ idFor,
+ isRequired,
+ endAdornment,
+ errorBorder,
+ InputProps,
+ inputClass,
+ label,
+ bottomRightLabel,
+ bottomRightError,
+ bottomLeftLabel,
+ disabled,
+ errorText,
+ placeholder,
+ className,
+ name,
+ onChange,
+ onBlur,
+ value,
+ multiline,
+ topRight
+}: InputFnProps) {
+ const classes = useStyles()
+ const labelForm = label ? renderLabel(classnames(classes.formLabel, classes.top), idFor, label, isRequired) : null
+ const topRightLabel = topRight ? renderLabel(classnames(classes.topRight), idFor, topRight) : null
+ const bottomLeft = bottomLeftLabel ? renderLabel(classnames(classes.formLabel, classes.bottomLeft), idFor, bottomLeftLabel) : null
+ const bottomRight = bottomRightLabel ? renderLabel(classnames(classes.formLabel, classes.bottomRight, {
+ [classes.red]: bottomRightError
+ }), idFor, bottomRightLabel) : null
+ return (
+
+ { labelForm }
+ { topRightLabel }
+ {!!errorText && {errorText}}
+
+ { bottomLeft }
+ { bottomRight }
+
+ )
+}
+
+Input.defaultProps = {
+ label: '',
+ placeholder: ''
+}
+
+Input.propTypes = {
+ idFor: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ label: PropTypes.string,
+ placeholder: PropTypes.string
+}
+
+export default Input
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
new file mode 100644
index 0000000..3f3ae60
--- /dev/null
+++ b/frontend/src/styles/theme.ts
@@ -0,0 +1,37 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+// https://material-ui.com/guides/typescript/#customization-of-theme
+
+declare module "@material-ui/core/styles/createBreakpoints" {
+ interface BreakpointOverrides {
+ xs: false; // removes the `xs` breakpoint
+ sm: true;
+ md: true;
+ lg: false;
+ xl: false;
+ tablet: false; // adds the `tablet` breakpoint
+ laptop: false;
+ desktop: false;
+ }
+}
+
+export default createMuiTheme({
+ typography: {
+ fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"].join(','),
+ },
+ breakpoints: {
+ values: {
+ sm: 320,
+ md: 860
+ }
+ },
+ palette: {
+ primary: {
+ 100: '#1AA56E1A',
+ 500: '#1AA56E'
+ },
+ action: {
+ disabledBackground: '#FAFAFA'
+ }
+ }
+})