Adjust loading page styles

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;
+}

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 (
-    <Grid container direction="column" alignItems="center" justify="center" spacing={0} className={classes.root}>
-      <Grid item align="center">
-        {renderIf(error === null)(() => (
-          <LinearProgress className={classes.progress} />
-        ))}
-        {renderIf(error !== null)(() => (
-          <div>
-            <Typography variant="h5" gutterBottom align="center">
-              <FormattedMessage id="konnect.loading.error.headline" defaultMessage="Failed to connect to server">
-              </FormattedMessage>
-            </Typography>
-            <Typography  gutterBottom align="center" color="error">
-              <ErrorMessage error={error}></ErrorMessage>
-            </Typography>
-            <Button
-              autoFocus
-              color="primary"
-              variant="outlined"
-              className={classes.button}
-              onClick={(event) => retry(event, props.dispatch)}
-            >
-              <FormattedMessage id="konnect.login.retryButton.label" defaultMessage="Retry"></FormattedMessage>
-            </Button>
-          </div>
-        ))}
-      </Grid>
+    <Grid item align="center">
+      {renderIf(error === null)(() => (
+        <LinearProgress className="oc-progress" />
+      ))}
+      {renderIf(error !== null)(() => (
+        <div>
+          <Typography className="oc-light" variant="h5" gutterBottom align="center">
+            <FormattedMessage id="konnect.loading.error.headline" defaultMessage="Failed to connect to server" />
+          </Typography>
+          <Typography align="center" color="error">
+            <ErrorMessage error={error} />
+          </Typography>
+          <Button
+            autoFocus
+            color="primary"
+            variant="contained"
+            className="oc-button-primary oc-mt-l"
+            onClick={(event) => retry(event, props.dispatch)}
+          >
+            <FormattedMessage id="konnect.login.retryButton.label" defaultMessage="Retry" />
+          </Button>
+        </div>
+      ))}
     </Grid>
   );
 }
 
 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);

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,