add status style components
This commit is contained in:
parent
82c051e9db
commit
9b22738ff4
|
@ -1,5 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import useStyles from './styles/app';
|
import useStyles from './styles/app';
|
||||||
|
import { ThemeProvider } from '@material-ui/core/styles';
|
||||||
|
import theme from './styles/theme';
|
||||||
import { providers } from 'ethers';
|
import { providers } from 'ethers';
|
||||||
import { Provider } from '@ethersproject/providers'
|
import { Provider } from '@ethersproject/providers'
|
||||||
import { Symfoni } from "./hardhat/SymfoniContext";
|
import { Symfoni } from "./hardhat/SymfoniContext";
|
||||||
|
@ -30,16 +32,18 @@ function App() {
|
||||||
}, [window.ethereum.selectedAddress])
|
}, [window.ethereum.selectedAddress])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Symfoni autoInit={true} >
|
<ThemeProvider theme={theme}>
|
||||||
<div className={classes.root}>
|
<Symfoni autoInit={true} >
|
||||||
<Header
|
<div className={classes.root}>
|
||||||
account={account}
|
<Header
|
||||||
provider={provider}
|
account={account}
|
||||||
enableEthereum={undefined}
|
provider={provider}
|
||||||
/>
|
enableEthereum={undefined}
|
||||||
<Bridge></Bridge>
|
/>
|
||||||
</div>
|
<Bridge></Bridge>
|
||||||
</Symfoni>
|
</div>
|
||||||
|
</Symfoni>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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) => (
|
||||||
|
<InputLabel
|
||||||
|
shrink
|
||||||
|
htmlFor={idFor}
|
||||||
|
className={formLabelClass}
|
||||||
|
focused={false}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
{isRequired && <span style={{ color: 'red' }}> *</span>}
|
||||||
|
</InputLabel>
|
||||||
|
)
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<FormControl
|
||||||
|
className={classnames(classes.container, className)}
|
||||||
|
>
|
||||||
|
{ labelForm }
|
||||||
|
{ topRightLabel }
|
||||||
|
{!!errorText && <span className={classes.toolTip}>{errorText}</span>}
|
||||||
|
<InputBase
|
||||||
|
id={idFor}
|
||||||
|
error={errorBorder}
|
||||||
|
inputProps={InputProps}
|
||||||
|
endAdornment={endAdornment}
|
||||||
|
placeholder={placeholder}
|
||||||
|
name={name}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={onChange}
|
||||||
|
classes={{
|
||||||
|
root: classes.root,
|
||||||
|
input: classnames(classes.input, inputClass),
|
||||||
|
error: classes.errorBorder
|
||||||
|
}}
|
||||||
|
onBlur={onBlur}
|
||||||
|
value={value}
|
||||||
|
multiline={multiline}
|
||||||
|
/>
|
||||||
|
{ bottomLeft }
|
||||||
|
{ bottomRight }
|
||||||
|
</FormControl>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Input.defaultProps = {
|
||||||
|
label: '',
|
||||||
|
placeholder: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
Input.propTypes = {
|
||||||
|
idFor: PropTypes.string.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
label: PropTypes.string,
|
||||||
|
placeholder: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Input
|
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in New Issue