Commit 349ee34b authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files

Resolve UI issues after updating Material UI

- Override colorSecondary for Checkbox, Radio and Switch
parent cdd670fa
Pipeline #5608 passed with stages
in 3 minutes and 35 seconds
......@@ -92,7 +92,7 @@ const styles = (theme) => ({
flexWrap: 'nowrap',
marginBottom: '2px',
wordWrap: 'break-word',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
},
},
......@@ -106,28 +106,28 @@ const styles = (theme) => ({
padding: '10px 14px',
margin: '0 1px',
minHeight: '100%',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
marginRight: '0',
padding: '15px 14px 10px',
},
},
pdBottom0: {
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
paddingBottom: '0',
marginLeft: '0',
marginRight: '0',
},
},
pdTop0: {
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
paddingTop: '0',
marginLeft: '0',
marginRight: '0',
},
},
titleCard: {
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
fontSize: '20px',
lineHeight: '25px',
},
......
......@@ -16,7 +16,7 @@ const content = {
const action = {
/*tslint:disable*/
padding: '0 1.143rem',
// padding: '0 1.143rem',
borderTop: 'solid 1px #e0e0e0',
};
......
......@@ -98,7 +98,7 @@ class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> {
<FormControlLabel
label="Auto-detect CSV settings"
control={
<Checkbox onChange={ this.handleAutodetect } />
<Checkbox onChange={ this.handleAutodetect }/>
}
/>
</FormControl>
......
......@@ -42,9 +42,9 @@ class BooleanFilterInternal extends React.Component<IBooleanFilterInternal, any>
value={ this.state.value }
onChange={ this.handleChange }
>
<FormControlLabel value="true" control={ <Radio /> } label="Yes" />
<FormControlLabel value="false" control={ <Radio /> } label="No" />
<FormControlLabel value="" control={ <Radio /> } label="Either" />
<FormControlLabel value="true" control={ <Radio/> } label="Yes" />
<FormControlLabel value="false" control={ <Radio/> } label="No" />
<FormControlLabel value="" control={ <Radio/> } label="Either" />
</RadioGroup>
</FormControl>
</div>
......
......@@ -131,7 +131,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
control={
<Checkbox value={ key }
checked={ values.indexOf(key) >= 0 }
onChange={ this.handleCheckbox } />
onChange={ this.handleCheckbox }/>
} />
)) }
</FormGroup>
......@@ -149,7 +149,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
endAdornment={
<InputAdornment position="end">
<IconButton type="button" onClick={ this.handleAddCurrent }>
<PlusOne />
<PlusOne style={ { fontSize: '1.5rem' } } />
</IconButton>
</InputAdornment>
}
......
......@@ -29,7 +29,7 @@ class ContentHeader extends React.Component<IContentHeader , any> {
<h1 className="font-bold white mb-5" style={ { marginBottom: 0, fontSize: '1.714rem'} }>
{ title }
</h1>
<Hidden implementation="css" mdDown>
<Hidden implementation="css" smDown>
<h3 className="font-medium white m-0" style={ { marginTop: '.5rem', fontSize: '0.8571rem' } }>
{ subTitle }
</h3>
......
......@@ -68,7 +68,7 @@ const styles = (theme) => ({
marginLeft: '12px',
'& > div > div': {
marginRight: '35px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
marginRight: '0px',
},
},
......@@ -77,14 +77,14 @@ const styles = (theme) => ({
width: '26px',
height: '26px',
color: '#050708',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
top: '0px',
},
},
'& > div > div:focus': {
backgroundColor: 'transparent',
},
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
border: '1px #e8e6e0 solid',
borderRadius: '3px',
padding: '2px 0 0 7px',
......@@ -124,10 +124,13 @@ const styles = (theme) => ({
verticalAlign: {
verticalAlign: 'text-bottom',
paddingLeft: '5px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
padding: '0 5px 0px 2px',
},
},
inline: {
display: 'inline',
},
}) as StyleRules;
const results = [5, 10, 20, 40, 50, 75, 100];
......@@ -234,12 +237,12 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
}
{ ! infinite &&
<div className={ isMobile ? classes.floatRight : classes.floatLeft }>
<Hidden implementation="css" mdUp>
<Hidden implementation="css" mdUp className={ isMobile ? classes.inline : '' }>
<span className={ classes.verticalAlign }>
<span className={ classes.bold }>{ pageObj ? pageObj.number + 1 : 0 }</span>/{ pageObj ? pageObj.totalPages : 0 }
</span>
</Hidden>
<Hidden implementation="css" only={ mobile }>
<Hidden implementation="css" only={ mobile } className={ classes.inline }>
<Button
variant="fab"
color="inherit"
......@@ -259,7 +262,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
>
<PlayArrow className={ classes.arrowRevert }/>
</Button>
<Hidden implementation="js" only={ mobile }>
<Hidden implementation="js" only={ mobile } className={ classes.inline }>
<span className={ `${classes.checkedPage} ${classes.bold}` }>
{ pageObj ? pageObj.number + 1 : 0 }
</span>
......@@ -273,7 +276,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
>
<PlayArrow/>
</Button>
<Hidden implementation="css" only={ mobile }>
<Hidden implementation="css" only={ mobile } className={ classes.inline }>
<Button
variant="fab"
color="inherit"
......@@ -284,7 +287,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
<FastForward/>
</Button>
</Hidden>
<Hidden implementation="css" only={ mobile }>
<Hidden implementation="css" only={ mobile } className={ classes.inline }>
<span className={ classes.verticalAlign }>of <Number value={ pageObj ? pageObj.totalPages : 0 } /> pages</span>
</Hidden>
</div>
......
......@@ -19,13 +19,13 @@ interface ICustomListItemProps extends React.ClassAttributes<any> {
const styles = {
text: {
'& h3': {
'& span': {
fontFamily: 'Roboto-Medium',
color: '#d4d1c6',
},
},
textActive: {
'& h3': {
'& span': {
fontFamily: 'Roboto',
fontWeight: 'bold' as 'bold',
color: '#2b2924',
......
......@@ -22,7 +22,7 @@ const styleSheet = (theme) => ({
background: theme.palette.background.paper,
fontFamily: 'Roboto-Medium',
padding: '0',
'& h3': {
'& span': {
fontFamily: 'Roboto-Medium',
},
boxShadow: '-4px 0px 2px -1px rgba(0, 0, 0, 0.2)',
......
......@@ -16,11 +16,11 @@ const styleSheet = (theme) => ({
height: '100%',
backgroundColor: '#252520',
width: '100%',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('xs')]: {
width: '100vw',
},
'& > li': {
'& > div': {
padding: '0 1.43rem',
borderTop: '1px solid grey',
borderBottom: '2px solid transparent',
......@@ -29,7 +29,7 @@ const styleSheet = (theme) => ({
borderBottom: '3px solid #88ba42',
background: 'inherit',
'&+li': {
'&+div': {
borderTop: 'none',
},
},
......@@ -47,7 +47,7 @@ const styleSheet = (theme) => ({
},
},
'& li:last-child': {
'& div:last-child': {
borderBottom: '1px solid grey',
}
},
......
......@@ -71,11 +71,14 @@ const styleSheet = {
textDecoration: 'none',
},
},
/* tslint:enable */
menuBtn: {
width: '1em',
marginRight: '1.429rem',
'&:hover': {
backgroundColor: 'transparent' as 'transparent',
}
},
/* tslint:enable */
};
interface IHeaderProps extends React.ClassAttributes<any> {
......
......@@ -44,7 +44,7 @@ const styles = (theme) => ({
title: {
fontSize: '30px',
fontWeight: 'bold',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
fontSize: '24px',
},
},
......@@ -59,7 +59,7 @@ const styles = (theme) => ({
lineHeight: '22px',
padding: '15px 14px',
margin: '0 1px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
marginRight: '0',
},
......@@ -70,7 +70,7 @@ const styles = (theme) => ({
padding: '10px 14px',
margin: '0 1px',
minHeight: '100%',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
marginRight: '0',
},
......@@ -80,7 +80,7 @@ const styles = (theme) => ({
justifyContent: 'space-between',
margin: '0 1px',
padding: '10px 20px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
marginRight: '0',
padding: '10px 14px',
......@@ -91,18 +91,18 @@ const styles = (theme) => ({
flexWrap: 'nowrap',
marginBottom: '2px',
wordWrap: 'break-word',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
},
},
dataName: {
[theme.breakpoints.down('lg')]: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
margin1: {
margin: '0 1px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
margin: '0',
},
},
......@@ -111,12 +111,12 @@ const styles = (theme) => ({
padding: '10px 14px',
},
centerAlign : {
[theme.breakpoints.down('lg')]: {
[theme.breakpoints.down('md')]: {
justifyContent: 'center',
},
},
pdTop0: {
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
paddingTop: '0',
marginLeft: '0',
marginRight: '0',
......
......@@ -36,7 +36,7 @@ const BasicInfoRadioGroup = ({input, meta, classes, ...rest}) => (
}
</div>
) }
control={ <Radio /> }
control={ <Radio/> }
/>
))
}
......
......@@ -47,7 +47,7 @@ const renderRadioGroup = translate()(({input, meta, t}) => {
onChange={ onInputChange }
>
{ Object.keys(CreatorRole).map((role) => (
<FormControlLabel key={ role } value={ role } label={ t(`dataset.creator.role.${role}`) } control={ <Radio /> } />
<FormControlLabel key={ role } value={ role } label={ t(`dataset.creator.role.${role}`) } control={ <Radio/> } />
)) }
</RadioGroup>
</FormControl>
......@@ -132,7 +132,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
<FieldArray name="creators" component={ this.renderCreators } />
</form>
<Grid item xs={ 12 } className="back-white">
<Button variant="raised" type="button" onClick={ this.createCreator } className="m-20">
<Button variant="raised" type="button" onClick={ this.createCreator } style={ { margin: '20px' } }>
Add dataset creator
</Button>
</Grid>
......
......@@ -41,12 +41,12 @@ const renderDataTypeRadioGroup = ({input, meta, ...rest}) => (
(event, value) => input.onChange(value) // tslint:disable-line
}
>
<FormControlLabel value="TEXT" label="Free text" control={ <Radio /> }/>
<FormControlLabel value="BOOLEAN" label="Yes/No" control={ <Radio /> }/>
<FormControlLabel value="DATE" label="Date" control={ <Radio /> }/>
<FormControlLabel value="CODED" label="Controlled vocabulary" control={ <Radio /> }/>
<FormControlLabel value="NUMERIC" label="Numeric" control={ <Radio /> }/>
<FormControlLabel value="SCALE" label="Scale" control={ <Radio /> }/>
<FormControlLabel value="TEXT" label="Free text" control={ <Radio/> }/>
<FormControlLabel value="BOOLEAN" label="Yes/No" control={ <Radio/> }/>
<FormControlLabel value="DATE" label="Date" control={ <Radio/> }/>
<FormControlLabel value="CODED" label="Controlled vocabulary" control={ <Radio/> }/>
<FormControlLabel value="NUMERIC" label="Numeric" control={ <Radio/> }/>
<FormControlLabel value="SCALE" label="Scale" control={ <Radio/> }/>
</RadioGroup>
</FormControl>
);
......@@ -71,14 +71,14 @@ const renderCategoryRadioGroup = ({input, meta, ...rest}) => (
(event, value) => input.onChange(value) // tslint:disable-line
}
>
<FormControlLabel value="PASSPORT" label="Passport descriptor" control={ <Radio /> }/>
<FormControlLabel value="MANAGEMENT" label="Management descriptor" control={ <Radio /> }/>
<FormControlLabel value="ENVIRONMENT" label="Environment and Site descriptor" control={ <Radio /> }/>
<FormControlLabel value="CHARACTERIZATION" label="Characterization descriptor" control={ <Radio /> }/>
<FormControlLabel value="EVALUATION" label="Evaluation descriptor" control={ <Radio /> }/>
<FormControlLabel value="ABIOTICSTRESS" label="Abiotic stress descriptor" control={ <Radio /> }/>
<FormControlLabel value="BIOTICSTRESS" label="Biotic stress descriptor" control={ <Radio /> }/>
<FormControlLabel value="MOLECULAR" label="Molecular marker descriptor" control={ <Radio /> }/>
<FormControlLabel value="PASSPORT" label="Passport descriptor" control={ <Radio/> }/>
<FormControlLabel value="MANAGEMENT" label="Management descriptor" control={ <Radio/> }/>
<FormControlLabel value="ENVIRONMENT" label="Environment and Site descriptor" control={ <Radio/> }/>
<FormControlLabel value="CHARACTERIZATION" label="Characterization descriptor" control={ <Radio/> }/>
<FormControlLabel value="EVALUATION" label="Evaluation descriptor" control={ <Radio/> }/>
<FormControlLabel value="ABIOTICSTRESS" label="Abiotic stress descriptor" control={ <Radio/> }/>
<FormControlLabel value="BIOTICSTRESS" label="Biotic stress descriptor" control={ <Radio/> }/>
<FormControlLabel value="MOLECULAR" label="Molecular marker descriptor" control={ <Radio/> }/>
</RadioGroup>
</FormControl>
);
......
......@@ -23,7 +23,7 @@ const styles = (theme) => ({
marginTop: '3px',
color: '#006CB4',
},
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
padding: '7px 5px 7px 10px',
},
},
......@@ -39,13 +39,13 @@ const styles = (theme) => ({
grayBackgroundWrapper: {
flexWrap: 'nowrap',
marginBottom: '20px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
},
},
titleCard: {
marginBottom: '20px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
fontSize: '20px',
lineHeight: '25px',
},
......
......@@ -27,7 +27,7 @@ const styles = (theme) => ({
top: '-50%',
display: 'block' as 'block',
marginBottom: '-100%',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
minWidth: '1000px',
width:'110%',
marginTop:'0px',
......@@ -39,7 +39,7 @@ const styles = (theme) => ({
searchBox: {
textAlign: 'center' as 'center',
padding: '6.857rem 0 5.714rem 0',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
padding: '4.857rem 0 2.714rem 0',
},
},
......@@ -49,13 +49,13 @@ const styles = (theme) => ({
border: '5px solid rgba(0, 0, 0, 0.4)',
borderRight: '9px solid rgba(0, 0, 0, 0.4)',
borderRadius: '10px',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
width: '88%',
},
},
searchField: {
width: '100%',
background: 'rgba(255, 255, 255, 0.9)',
background: 'rgba(255, 255, 255, 0.9)',
border: '2px solid #000',
borderRadius: '4px',
'& input': {
......@@ -66,31 +66,35 @@ const styles = (theme) => ({
searchButton: {
background: '#0b6eb5',
padding: '0 1.143rem',
maxHeight: 'none',
outline: '2px solid #0b6eb5',
'& button': {
width: 'auto',
width: 'auto',
verticalAlign: 'middle',
color: '#fff',
'&:hover': {
backgroundColor: 'transparent' as 'transparent',
}
},
'& img': {
width: '24px',
height: '24px',
},
'& span.search': {
margin: '0 .5rem',
fontSize: '1.286rem',
[theme.breakpoints.down('md')]: {
margin: '0 .5rem',
fontSize: '1.286rem',
[theme.breakpoints.down('sm')]: {
display: 'none' as 'none',
},
},
},
statsWrapper: {
marginBottom: '2.857rem',
marginBottom: '2.857rem',
},
statsContainer: {
width: '56%',
width: '56%',
margin: '0 auto',
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
width: '72%',
},
},
......@@ -104,11 +108,11 @@ const styles = (theme) => ({
'& a': {
color: '#88ba42',
},
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
justifyContent: 'center' as 'center',
height: '3rem',
'& a': {
color: '#fff',
color: '#fff',
},
},
},
......@@ -130,15 +134,15 @@ const styles = (theme) => ({
width: '80%',
margin: '0 auto',
},
[theme.breakpoints.down('md')]: {
padding: '1rem 0',
'& .markdown p': {
[theme.breakpoints.down('sm')]: {
padding: '1rem 0',
'& .markdown p': {
paddingBottom: '0.5rem',
fontSize: '1.286rem',
fontSize: '1.286rem',
fontWeight: 'bold' as 'bold',
lineHeight: '1.75rem',
},
},
},
},
},
plus: {
position: 'absolute' as 'absolute',
......@@ -151,8 +155,8 @@ const styles = (theme) => ({
fontSize: '1.286rem',
fontWeight: 'bold' as 'bold',
cursor: 'pointer',
[theme.breakpoints.down('md')]: {
position: 'static' as 'static',
[theme.breakpoints.down('sm')]: {
position: 'static' as 'static',
margin: '0 auto',
},
},
......@@ -169,15 +173,15 @@ const styles = (theme) => ({
'& > div:last-child': {
borderRight: '1px solid #2b2924',
},
[theme.breakpoints.down('md')]: {
width: '90%',
color: '#8fc848',
[theme.breakpoints.down('sm')]: {
width: '90%',
color: '#8fc848',
'& > div': {
border: 'none',
borderBottom: '1px solid #2b2924',
'& > div': {
border: 'none',
borderBottom: '1px solid #2b2924',
padding: '1rem 0',
},
},
'& > div:last-child': {
border: 'none',
},
......@@ -191,10 +195,10 @@ const styles = (theme) => ({
'& span': {
marginRight: '1rem',
'& img': {
'& img': {
width: '40px',
height: '40px',
},
},
},
'& p': {
margin: 0,
......@@ -282,7 +286,7 @@ class WelcomePage extends React.Component<any, any> {
</Grid>