From 45e584895615d74bb40120d41a08853d588d4aa3 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 11 Sep 2020 12:19:31 +0300
Subject: [PATCH] Adds hover effects on login buttons and reverts error on
 form-composite-field

---
 .../app/ui/auth/login/login.component.html    | 14 ++--
 .../app/ui/auth/login/login.component.scss    | 74 ++++++++++++-------
 .../form-composite-field.component.html       |  6 +-
 3 files changed, 59 insertions(+), 35 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 62fbd3676..ba900fc39 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.html
@@ -7,21 +7,21 @@
 			<div class="row justify-content-center pb-4">
 				<div class="flex-column">
 					<div *ngIf="hasOpenAireOauth()" class="col-auto pr-4">
-						<button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center">
+						<button mat-icon-button (click)="openaireLogin()" class="openaireIconButton d-flex justify-content-center align-items-center">
 							<span class="openaireIcon"></span>
 						</button>
 					</div>
 				</div>
 				<div class="flex-column">
 					<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4">
-						<button mat-icon-button (click)="orcidLogin()" class="d-flex justify-content-center">
+						<button mat-icon-button (click)="orcidLogin()" class="orcidIconMediumButton d-flex justify-content-center align-items-center">
 							<span class="orcidIconMedium"></span>
 						</button>
 					</div>
 				</div>
 				<div class="flex-column">
 					<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4">
-						<button mat-icon-button (click)="b2AccessLogin()" class="d-flex justify-content-center">
+						<button mat-icon-button (click)="b2AccessLogin()" class="iconmediumButton d-flex justify-content-center align-items-center">
 							<span class="iconmedium"></span>
 						</button>
 					</div>
@@ -30,21 +30,21 @@
 			<div class="row justify-content-center">
 				<div class="flex-column">
 					<div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
-						<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center">
+						<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center align-items-center">
 							<span class="googleIcon"></span>
 						</button>
 					</div>
 				</div>
 				<div class="flex-column">
 					<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
-						<button mat-icon-button (click)="facebookLogin()" class="d-flex justify-content-center">
+						<button mat-icon-button (click)="facebookLogin()" class="facebookIconButton d-flex justify-content-center align-items-center">
 							<span class="facebookIcon"></span>
 						</button>
 					</div>
 				</div>
 				<div class="flex-column">
 					<div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
-						<button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center">
+						<button mat-icon-button (click)="twitterLogin()" class="twitterIconButton d-flex justify-content-center align-items-center">
 							<span class="twitterIcon"></span>
 						</button>
 					</div>
@@ -147,4 +147,4 @@
 			<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
 		</div>
 	</div>
-</div> -->
\ No newline at end of file
+</div> -->
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 11ce873d2..0b52e1d95 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.scss
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.scss
@@ -32,13 +32,13 @@
   font: Bold 38px/82px Roboto;
   height: 60px;
   letter-spacing: -0.95px;
-  color: #23BCBA;
+  color: #23bcba;
   margin-top: 11px;
   margin-bottom: 21px;
 }
 
 .line {
-  border-top: 5px solid #23BCBA;
+  border-top: 5px solid #23bcba;
   width: 116px;
   margin-bottom: 97px;
 }
@@ -165,18 +165,18 @@
 }
 
 .accesss-methods .configurable-logo {
-	flex-grow: 0;
-	padding-top: 21px;
-	padding-bottom: 21px;
-	margin-top: 5px;
-	height: 90px;
+  flex-grow: 0;
+  padding-top: 21px;
+  padding-bottom: 21px;
+  margin-top: 5px;
+  height: 90px;
 }
 
 .accesss-methods .zenodo-logo {
-	height: 75px;
-	padding-top: 8px;
-	margin-top: 13px;
-  }
+  height: 75px;
+  padding-top: 8px;
+  margin-top: 13px;
+}
 
 .tip {
   margin-top: -20px;
@@ -234,16 +234,38 @@ span.facebookIcon {
 
 span.twitterIcon {
   background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(5\).png") no-repeat;
-
 }
 
-span.googleIcon, span.facebookIcon, span.twitterIcon {
+span.googleIcon,
+span.facebookIcon,
+span.twitterIcon {
   float: left;
   transform: scale(0.8);
   width: 45px;
   height: 45px;
 }
 
+#googleSignInButton,
+.facebookIconButton,
+.twitterIconButton,
+.openaireIconButton,
+.orcidIconMediumButton,
+.iconmediumButton {
+  width: 60px !important;
+  height: 60px !important;
+}
+
+#googleSignInButton:hover,
+.facebookIconButton:hover,
+.twitterIconButton:hover,
+.openaireIconButton:hover,
+.orcidIconMediumButton:hover,
+.iconmediumButton:hover {
+  //   background-color: #129d993b;
+  background-color: #ececec;
+  border-radius: 60%;
+}
+
 span.openaireIcon {
   background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(6\).png") no-repeat;
   background-position: center;
@@ -257,7 +279,7 @@ span.orcidIconMedium {
   background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy.png") no-repeat;
   background-position: center;
   float: left;
-  transform: scale(0.80);
+  transform: scale(0.8);
   width: 50px;
   height: 45px;
 }
@@ -271,17 +293,17 @@ span.iconmedium {
 }
 
 span.configurableIcon {
-	float: right;
-	width: 80px;
-	height: 56px;
+  float: right;
+  width: 80px;
+  height: 56px;
 }
 
 span.zenodoIcon {
-	background: url("../../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat;
+  background: url("../../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat;
   background-position: center;
   float: right;
-  transform: scale(0.70);
-	width: 200px;
+  transform: scale(0.7);
+  width: 200px;
   height: 80px;
 }
 
@@ -301,14 +323,14 @@ span.zenodoIcon {
 }
 
 .configurable-button {
-	margin-top: 10px;
-	width: fit-content;
+  margin-top: 10px;
+  width: fit-content;
 }
 
 .zenodo-button {
-	margin-top: 10px;
-	width: fit-content;
-  }
+  margin-top: 10px;
+  width: fit-content;
+}
 
 // .login-logo {
 //   background: url(img/open-dmp.png) no-repeat;
@@ -318,7 +340,7 @@ span.zenodoIcon {
 // }
 
 .laptop-img {
-//   background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
+  //   background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
   background: url("../../../../assets/splash/assets/img/1_Main/Png/Who\ \ \ Benefits\ Small.png") no-repeat;
   width: 164px;
   height: 200px;
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
index ad16c09ff..ca7f20f7d 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
@@ -1,6 +1,7 @@
 <div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row">
 
-	<div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
+	<!-- <div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12"> -->
+	<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
 		<div class="row">
 			<div class="col-12">
 				<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
@@ -22,7 +23,8 @@
 
 		</div>
 	</div>
-	<div *ngIf="form.get('fields').value.length > 1" class="col-12">
+	<!-- <div *ngIf="form.get('fields').value.length > 1" class="col-12"> -->
+	<div *ngIf="form.get('fields').length > 1" class="col-12">
 		<div class="row">
 			<div class="col-12">
 				<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>