Improve footer links (#1338)

* Opening external links in a new tab

* Main site links opens in a new tab + adding external link arrow

content/site.json

@@ -3,7 +3,7 @@
   "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
   "siteUrl": "https://v4.market.oceanprotocol.com",
   "siteImage": "/share.png",
-  "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
+  "copyright": "All Rights Reserved. Powered by ",
   "menu": [
     {
       "name": "Publish",

src/components/Footer/Footer.module.css

@@ -55,3 +55,15 @@
     text-align: right;
   }
 }
+.grid a {
+  text-transform: none;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+}
+
+.svg {
+  display: inline;
+  fill: currentColor;
+  width: 0.6em;
+  height: 0.6em;
+}

src/components/Footer/Footer.tsx

@@ -5,6 +5,8 @@ import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import MarketStats from './MarketStats'
 import BuildId from './BuildId'
 import Links from './Links'
+import Button from '@shared/atoms/Button'
+import External from '@images/external.svg'
 
 export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
@@ -19,6 +21,14 @@ export default function Footer(): ReactElement {
         <Links />
         <div className={styles.copyright}>
           © {year} <Markdown text={copyright} />
+          <Button
+            style="text"
+            size="small"
+            href="https://oceanprotocol.com"
+            target="_blank"
+          >
+            Ocean Protocol <External className={styles.svg} />
+          </Button>
         </div>
       </div>
     </footer>

src/components/Footer/Links.tsx

@@ -17,7 +17,7 @@ export default function Links() {
     <div className={styles.links}>
       {content.links.map(({ name, url }) => (
         <Fragment key={name}>
-          <Button style="text" size="small" href={url}>
+          <Button style="text" size="small" href={url} target="_blank">
             {name} <External />
           </Button>
           {' — '}