Improve notification banner (#7268)

* a -> button

* i18n: Close

* a.close -> .close

* themes

* Apply suggestions from code review

Co-authored-by: UserRoot-Luca <55756898+UserRoot-Luca@users.noreply.github.com>
Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

* Update app/i18n/fr/gen.php

---------

Co-authored-by: UserRoot-Luca <55756898+UserRoot-Luca@users.noreply.github.com>
Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

3 files changed, 16 insertions, 14 deletions

diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 8987ce2b7..9e7ef2957 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -342,15 +342,17 @@ main.prompt {
 		color: variables.$white;
 	}
 
-	a.close {
-		border-radius: 0 3px 3px 0;
+	.close {
+		.icon {
+			filter: brightness(3);
+		}
 	}
 
-	&.good a.close:hover {
+	&.good .close:hover {
 		background: variables.$success-text;
 	}
 
-	&.bad a.close:hover {
+	&.bad .close:hover {
 		background: variables.$alert-text;
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index b471c48b8..86c97756e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -967,13 +967,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 0 3px 3px 0;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7556;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1332,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 3d77beb4e..a0788dc12 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -967,13 +967,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 3px 0 0 3px;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7556;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1332,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
\ No newline at end of file
+}