From f20a6a5a48d99fa52386a94d39615d9d94c35de2 Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Mon, 20 Jun 2022 15:46:13 +0100
Subject: [PATCH] Opening blog post link in new tab (#1526)

* Opening link in new tab

* Adding styling to link

* Updating button font size
---
 content/site.json                               |  2 +-
 .../@shared/AnnouncementBanner/index.module.css | 11 +++++++----
 .../@shared/AnnouncementBanner/index.tsx        |  7 ++++++-
 src/components/App/index.tsx                    | 17 ++++++++++++++++-
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/content/site.json b/content/site.json
index 78ee99ef2..db26be565 100644
--- a/content/site.json
+++ b/content/site.json
@@ -14,7 +14,7 @@
       "link": "/profile"
     }
   ],
-  "announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com/oceanonda-v4-production-has-arrived-cb4fe8faaf39).",
+  "announcement": "Data NFTs, One-Sided Staking and more.",
   "warning": {
     "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
   }
diff --git a/src/components/@shared/AnnouncementBanner/index.module.css b/src/components/@shared/AnnouncementBanner/index.module.css
index 987a45de0..751ee3fcc 100644
--- a/src/components/@shared/AnnouncementBanner/index.module.css
+++ b/src/components/@shared/AnnouncementBanner/index.module.css
@@ -24,10 +24,6 @@
   display: inline-block;
 }
 
-.banner button {
-  font-size: calc(var(--font-size-small) / 1.1);
-}
-
 .text {
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
@@ -41,6 +37,13 @@
   text-decoration: underline;
 }
 
+.link {
+  color: inherit;
+  text-decoration: underline;
+  text-transform: inherit;
+  font-size: var(--font-size-small);
+}
+
 .text p:last-child {
   margin-bottom: 0;
 }
diff --git a/src/components/@shared/AnnouncementBanner/index.tsx b/src/components/@shared/AnnouncementBanner/index.tsx
index 2e1e532b9..ae28231c8 100644
--- a/src/components/@shared/AnnouncementBanner/index.tsx
+++ b/src/components/@shared/AnnouncementBanner/index.tsx
@@ -35,7 +35,12 @@ export default function AnnouncementBanner({
     <div className={styleClasses}>
       {text && <Markdown className={styles.text} text={text} />}
       {action && (
-        <Button style="text" size="small" onClick={action.handleAction}>
+        <Button
+          style="text"
+          size="small"
+          className={styles.link}
+          onClick={action.handleAction}
+        >
           {action.name}
         </Button>
       )}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index e9eb4580a..dff602cab 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -19,11 +19,26 @@ export default function App({
   const { siteContent, appConfig } = useMarketMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
+  function openInNewTab() {
+    window
+      .open(
+        'https://blog.oceanprotocol.com/how-to-publish-a-data-nft-f58ad2a622a9',
+        '_blank'
+      )
+      .focus()
+  }
 
   return (
     <div className={styles.app}>
       {siteContent?.announcement !== '' && (
-        <AnnouncementBanner text={siteContent?.announcement} />
+        <AnnouncementBanner
+          text={siteContent?.announcement}
+          action={{
+            name: 'Explore OceanONDA V4.',
+            style: 'link',
+            handleAction: openInNewTab
+          }}
+        />
       )}
       <Header />