login page redesign

dmp-frontend/src/app/ui/auth/login/login.component.html

@@ -1,28 +1,30 @@
-<div class="row">
-	<div class="col"></div>
-	<div class="card col-auto">
+<div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
+	<div class="login-logo"></div>
+	<div class="card login-card">
 		<div class="card-header">
-			<h4>Login</h4>
-			<div class="social-btns">
-				<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
+			<div class="social-btns d-flex">
+				<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
 					<i class="fa fa-google"></i>
 				</button>
-				<button *ngIf="hasLinkedInOauth()" mat-icon-button>
+				<button *ngIf="hasLinkedInOauth()" mat-icon-button class="login-social-button">
 					<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
 				</button>
-				<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()">
+				<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()" class="login-social-button">
 					<i class="fa fa-facebook-square"></i>
 				</button>
-				<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()">
+				<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()" class="login-social-button">
 					<i class="fa fa-twitter"></i>
 				</button>
-			</div>
-			<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
+				<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
 					<span class="iconmedium"></span>
 					<span></span>
 				</button>
 			</div>
-		<p>You dont need to have a registered account for OpenDMP</p>
 		</div>
-	<div class="col"></div>
+		<div class="card-footer">
+			<h4 class="text-uppercase"><strong>Login</strong></h4>
+			<br />
+			<h5>You dont need to have a registered account for OpenDMP</h5>
+		</div>
+	</div>
 </div>

dmp-frontend/src/app/ui/auth/login/login.component.scss

@@ -1,3 +1,13 @@
+.login-screen {
+	margin-top: 70px;
+	height: calc(100vh - 10px);
+}
+
+.login-card {
+	width: auto;
+	margin-top: 0;
+}
+
 .container {
 	padding: 15px 30px;
 }
@@ -47,8 +57,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-  margin-top: 90px;
-  top: -90px;
+	margin-top: 50px;
+	top: -50px;
 	-webkit-animation-name: card;
 	-moz-animation-name: card;
 	-o-animation-name: card;
@@ -67,6 +77,7 @@
 	from {
 		top: -40px;
 	}
+
 	to {
 		top: 0;
 	}
@@ -76,6 +87,7 @@
 	from {
 		top: -40px;
 	}
+
 	to {
 		top: 0;
 	}
@@ -88,8 +100,8 @@
 	width: 100%;
 	padding: 25px;
 	border-radius: 3px;
-  background: linear-gradient(60deg, #ec407a, #d81b60);
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
+	background: rgb(0, 112, 192);
+	// box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -103,14 +115,11 @@
 }
 
 .social-btns i {
-  font-size: 21px;
+	font-size: 2.5em;
+	padding: 1em;
 	color: #fff;
 }
 
-.social-btns button {
-  margin: 0 8px;
-}
-
 .tip {
 	margin-top: -20px;
 }
@@ -140,7 +149,10 @@
 }
 
 .card-footer {
-  margin: 10px;
+  padding: 0;
+  border-radius: 0;
+  align-items: start;
+  flex-direction: column;
 }
 
 .card-footer button {
@@ -159,9 +171,29 @@ span.iconmedium {
 	float: left;
 	width: 100px;
 	height: 56px;
+	margin-left: 2em;
+	margin-right: 2em;
 }
 
 .b2access-button {
 	margin-top: 10px;
 	width: fit-content;
 }
+
+.login-logo {
+	background: url(img/open-dmp.png) no-repeat;
+	width: 370px;
+	height: 300px;
+	background-size: cover;
+	margin-top: -10em;
+}
+
+.login-bg {
+	background: url(img/login_bg.png) no-repeat;
+	background-size: cover;
+}
+
+.login-social-button {
+	width: auto;
+	height: auto;
+}