jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Webatrice: KnownHosts component (#4456)

Browse source 
* refactor dexie services for future schema updates

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2021-11-25 21:12:23 -06:00 • committed by GitHub
parent 37879c4255
commit 6ce346af4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 1381 additions and 1291 deletions
Download patch file Download diff file Expand all files Collapse all files

8
webclient/src/components/InputField/InputField.css
View file

@ -1,8 +1,8 @@
.inputField {
.InputField {
position: relative;
}
.inputField-validation {
.InputField-validation {
position: absolute;
top: 0;
right: 0;
@ -10,11 +10,11 @@
font-weight: bold;
}
.inputField-error {
.InputField-error {
display: flex;
align-items: center;
}
.inputField-error svg {
.InputField-error svg {
margin-left: 4px;
}

80
webclient/src/components/InputField/InputField.tsx
View file

@ -1,47 +1,55 @@
import React from 'react';
import { styled } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
import './InputField.css';
const InputField = ({ input, label, name, autoComplete, type, meta: { touched, error, warning } }) => (
<div className="inputField">
{ touched && (
<div className="inputField-validation">
{
(error &&
<ThemedFieldError className="inputField-error">
{error}
<ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
</ThemedFieldError>
) ||
const useStyles = makeStyles(theme => ({
root: {
'& .InputField-error': {
color: theme.palette.error.main
},
(warning && <ThemedFieldWarning className="inputField-warning">{warning}</ThemedFieldWarning>)
}
</div>
) }
<TextField
className="rounded"
variant="outlined"
margin="dense"
fullWidth={true}
label={label}
name={name}
type={type}
autoComplete={autoComplete}
{ ...input }
/>
</div>
);
const ThemedFieldError = styled('div')(({ theme }) => ({
color: theme.palette.error.main
'& .InputField-warning': {
color: theme.palette.warning.main
}
},
}));
const ThemedFieldWarning = styled('div')(({ theme }) => ({
color: theme.palette.warning.main
}));
const InputField = ({ input, label, name, autoComplete, type, meta: { touched, error, warning } }) => {
const classes = useStyles();
return (
<div className={'InputField ' + classes.root}>
{ touched && (
<div className="InputField-validation">
{
(error &&
<div className="InputField-error">
{error}
<ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
</div>
) ||
(warning && <div className="InputField-warning">{warning}</div>)
}
</div>
) }
<TextField
className="rounded"
variant="outlined"
margin="dense"
fullWidth={true}
label={label}
name={name}
type={type}
autoComplete={autoComplete}
{ ...input }
/>
</div>
);
};
export default InputField;