Adjust styles of form

2020-10-19 11:41:58 +02:00
parent 50d040d0d2
commit f6442f2d58
32 changed files with 97 additions and 138 deletions
@@ -1,42 +1,40 @@
 {
  "files": {
-    "static/js/0.7598626e.chunk.js": "./static/js/0.7598626e.chunk.js",
-    "static/js/0.7598626e.chunk.js.map": "./static/js/0.7598626e.chunk.js.map",
-    "containers-goodbye.js": "./static/js/containers-goodbye.d2cc21ed.chunk.js",
-    "containers-goodbye.js.map": "./static/js/containers-goodbye.d2cc21ed.chunk.js.map",
-    "containers-login.js": "./static/js/containers-login.f4a5c7ac.chunk.js",
-    "containers-login.js.map": "./static/js/containers-login.f4a5c7ac.chunk.js.map",
-    "containers-welcome.js": "./static/js/containers-welcome.be5aafb5.chunk.js",
-    "containers-welcome.js.map": "./static/js/containers-welcome.be5aafb5.chunk.js.map",
-    "identifier-app.js": "./static/js/identifier-app.ddef38c1.chunk.js",
-    "identifier-app.js.map": "./static/js/identifier-app.ddef38c1.chunk.js.map",
-    "identifier-main.js": "./static/js/identifier-main.eb69745c.chunk.js",
-    "identifier-main.js.map": "./static/js/identifier-main.eb69745c.chunk.js.map",
-    "main.css": "./static/css/main.51be0eb5.chunk.css",
-    "main.js": "./static/js/main.3c21505c.chunk.js",
-    "main.js.map": "./static/js/main.3c21505c.chunk.js.map",
-    "runtime-main.js": "./static/js/runtime-main.448944d7.js",
-    "runtime-main.js.map": "./static/js/runtime-main.448944d7.js.map",
-    "static/js/8.cdac1014.chunk.js": "./static/js/8.cdac1014.chunk.js",
-    "static/js/8.cdac1014.chunk.js.map": "./static/js/8.cdac1014.chunk.js.map",
-    "static/js/9.2ca8cafc.chunk.js": "./static/js/9.2ca8cafc.chunk.js",
-    "static/js/9.2ca8cafc.chunk.js.map": "./static/js/9.2ca8cafc.chunk.js.map",
-    "static/js/10.351124bf.chunk.js": "./static/js/10.351124bf.chunk.js",
-    "static/js/10.351124bf.chunk.js.map": "./static/js/10.351124bf.chunk.js.map",
+    "static/js/0.05482ba6.chunk.js": "./static/js/0.05482ba6.chunk.js",
+    "static/js/0.05482ba6.chunk.js.map": "./static/js/0.05482ba6.chunk.js.map",
+    "containers-goodbye.js": "./static/js/containers-goodbye.497bb89c.chunk.js",
+    "containers-goodbye.js.map": "./static/js/containers-goodbye.497bb89c.chunk.js.map",
+    "containers-login.js": "./static/js/containers-login.bbd305ee.chunk.js",
+    "containers-login.js.map": "./static/js/containers-login.bbd305ee.chunk.js.map",
+    "containers-welcome.js": "./static/js/containers-welcome.f40213e1.chunk.js",
+    "containers-welcome.js.map": "./static/js/containers-welcome.f40213e1.chunk.js.map",
+    "identifier-app.js": "./static/js/identifier-app.f2f92e3f.chunk.js",
+    "identifier-app.js.map": "./static/js/identifier-app.f2f92e3f.chunk.js.map",
+    "identifier-main.js": "./static/js/identifier-main.680647d9.chunk.js",
+    "identifier-main.js.map": "./static/js/identifier-main.680647d9.chunk.js.map",
+    "main.css": "./static/css/main.f59c29f7.chunk.css",
+    "main.js": "./static/js/main.319f99c0.chunk.js",
+    "main.js.map": "./static/js/main.319f99c0.chunk.js.map",
+    "runtime-main.js": "./static/js/runtime-main.ba48e465.js",
+    "runtime-main.js.map": "./static/js/runtime-main.ba48e465.js.map",
+    "static/js/8.cecd3c0c.chunk.js": "./static/js/8.cecd3c0c.chunk.js",
+    "static/js/8.cecd3c0c.chunk.js.map": "./static/js/8.cecd3c0c.chunk.js.map",
+    "static/js/9.2a2c7a6a.chunk.js": "./static/js/9.2a2c7a6a.chunk.js",
+    "static/js/9.2a2c7a6a.chunk.js.map": "./static/js/9.2a2c7a6a.chunk.js.map",
+    "static/js/10.3af7223e.chunk.js": "./static/js/10.3af7223e.chunk.js",
+    "static/js/10.3af7223e.chunk.js.map": "./static/js/10.3af7223e.chunk.js.map",
    "index.html": "./index.html",
-    "precache-manifest.4fdf35e6a3f6f2ff2a9fee86d5d74838.js": "./precache-manifest.4fdf35e6a3f6f2ff2a9fee86d5d74838.js",
+    "precache-manifest.5a07100ca0e22465d9d34a3470319553.js": "./precache-manifest.5a07100ca0e22465d9d34a3470319553.js",
    "service-worker.js": "./service-worker.js",
-    "static/css/main.51be0eb5.chunk.css.map": "./static/css/main.51be0eb5.chunk.css.map",
-    "static/js/0.7598626e.chunk.js.LICENSE.txt": "./static/js/0.7598626e.chunk.js.LICENSE.txt",
-    "static/js/10.351124bf.chunk.js.LICENSE.txt": "./static/js/10.351124bf.chunk.js.LICENSE.txt",
-    "static/js/8.cdac1014.chunk.js.LICENSE.txt": "./static/js/8.cdac1014.chunk.js.LICENSE.txt",
-    "static/js/9.2ca8cafc.chunk.js.LICENSE.txt": "./static/js/9.2ca8cafc.chunk.js.LICENSE.txt",
-    "static/media/fancy-background.css": "./static/media/background.d469fc8c.jpg",
-    "static/media/index.css": "./static/media/roboto-latin-900italic.bc833e72.woff"
+    "static/css/main.f59c29f7.chunk.css.map": "./static/css/main.f59c29f7.chunk.css.map",
+    "static/js/0.05482ba6.chunk.js.LICENSE.txt": "./static/js/0.05482ba6.chunk.js.LICENSE.txt",
+    "static/js/10.3af7223e.chunk.js.LICENSE.txt": "./static/js/10.3af7223e.chunk.js.LICENSE.txt",
+    "static/js/9.2a2c7a6a.chunk.js.LICENSE.txt": "./static/js/9.2a2c7a6a.chunk.js.LICENSE.txt",
+    "static/media/app.css": "./static/media/background.d469fc8c.jpg"
  },
  "entrypoints": [
-    "static/js/runtime-main.448944d7.js",
-    "static/css/main.51be0eb5.chunk.css",
-    "static/js/main.3c21505c.chunk.js"
+    "static/js/runtime-main.ba48e465.js",
+    "static/css/main.f59c29f7.chunk.css",
+    "static/js/main.319f99c0.chunk.js"
  ]
 }
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#1b223d"><link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon"><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet"><meta property="csp-nonce" content="__CSP_NONCE__"><title>Sign in &mdash; ownCloud</title><link href="./static/css/main.51be0eb5.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="bg"><div id="bg-thumb"></div><div id="bg-enhanced"></div></div><div id="root" data-path-prefix="__PATH_PREFIX__"></div><div id="font-preloader"><span>aA</span>Bb</div><script src="./static/js/runtime-main.448944d7.js"></script><script src="./static/js/main.3c21505c.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#1b223d"><link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon"><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet"><meta property="csp-nonce" content="__CSP_NONCE__"><title>Sign in &mdash; ownCloud</title><link href="./static/css/main.f59c29f7.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><main id="root" class="oc-login-bg" data-path-prefix="__PATH_PREFIX__"></main><script src="./static/js/runtime-main.ba48e465.js"></script><script src="./static/js/main.319f99c0.chunk.js"></script></body></html>
@@ -13,11 +13,6 @@
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
-    <div id="bg">
-      <div id="bg-thumb"></div>
-      <div id="bg-enhanced"></div>
-    </div>
-    <div id="root" data-path-prefix="__PATH_PREFIX__"></div>
-    <div id="font-preloader"><span>aA</span>Bb</div>
+    <main id="root" class="oc-login-bg" data-path-prefix="__PATH_PREFIX__"></main>
  </body>
 </html>
