From 6618b26583628e6edf471dd4ee7920cb6505a29d Mon Sep 17 00:00:00 2001
From: gkolokythas <gkolokythas@cite.gr>
Date: Thu, 14 Nov 2019 10:33:08 +0200
Subject: [PATCH] Restyles configurable login providers. (Issue #183)

---
 .../app/ui/auth/login/login.component.html    | 10 ++++++----
 .../app/ui/auth/login/login.component.scss    | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.html b/dmp-frontend/src/app/ui/auth/login/login.component.html
index 562387685..530d72828 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.html
@@ -47,10 +47,12 @@
 				</div>
 				<!-- </div> -->
 			</div>
-			<div *ngFor="let provider of this.configurableProviderService.providers">
-				<button mat-icon-button (click)="configurableLogin(provider)" class="login-social-button">
-					{{provider.name}}
-				</button>
+			<div class="row pt-2 mb-4 accesss-methods">
+				<div *ngFor="let provider of this.configurableProviderService.providers" class="col-auto configurable-logo">
+					<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)" class="login-social-button">
+						<span class="configurableIcon">{{provider.name}}</span>
+					</button>
+				</div>
 			</div>
 		</div>
 		<div class="card-footer">
diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.scss b/dmp-frontend/src/app/ui/auth/login/login.component.scss
index e01c3a8a5..6a4c37731 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.scss
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.scss
@@ -148,6 +148,14 @@
   margin-top: 13px;
 }
 
+.accesss-methods .configurable-logo {
+	flex-grow: 0;
+	padding-top: 21px;
+	padding-bottom: 21px;
+	margin-top: 5px;
+	height: 90px;
+}
+
 .tip {
   margin-top: -20px;
 }
@@ -217,6 +225,12 @@ span.openaireIcon {
   height: 56px;
 }
 
+span.configurableIcon {
+	float: right;
+	width: 80px;
+	height: 56px;
+}
+
 .b2access-button {
   margin-top: 10px;
   width: fit-content;
@@ -232,6 +246,11 @@ span.openaireIcon {
   width: fit-content;
 }
 
+.configurable-button {
+	margin-top: 10px;
+	width: fit-content;
+}
+
 .login-logo {
   background: url(img/open-dmp.png) no-repeat;
   width: 273px;