From 2b35848b61378af1d48e48a7b87a4c83c9878275 Mon Sep 17 00:00:00 2001
From: Laura van Helvoort <lvanhelvoort@teamliquid.com>
Date: Wed, 1 May 2024 22:24:51 +0200
Subject: [PATCH] styling

---
 .../styles/ext.networknotice.Notice.less      | 33 +++++++---
 src/NoticeHtml.php                            | 60 ++++++++++---------
 2 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/resources/styles/ext.networknotice.Notice.less b/resources/styles/ext.networknotice.Notice.less
index d61ddda..c38c8c1 100644
--- a/resources/styles/ext.networknotice.Notice.less
+++ b/resources/styles/ext.networknotice.Notice.less
@@ -31,15 +31,19 @@
 	}
 
 	&__content {
-		border-right: 0.0625rem solid rgba( 0, 0, 0, 0.16 );
-		margin: 0.5rem 0;
-		padding-right: 1rem;
-		display: flex;
-		align-items: center;
-		grid-column: 1;
+		word-break: break-word;
 
-		.theme--dark & {
-			border-right-color: rgba( 255, 255, 255, 0.16 );
+		&-wrapper {
+			border-right: 0.0625rem solid rgba( 0, 0, 0, 0.16 );
+			margin: 0.5rem 0;
+			padding-right: 1rem;
+			display: flex;
+			align-items: center;
+			grid-column: 1;
+
+			.theme--dark & {
+				border-right-color: rgba( 255, 255, 255, 0.16 );
+			}
 		}
 
 		&-icon {
@@ -66,11 +70,24 @@
 		justify-content: center;
 		margin: 0 0.625rem 0 0.375rem;
 		grid-column: 2;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: background-color 0.2s ease-in-out;
 
 		@media ( min-width: 768px ) {
 			width: 2rem;
 			height: 2rem;
 			margin: 0 1rem 0 0.75rem;
 		}
+
+		@media ( hover: hover ) {
+			&:hover {
+				background-color: rgba( 0, 0, 0, 0.16 );
+
+				.theme--dark & {
+					background-color: rgba( 255, 255, 255, 0.16 );
+				}
+			}
+		}
 	}
 }
diff --git a/src/NoticeHtml.php b/src/NoticeHtml.php
index d78da74..3a1fb44 100644
--- a/src/NoticeHtml.php
+++ b/src/NoticeHtml.php
@@ -14,48 +14,40 @@ class NoticeHtml {
 	 * @return string Html for our notice
 	 */
 	public static function getNoticeHTML( $outputPage, $text, $id = '0' ) {
-		$classes = [
-			'network-notice'
-		];
-		$attributes = [
-			'id' => 'network-notice-' . $id,
-			'data-id' => $id,
-			'class' => implode( ' ', $classes ),
-		];
+		$closeButtonText = wfMessage( 'networknotice-close-button' )->text();
 
-		$iconElement = Html::rawElement(
+		$closeButtonIcon = Html::rawElement(
 			'i',
 			[
-				'class' => 'fa fa-info-circle',
+				'class' => 'fa fa-times',
 			]
 		);
 
-		$iconWrapper = Html::rawElement(
+		$closeButton = Html::rawElement(
 			'div',
 			[
-				'class' => 'network-notice__content-icon',
+				'class' => 'network-notice__close-button',
+				'aria-label' => $closeButtonText,
+				'data-component' => 'network-notice-close-button',
+				'title' => $closeButtonText,
+				'tabindex' => '0',
 			],
-			$iconElement
+			$closeButtonIcon
 		);
 
-		$closeButtonText = wfMessage( 'networknotice-close-button' )->text();
-
-		$closeButtonIcon = Html::rawElement(
+		$contentIconElement = Html::rawElement(
 			'i',
 			[
-				'class' => 'fa fa-times',
+				'class' => 'fa fa-info-circle',
 			]
 		);
 
-		$closeButton = Html::rawElement(
+		$contentIconWrapper = Html::rawElement(
 			'div',
 			[
-				'class' => 'network-notice__close-button',
-				'aria-label' => $closeButtonText,
-				'data-component' => 'network-notice-close-button',
-				'title' => $closeButtonText,
+				'class' => 'network-notice__content-icon',
 			],
-			$closeButtonIcon
+			$contentIconElement
 		);
 
 		$contentDiv = Html::rawElement(
@@ -63,15 +55,27 @@ public static function getNoticeHTML( $outputPage, $text, $id = '0' ) {
 			[
 				'class' => 'network-notice__content',
 			],
-			$iconWrapper . $outputPage->parseInlineAsInterface( $text, false )
+			$outputPage->parseInlineAsInterface( $text, false )
+		);
+
+		$contentWrapper = Html::rawElement(
+			'div',
+			[
+				'class' => 'network-notice__content-wrapper',
+			],
+			$contentIconWrapper . $contentDiv
 		);
 
-		$element = Html::rawElement(
+		return Html::rawElement(
 				'div',
-				$attributes,
-				$contentDiv . $closeButton
+				[
+					'id' => 'network-notice-' . $id,
+					'data-id' => $id,
+					'class' => 'network-notice',
+					'data-component' => 'network-notice'
+				],
+				$contentWrapper . $closeButton
 		);
-		return $element;
 	}
 
 }