Add close button as html and add new styling from design

.gitignore

@@ -3,3 +3,4 @@
 /node_modules/
 composer.lock
 package-lock.json
+.idea/

i18n/en.json

@@ -17,6 +17,7 @@
 	"networknotice-delete-network-notice-heading": "Delete network notice",
 	"networknotice-preview-heading": "Preview",
 	"networknotice-delete-network-notice-deletion-heading": "Confirm deletion",
+	"networknotice-close-button": "Close notification",
 
 	"networknotice-create-notice-desc": "Creates network notices (site notices) that can be displayed network wide, with more features than standard site notices.",
 	"networknotice-create-notice-label-label": "Label:",
@@ -56,9 +57,9 @@
 	"networknotice-button-delete-label": "delete",
 	"networknotice-text-false-label": "false",
 	"networknotice-text-true-label": "true",
-	
+
 	"networknotice-success-updated": "Network notice successfully updated!",
 	"networknotice-success-created": "Network notice successfully created!",
 
 	"lpextmenu-networknotice": "Network Notice"
-}
+}

resources/styles/ext.networknotice.Notice.less

@@ -1,3 +1,76 @@
+.network-notice {
+	min-height: 3rem;
+	display: grid;
+	grid-template-columns: auto 3rem;
+	box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 );
+	border-radius: 0.5rem;
+	position: relative;
+	padding: 0 0 0 1.5rem;
+	font-size: 0.875rem;
+	align-items: center;
+	background-color: #FFFFFF; // default for Bruinen & LakesideView light theme
+	margin-bottom: 0.5rem;
+
+	@media (min-width: 768px) {
+		grid-template-columns: auto 3.75rem;
+	}
+
+	.theme--dark & {
+		background-color: #26292D;
+	}
+
+	&::before {
+		content: '';
+		width: 0.5rem;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		background-color: var( --clr-wiki-primary );
+		border-radius: 0.5rem 0 0 0.5rem;
+	}
+
+	&__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;
+
+		.theme--dark & {
+			border-right-color: rgba(255, 255, 255, 0.16);
+		}
+
+		&-icon {
+			display: inline-flex;
+			width: 1.5rem;
+			height: 1.5rem;
+			align-items: center;
+			justify-content: center;
+			margin-right: 0.75rem;
+			font-size: 1.125rem;
+			opacity: 0.7;
+		}
+	}
+
+	&__close-button {
+		width: 2.75rem;
+		height: 2.75rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 0.625rem 0 0.375rem;
+		grid-column: 2;
+
+		@media (min-width: 768px) {
+			width: 2rem;
+			height: 2rem;
+			margin: 0 1rem 0 0.75rem;
+		}
+	}
+}
+
 .networknotice {
 	margin-top: 0.1875rem;
 	display: block;

src/NoticeHtml.php

@@ -16,19 +16,62 @@ class NoticeHtml {
 	 */
 	public static function getNoticeHTML( $outputPage, $style, $text, $id = '0' ) {
 		$classes = [
-			'networknotice',
-			'networknotice-' . $style,
+			'network-notice',
+			'network-notice-' . $style,
 		];
 		$attributes = [
-			'id' => 'networknotice-' . $id,
+			'id' => 'network-notice-' . $id,
 			'data-id' => $id,
 			'class' => implode( ' ', $classes ),
 		];
 
+		$iconElement = Html::rawElement(
+			'i',
+			[
+				'class' => 'fa fa-info-circle',
+			]
+		);
+
+		$iconWrapper = Html::rawElement(
+			'div',
+			[
+				'class' => 'network-notice__content-icon',
+			],
+			$iconElement
+		);
+
+		$closeButtonText = wfMessage( 'networknotice-close-button' )->text();
+
+		$closeButtonIcon = Html::rawElement(
+			'i',
+			[
+				'class' => 'fa fa-times',
+			]
+		);
+
+		$closeButton = Html::rawElement(
+			'div',
+			[
+				'class' => 'network-notice__close-button',
+				'aria-label' => $closeButtonText,
+				'data-component' => 'network-notice-close-button',
+				'title' => $closeButtonText,
+			],
+			$closeButtonIcon
+		);
+
+		$contentDiv = Html::rawElement(
+			'div',
+			[
+				'class' => 'network-notice__content',
+			],
+			$iconWrapper . $outputPage->parseInlineAsInterface( $text, false )
+		);
+
 		$element = Html::rawElement(
 				'div',
 				$attributes,
-				$outputPage->parseInlineAsInterface( $text, false )
+				$contentDiv . $closeButton // Include the content div and the close button in the content of the network-notice div
 		);
 		return $element;
 	}