From 6e1cb2f8ad2051a80edf263a56de068d50baf97c Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 19 Apr 2023 15:05:14 +0100
Subject: [PATCH] Add close button

---
 ghost/announcement-bar/src/components/AnnouncementBar.css | 8 +++-----
 ghost/announcement-bar/src/components/AnnouncementBar.js  | 4 ++++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ghost/announcement-bar/src/components/AnnouncementBar.css b/ghost/announcement-bar/src/components/AnnouncementBar.css
index 1733d5301d..4a1c226635 100644
--- a/ghost/announcement-bar/src/components/AnnouncementBar.css
+++ b/ghost/announcement-bar/src/components/AnnouncementBar.css
@@ -1,7 +1,5 @@
 .gh-announcement-bar {
-    top: 0;
-    right: 0;
-    left: 0;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -61,6 +59,6 @@
 }
 
 .gh-announcement-bar svg {
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
 }
diff --git a/ghost/announcement-bar/src/components/AnnouncementBar.js b/ghost/announcement-bar/src/components/AnnouncementBar.js
index 0d9361235a..4c8d07872d 100644
--- a/ghost/announcement-bar/src/components/AnnouncementBar.js
+++ b/ghost/announcement-bar/src/components/AnnouncementBar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import './AnnouncementBar.css';
+import {ReactComponent as CloseIcon} from '../icons/clear.svg';
 
 export function AnnouncementBar({settings}) {
     // eslint-disable-next-line no-unused-vars
@@ -9,6 +10,9 @@ export function AnnouncementBar({settings}) {
     return (
         <div className="gh-announcement-bar dark">
             <div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: data.content}}></div>
+            <button>
+                <CloseIcon />
+            </button>
         </div>
     );
 }