From af1484b1f0ed551e7e2d02595dce66bd404c4023 Mon Sep 17 00:00:00 2001
From: Dmitry Vinnik <dmitryvinn@users.noreply.github.com>
Date: Wed, 2 Mar 2022 19:49:52 -0800
Subject: [PATCH] docs: Moving to use Announcement Banner for the Support
 Ukraine Initiative (#2988)

---
 website/docusaurus.config.js |  8 ++++++++
 website/src/css/index.scss   | 10 ----------
 website/src/pages/index.js   | 15 ---------------
 3 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 4bfaf881b2f..c66b9c2b45a 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -152,6 +152,14 @@ const lastVersion = versions[0];
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'support_ukraine',
+        content:
+          'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
+        backgroundColor: '#20232a',
+        textColor: '#fff',
+        isCloseable: false,
+      },
       prism: {
         defaultLanguage: 'jsx',
         theme: require('./core/PrismTheme'),
diff --git a/website/src/css/index.scss b/website/src/css/index.scss
index 6a8b0b651ec..b00cc6b5d85 100644
--- a/website/src/css/index.scss
+++ b/website/src/css/index.scss
@@ -284,16 +284,6 @@
   }
 }
 
-/* Social Banner */
-.SocialBanner {
-  font-weight: bold;
-  font-size: 20px;
-  padding: 20px;
-  max-width: 768px;
-  margin: 0 auto;
-  text-align: center;
-}
-
 /* Header Hero */
 
 .HeaderHero {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index a9422b2115a..96ef43cecd2 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -543,20 +543,6 @@ function GetStarted() {
   );
 }
 
-function SocialBanner() {
-  return (
-    <div className="SocialBanner">
-      <div>
-        Support Ukraine 🇺🇦{' '}
-        <a href="https://opensource.facebook.com/support-ukraine">
-          Help Provide Humanitarian Aid to Ukraine
-        </a>
-        .
-      </div>
-    </div>
-  );
-}
-
 const useHomePageAnimations = () => {
   useEffect(() => setupHeaderAnimations(), []);
   useEffect(() => setupDissectionAnimation(), []);
@@ -579,7 +565,6 @@ const Index = () => {
           content="React Native · Learn once, write anywhere"
         />
       </Head>
-      <SocialBanner />
       <HeaderHero />
       <NativeApps />
       <NativeCode />