Small design tweaks

changelog/unreleased/themed-kopano

@@ -0,0 +1,7 @@
+Change: Bring oC theme
+
+Tags: konnectd
+
+We've styled our konnectd login page to reflect ownCloud theme.
+
+https://github.com/owncloud/ocis/pull/698

konnectd/ui/src/app.css

@@ -23,7 +23,7 @@ strong {
 
 .oc-logo {
   position: absolute;
-  top: -110px;
+  top: -130px;
   left: 50%;
   height: 80px;
   transform: translateX(-50%);
@@ -31,14 +31,13 @@ strong {
 
 .oc-input {
   background-color: #042047;
-  border: 1px solid rgba(78,133,200,.8);
+  border: 1px solid rgba(78, 133, 200, 0.8);
   border-radius: 3px;
-  color: rgba(255,255,255,.8);
+  color: rgba(255, 255, 255, 0.8);
   width: 300px;
-  height: 40px;
   padding: 16px;
   box-sizing: border-box;
-  font-size: 1rem;
+  font-size: 0.8125rem;
 }
 
 .oc-input:focus {
@@ -46,11 +45,16 @@ strong {
 }
 
 .oc-input::placeholder {
-  color: rgba(78,133,200,.8);
+  color: rgba(78, 133, 200, 0.8);
 }
 
 .oc-input + .oc-input {
-  margin-top: 10px;
+  margin-top: 15px;
+}
+
+.oc-button {
+  /* Needs to be important to overwrite material-ui */
+  font-size: 1.0625rem !important;
 }
 
 .oc-button-primary {
@@ -73,16 +77,11 @@ strong {
 @media only screen and (max-width: 768px) {
   .oc-logo {
     height: 60px;
-    top: -80px;
+    top: -90px;
   }
 }
 
 /* Helpers */
-
+.oc-mt-l {
-.oc-w-100 {
+  margin-top: 30px !important;
-  width: 100% !important;
-}
-
-.oc-mt-m {
-  margin-top: 20px !important;
 }

konnectd/ui/src/containers/Login/Login.js

@@ -29,8 +29,8 @@ const styles = theme => ({
   },
   wrapper: {
     position: 'relative',
-    display: 'inline-block',
+    width: '100%',
-    width: '100%'
+    textAlign: 'center'
   },
   message: {
     marginTop: 5,
@@ -65,37 +65,35 @@ class Login extends React.PureComponent {
 
     return (
       <form action="" onSubmit={(event) => this.logon(event)}>
-        <div>
+        <TextInput
-          <TextInput
+          autoFocus
-            autoFocus
+          autoCapitalize="off"
-            autoCapitalize="off"
+          spellCheck="false"
-            spellCheck="false"
+          value={username}
-            value={username}
+          onChange={this.handleChange('username')}
-            onChange={this.handleChange('username')}
+          autoComplete="kopano-account username"
-            autoComplete="kopano-account username"
+          placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
-            placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
+        />
-          />
+        <TextInput
-          <TextInput
+          type="password"
-            type="password"
+          margin="normal"
-            margin="normal"
+          onChange={this.handleChange('password')}
-            onChange={this.handleChange('password')}
+          autoComplete="kopano-account current-password"
-            autoComplete="kopano-account current-password"
+          placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
-            placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
+        />
-          />
+        {hasError && <Typography variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
-          {hasError && <Typography variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
+        <div className={classes.wrapper}>
-          <div className={classes.wrapper}>
+          <Button
-            <Button
+            type="submit"
-              type="submit"
+            color="primary"
-              color="primary"
+            variant="contained"
-              variant="contained"
+            className="oc-button-primary oc-mt-l"
-              className="oc-button-primary oc-w-100 oc-mt-m"
+            disabled={!!loading}
-              disabled={!!loading}
+            onClick={(event) => this.logon(event)}
-              onClick={(event) => this.logon(event)}
+          >
-            >
+            <FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
-              <FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
+          </Button>
-            </Button>
+          {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
-            {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
-          </div>
         </div>
       </form>
     );