@@ -4,32 +4,16 @@ import { connect } from 'react-redux';

 import { BrowserRouter } from 'react-router-dom';

-import { withStyles } from '@material-ui/core/styles';
-
-import { enhanceBodyBackground } from './utils';
 import Routes from './Routes';

-// Trigger loading of background image.
-enhanceBodyBackground();
-
-const styles = () => ({
-  root: {
-    position: 'relative',
-    display: 'flex',
-    flex: 1
-  }
-});
-
 class App extends PureComponent {
  render() {
    const { classes, hello, pathPrefix } = this.props;

    return (
-      <div className={classes.root}>
-        <BrowserRouter basename={pathPrefix}>
-          <Routes hello={hello}/>
-        </BrowserRouter>
-      </div>
+      <BrowserRouter basename={pathPrefix}>
+        <Routes hello={hello}/>
+      </BrowserRouter>
    );
  }

@@ -58,4 +42,4 @@ const mapStateToProps = (state) => {
  };
 };

-export default connect(mapStateToProps)(withStyles(styles)(App));
+export default connect(mapStateToProps)(App);
@@ -7,6 +7,20 @@ strong {
  font-weight: 600;
 }

+.oc-login-bg {
+  background-image: url(./images/background.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: 0;
+}
+
+#loader {
+  /* NOTE(longsleep): White here needed because of the background image */
+  color: white;
+  text-shadow: #000 0 0 1px;
+}
+
 .oc-logo {
  position: absolute;
  top: -120px;
@@ -16,20 +30,25 @@ strong {
 }

 .oc-input {
-  background-color: white;
-  border: 0;
-  border-radius: 6px;
+  background-color: #042047;
+  border: 1px solid rgba(78,133,200,.8);
+  border-radius: 3px;
+  color: rgba(255,255,255,.8);
  width: 300px;
  height: 40px;
-  padding: 12px 8px;
+  padding: 16px;
  box-sizing: border-box;
-  font-size: 1.125rem;
+  font-size: 1rem;
 }

 .oc-input:focus {
  outline: none;
 }

+.oc-input::placeholder {
+  color: rgba(78,133,200,.8);
+}
+
 .oc-input + .oc-input {
  margin-top: 10px;
 }
@@ -64,6 +83,6 @@ strong {
  width: 100% !important;
 }

-.oc-mt-s {
-  margin-top: 10px !important;
+.oc-mt-m {
+  margin-top: 20px !important;
 }
@@ -64,42 +64,40 @@ class Login extends React.PureComponent {
        : <ErrorMessage error={errors.password}></ErrorMessage>);

    return (
-      <div>
-        <form action="" onSubmit={(event) => this.logon(event)}>
-          <div>
-            <TextInput
-              autoFocus
-              autoCapitalize="off"
-              spellCheck="false"
-              value={username}
-              onChange={this.handleChange('username')}
-              autoComplete="kopano-account username"
-              placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
-            />
-            <TextInput
-              type="password"
-              margin="normal"
-              onChange={this.handleChange('password')}
-              autoComplete="kopano-account current-password"
-              placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
-            />
-            {hasError && <Typography variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
-            <div className={classes.wrapper}>
-              <Button
-                type="submit"
-                color="primary"
-                variant="contained"
-                className="oc-button-primary oc-w-100 oc-mt-s"
-                disabled={!!loading}
-                onClick={(event) => this.logon(event)}
-              >
-                <FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
-              </Button>
-              {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
-            </div>
+      <form action="" onSubmit={(event) => this.logon(event)}>
+        <div>
+          <TextInput
+            autoFocus
+            autoCapitalize="off"
+            spellCheck="false"
+            value={username}
+            onChange={this.handleChange('username')}
+            autoComplete="kopano-account username"
+            placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
+          />
+          <TextInput
+            type="password"
+            margin="normal"
+            onChange={this.handleChange('password')}
+            autoComplete="kopano-account current-password"
+            placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
+          />
+          {hasError && <Typography variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
+          <div className={classes.wrapper}>
+            <Button
+              type="submit"
+              color="primary"
+              variant="contained"
+              className="oc-button-primary oc-w-100 oc-mt-m"
+              disabled={!!loading}
+              onClick={(event) => this.logon(event)}
+            >
+              <FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
+            </Button>
+            {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
          </div>
-        </form>
-      </div>
+        </div>
+      </form>
    );
  }

@@ -1,33 +0,0 @@
-/* fancy background with two components and fade */
-
-#bg {
-  background-color: white;
-}
-
-#bg > div {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  z-index: 0;
-}
-
-#loader {
-  /* NOTE(longsleep): White here needed because of the background image */
-  color: white;
-  text-shadow: #000 0 0 1px;
-}
-
-#bg-enhanced {
-  opacity: 0;
-  transition: opacity 1s;
-}
-
-#bg-enhanced.enhanced {
-  background-image: url(./images/background.jpg);
-  opacity: 1;
-}
@@ -1,8 +1,6 @@
 import 'kpop/static/css/base.css';
 import 'kpop/static/css/scrollbar.css';
-import 'typeface-roboto';
 import './app.css';
-import './fancy-background.css';

 import * as kpop from 'kpop/es/version';