From 7e349d0bf854a1035be1c3c69b69260c42e99e5f Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 18 Apr 2023 14:02:51 +0100
Subject: [PATCH] Added basic styles to the announcement editor

refs https://github.com/TryGhost/Team/issues/3026
---
 .../custom-theme-settings/announcement.hbs    |  4 ++--
 ghost/admin/app/styles/layouts/settings.css   | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/custom-theme-settings/announcement.hbs b/ghost/admin/app/components/custom-theme-settings/announcement.hbs
index a659b98029..6a50cc281d 100644
--- a/ghost/admin/app/components/custom-theme-settings/announcement.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/announcement.hbs
@@ -5,8 +5,8 @@
         </label>
         <div class="gh-announcement-editor">
             <KoenigLexicalEditorInput
-                @placeholderText="Enter text"
-                @html={{'<p><span>check</span> <a href="https://ghost.org/changelog/markdown/" dir="ltr"><span data-lexical-text="true">ghost.org/changelog/markdown/</span></a></p>'}}
+                @placeholderText="Breaking news, a big story, a special offer, or any other message"
+                @html={{'<p></p>'}}
                 @onChangeHtml={{this.onChangeHtml}}
             />
         </div>
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 042d014e79..2ad86297f9 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -3684,3 +3684,27 @@ p.theme-validation-details {
     margin-left: 8px;
     background: var(--whitegrey);
 }
+
+/* Announcement bar */
+
+.gh-announcement-editor {
+    height: 120px;
+    padding: 6px 12px 6px 12px;
+    border: 1px solid var(--whitegrey-d1);
+    background: var(--white);
+    border-radius: 4px;
+    word-break: break-word;
+}
+
+.gh-announcement-editor .koenig-lexical *,
+.gh-announcement-editor .koenig-lexical-editor-input-placeholder {
+    font-family: var(--font-family) !important;
+    font-size: 1.4rem !important;
+    line-height: 1.5em !important;
+}
+
+.gh-announcement-editor .koenig-lexical a {
+    display: inline;
+    padding: 0;
+    height: auto;
+}