Opening blog post link in new tab (#1526)

* Opening link in new tab

* Adding styling to link

* Updating button font size

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."
   }

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;
 }

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>
       )}

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 />