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

@@ -1,6 +1,17 @@
 /* additional css on top of kpop */
+@font-face {
+  font-family: Inter;
+  src: url(./fonts/inter.ttf) format('truetype');
+  font-weight: 100 900;
+  font-style: oblique 0deg 12deg;
+}
+
+html {
+  font-feature-settings: "cv11";
+}
+
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: Inter, 'Open Sans', sans-serif;
 }
 
 strong {
@@ -42,10 +53,9 @@ strong {
 }
 
 .oc-input {
-  background-color: #042047;
-  border: 1px solid rgba(78, 133, 200, 0.8);
+  background-color: #fff;
+  border: 1px solid #fff;
   border-radius: 3px;
-  color: rgba(255, 255, 255, 0.8);
   height: 40px;
   width: 300px;
   padding: 16px;
@@ -73,10 +83,6 @@ strong {
   border: 1px solid #fff;
 }
 
-.oc-input::placeholder {
-  color: rgba(78, 133, 200, 0.8);
-}
-
 .oc-input + .oc-input {
   margin-top: 15px;
 }
@@ -92,17 +98,12 @@ strong {
 
 .oc-button-primary {
   /* Needs to be important to overwrite material-ui */
-  background-color: #4a76ac !important;
+  width: 100%;
+  background: linear-gradient(to right, #2c588e, #4e85c8) -1px;
+  background-size: 103% !important;
   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 +124,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"