diff --git a/konnectd/ui/src/app.css b/konnectd/ui/src/app.css index 17865be72..22efc4db4 100644 --- a/konnectd/ui/src/app.css +++ b/konnectd/ui/src/app.css @@ -29,6 +29,18 @@ strong { transform: translateX(-50%); } +.oc-progress { + /* Needs to be important to overwrite material-ui */ + background-color: rgba(78,133,200,.8) !important; + height: 4px; + width: 100px; +} + +.oc-progress > div { + /* Needs to be important to overwrite material-ui */ + background-color: #4e85c8 !important; +} + .oc-input { background-color: #042047; border: 1px solid rgba(78, 133, 200, 0.8); @@ -85,3 +97,7 @@ strong { .oc-mt-l { margin-top: 30px !important; } + +.oc-light { + color: #ffffff !important; +} \ No newline at end of file diff --git a/konnectd/ui/src/components/Loading.js b/konnectd/ui/src/components/Loading.js index 7dc4ef23a..5cdaacead 100644 --- a/konnectd/ui/src/components/Loading.js +++ b/konnectd/ui/src/components/Loading.js @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; -import { withStyles } from '@material-ui/core/styles'; import LinearProgress from '@material-ui/core/LinearProgress'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; @@ -14,24 +13,6 @@ import renderIf from 'render-if'; import { retryHello } from '../actions/common'; import { ErrorMessage } from '../errors'; -const styles = theme => ({ - root: { - flexGrow: 1, - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0 - }, - progress: { - height: '4px', - width: '100px' - }, - button: { - marginTop: theme.spacing(5) - } -}); - function retry(event, dispatch) { event.preventDefault(); @@ -39,44 +20,38 @@ function retry(event, dispatch) { } function Loading(props) { - const { classes, error } = props; + const { error } = props; return ( - - - {renderIf(error === null)(() => ( - - ))} - {renderIf(error !== null)(() => ( -
- - - - - - - - -
- ))} -
+ + {renderIf(error === null)(() => ( + + ))} + {renderIf(error !== null)(() => ( +
+ + + + + + + +
+ ))}
); } Loading.propTypes = { - classes: PropTypes.object.isRequired, - error: PropTypes.object, - dispatch: PropTypes.func.isRequired }; @@ -88,4 +63,4 @@ const mapStateToProps = (state) => { }; }; -export default connect(mapStateToProps)(withStyles(styles)(Loading)); +export default connect(mapStateToProps)(Loading); diff --git a/konnectd/ui/src/components/ResponsiveScreen.js b/konnectd/ui/src/components/ResponsiveScreen.js index d1dcf8c23..7c78dbf89 100644 --- a/konnectd/ui/src/components/ResponsiveScreen.js +++ b/konnectd/ui/src/components/ResponsiveScreen.js @@ -15,7 +15,8 @@ const styles = theme => ({ flex: 1 }, content: { - position: 'relative' + position: 'relative', + width: '100%' }, actions: { marginTop: -40,