Improve login screen design

changelog/unreleased/enhancement-login-screen-design.md

@@ -0,0 +1,6 @@
+Enhancement: Improve login screen design
+
+We've improved the design of the login screen to match with the general design used in Web.
+
+https://github.com/owncloud/ocis/pull/4500
+https://github.com/owncloud/web/issues/7552

services/idp/src/app.css

@@ -42,10 +42,9 @@ strong {
 }
 
 .oc-input {
-  background-color: #042047;
+  background-color: #fff;
   border: 1px solid rgba(78, 133, 200, 0.8);
   border-radius: 3px;
-  color: rgba(255, 255, 255, 0.8);
   height: 40px;
   width: 300px;
   padding: 16px;
@@ -92,17 +91,12 @@ strong {
 
 .oc-button-primary {
   /* Needs to be important to overwrite material-ui */
-  background-color: #4a76ac !important;
+  width: 100%;
+  background-size: 103% !important;
+  background: linear-gradient(to right, #2c588e, #4e85c8) -1px;
   border: 1px solid transparent !important;
 }
 
-.oc-button-primary:hover,
-.oc-button-primary:focus {
-  /* Needs to be important to overwrite material-ui */
-  background-color: #4a76ac !important;
-  border: 1px solid white !important;
-}
-
 .oc-checkbox-dark svg {
   /* Needs to be important to overwrite material-ui */
   fill: white !important;
@@ -123,7 +117,7 @@ strong {
 
 /* Helpers */
 .oc-mt-l {
-  margin-top: 30px !important;
+  margin-top: 24px !important;
 }
 
 .oc-mb-m {

services/idp/src/containers/Login/Login.jsx

@@ -155,7 +155,6 @@ function Login(props) {
           {hasError && <Typography id="oc-login-error-message" variant="subtitle2" component="span" color="error" className={classes.message}>{errorMessage}</Typography>}
           <div className={classes.wrapper}>
             {loginFailed && passwordResetLink && <Link id="oc-login-password-reset" href={passwordResetLink} variant="subtitle2">{"Reset password?"}</Link>}
-            <br />
             <Button
               type="submit"
               color="primary"