From f8753de83a1a8f8af3f6b380f4507409c5da3306 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 6 Nov 2020 10:57:30 +0200
Subject: [PATCH] Styles close button everywhere

---
 .../src/app/ui/dashboard/dashboard.component.html    |  4 ++--
 .../src/app/ui/dashboard/dashboard.component.scss    |  8 ++++++++
 .../dataset-criteria-dialog.component.html           |  2 +-
 .../dataset-criteria-dialog.component.scss           | 12 ++++++++++++
 .../dataset/listing/dataset-listing.component.scss   | 10 +++++++++-
 .../criteria/dmp-criteria-dialog.component.html      |  2 +-
 .../criteria/dmp-criteria-dialog.component.scss      | 11 +++++++++++
 .../criteria/dmp-criteria-dialog.component.ts        |  1 +
 .../app/ui/dmp/listing/dmp-listing.component.scss    | 10 +++++++++-
 .../app/ui/user-profile/user-profile.component.scss  |  9 ++++++++-
 10 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.scss

diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
index 53880a050..02258c127 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
@@ -35,7 +35,7 @@
 				<div class="main-content">
 					<div class="col">
 						<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
-							<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+							<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
 							<p class="card-content mb-0 pt-0">
 								{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
 								<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
@@ -104,7 +104,7 @@
 					<div class="row">
 						<div class="col d-flex flex-column">
 							<div class="card non-auth-card" [style.display]="isVisible ? 'block' : 'none'">
-								<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+								<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
 								<div class="d-flex flex-column align-items-center non-auth-title-container">
 									<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
 									<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
index 013a6bdd8..764ac28fc 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -49,6 +49,14 @@
 
 .clear-icon {
 	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+	border-radius: 50%;
+	padding: 0.4rem;
 }
 
 .normal-btn {
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
index 61787906e..167a8da14 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
@@ -1,2 +1,2 @@
-<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
 <app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dataset-criteria-component>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
index 1d5108761..362c44bc3 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
@@ -1,3 +1,15 @@
+.clear-icon {
+	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+	border-radius: 50%;
+	padding: 0.4rem;
+}
+
 ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
index e278122ed..8f2734609 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
@@ -86,7 +86,15 @@
 }
 
 .clear-icon {
-  cursor: pointer;
+	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+	border-radius: 50%;
+	padding: 0.4rem;
 }
 
 .normal-btn {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
index 8646ab950..b38f8336c 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
@@ -1,2 +1,2 @@
-<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
 <app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dmp-criteria-component>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.scss
new file mode 100644
index 000000000..818303e45
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.scss
@@ -0,0 +1,11 @@
+.clear-icon {
+	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+	border-radius: 50%;
+	padding: 0.4rem;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts
index c835030f6..8c895d812 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts
@@ -7,6 +7,7 @@ import { FormGroup } from '@angular/forms';
 @Component({
 	selector: 'dmp-criteria-dialog-component',
 	templateUrl: './dmp-criteria-dialog.component.html',
+	styleUrls: ['./dmp-criteria-dialog.component.scss']
 })
 
 export class DmpCriteriaDialogComponent implements OnInit {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 63ac32fd7..6c5f839cb 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -148,7 +148,15 @@
 }
 
 .clear-icon {
-  cursor: pointer;
+	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+	border-radius: 50%;
+	padding: 0.4rem;
 }
 
 .normal-btn {
diff --git a/dmp-frontend/src/app/ui/user-profile/user-profile.component.scss b/dmp-frontend/src/app/ui/user-profile/user-profile.component.scss
index 5f8c2e9f8..462ec45e8 100644
--- a/dmp-frontend/src/app/ui/user-profile/user-profile.component.scss
+++ b/dmp-frontend/src/app/ui/user-profile/user-profile.component.scss
@@ -147,11 +147,18 @@
 .check-icon {
 	color: #129d99;
 	transform: scale(0.75);
+	padding: 0.4rem;
 }
 
 .clear-icon {
-	color: #f16868;
 	cursor: pointer;
+	color: #212121;
+	padding: 0.4rem;
+}
+
+.clear-icon:hover {
+	background-color: #ececec !important;
+    border-radius: 50%;
 }
 
 .add-new-btn {