From 95b56577dcb2576c01e1ff8337505135b389d1d0 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Tue, 5 Apr 2022 15:52:41 +0200
Subject: [PATCH 1/5] Issue-#944: Add v4 version badge

---
 src/components/@shared/atoms/Badge.jsx         | 11 +++++++++++
 src/components/@shared/atoms/Badge.module.scss | 15 +++++++++++++++
 src/components/HeaderHome.jsx                  |  5 ++++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/@shared/atoms/Badge.jsx
 create mode 100644 src/components/@shared/atoms/Badge.module.scss

diff --git a/src/components/@shared/atoms/Badge.jsx b/src/components/@shared/atoms/Badge.jsx
new file mode 100644
index 00000000..290983b5
--- /dev/null
+++ b/src/components/@shared/atoms/Badge.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './Badge.module.scss'
+import PropTypes from 'prop-types'
+
+export default function Badge({ label }) {
+  return <span className={styles.badge}>{label}</span>
+}
+
+Badge.propTypes = {
+  label: PropTypes.string
+}
diff --git a/src/components/@shared/atoms/Badge.module.scss b/src/components/@shared/atoms/Badge.module.scss
new file mode 100644
index 00000000..bb642aa7
--- /dev/null
+++ b/src/components/@shared/atoms/Badge.module.scss
@@ -0,0 +1,15 @@
+@import 'variables';
+
+.badge {
+  display: inline-block;
+  font-size: $font-size-mini;
+  font-family: $font-family-base;
+  font-weight: $font-weight-bold;
+  line-height: 1 !important;
+  text-transform: uppercase;
+  padding: 0.2rem;
+  border-radius: $border-radius;
+  color: $brand-white;
+  background: $brand-purple;
+  vertical-align: top;
+}
diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx
index 99e24634..f8329078 100644
--- a/src/components/HeaderHome.jsx
+++ b/src/components/HeaderHome.jsx
@@ -5,6 +5,7 @@ import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
 import SearchButton from '../components/Search/SearchButton'
 import ToggleSwitch from './ToggleSwitch'
+import Badge from './@shared/atoms/Badge'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -25,7 +26,9 @@ const HeaderHome = () => (
         <header className={styles.header}>
           <Content>
             <Logo className={styles.headerLogo} />
-            <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            <h1 className={styles.headerTitle}>
+              {siteTitle} <Badge label="v4" />
+            </h1>
             <p className={styles.headerDescription}>
               {siteDescription}
               <div className={styles.container}>

From d29383982ab565d7878b73799a449ba5f59fb8a6 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Tue, 5 Apr 2022 15:57:27 +0200
Subject: [PATCH 2/5] Issue-#944: Add v4 badge in header

---
 src/components/Header.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 0bf03a13..5b6cdb30 100755
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -4,6 +4,7 @@ import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'
 import SearchButton from './Search/SearchButton'
 import ToggleSwitch from './ToggleSwitch'
+import Badge from './@shared/atoms/Badge'
 
 const query = graphql`
   query {
@@ -37,7 +38,10 @@ const Header = () => (
           <div className={styles.headerContent}>
             <Link to="/" className={styles.headerLogo}>
               <Logo className={styles.headerLogoImage} />
-              <h1 className={styles.headerTitle}>{siteTitle}</h1>
+              <h1 className={styles.headerTitle}>
+                {siteTitle}
+                <Badge label="v4" />
+              </h1>
             </Link>
             <nav className={styles.headerMenu}>
               {sections.map(({ node }) => (

From 70059c59476ac703026b04e98822bbee3a9f727b Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Tue, 5 Apr 2022 19:37:27 +0200
Subject: [PATCH 3/5] Issue-#944: Change badge font size for home page

---
 src/components/@shared/atoms/Badge.jsx | 11 ++++++++---
 src/components/Header.jsx              |  3 ++-
 src/components/HeaderHome.jsx          |  5 +++--
 src/styles/_variables.scss             |  5 +++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/@shared/atoms/Badge.jsx b/src/components/@shared/atoms/Badge.jsx
index 290983b5..d9dc1843 100644
--- a/src/components/@shared/atoms/Badge.jsx
+++ b/src/components/@shared/atoms/Badge.jsx
@@ -2,10 +2,15 @@ import React from 'react'
 import styles from './Badge.module.scss'
 import PropTypes from 'prop-types'
 
-export default function Badge({ label }) {
-  return <span className={styles.badge}>{label}</span>
+export default function Badge({ label, size }) {
+  return (
+    <span className={styles.badge} style={{ fontSize: size }}>
+      {label}
+    </span>
+  )
 }
 
 Badge.propTypes = {
-  label: PropTypes.string
+  label: PropTypes.string,
+  size: PropTypes.string
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 5b6cdb30..c992cc3f 100755
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -5,6 +5,7 @@ import styles from './Header.module.scss'
 import SearchButton from './Search/SearchButton'
 import ToggleSwitch from './ToggleSwitch'
 import Badge from './@shared/atoms/Badge'
+import { fontSizeMini } from '../styles/_variables.scss'
 
 const query = graphql`
   query {
@@ -40,7 +41,7 @@ const Header = () => (
               <Logo className={styles.headerLogoImage} />
               <h1 className={styles.headerTitle}>
                 {siteTitle}
-                <Badge label="v4" />
+                <Badge label="v4" size={fontSizeMini} />
               </h1>
             </Link>
             <nav className={styles.headerMenu}>
diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx
index f8329078..e70578e1 100644
--- a/src/components/HeaderHome.jsx
+++ b/src/components/HeaderHome.jsx
@@ -6,6 +6,7 @@ import styles from './HeaderHome.module.scss'
 import SearchButton from '../components/Search/SearchButton'
 import ToggleSwitch from './ToggleSwitch'
 import Badge from './@shared/atoms/Badge'
+import { fontSizeSmall } from '../styles/_variables.scss'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -21,13 +22,13 @@ const HeaderHome = () => (
     `}
     render={(data) => {
       const { siteTitle, siteDescription } = data.site.siteMetadata
-
       return (
         <header className={styles.header}>
           <Content>
             <Logo className={styles.headerLogo} />
             <h1 className={styles.headerTitle}>
-              {siteTitle} <Badge label="v4" />
+              {siteTitle}
+              <Badge label="v4" size={fontSizeSmall} />
             </h1>
             <p className={styles.headerDescription}>
               {siteDescription}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 640590f8..21155e51 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -69,3 +69,8 @@ $narrowWidth: 35rem;
 $box-shadow-color: rgba(0, 0, 0, 0.2);
 $border-color: #e2e2e2;
 $background-content: #fff;
+
+:export {
+  font-size-small: $font-size-small;
+  font-size-mini: $font-size-mini;
+}

From f53edc27f580f31d3e63e38a6ebbcfbe02a9ea76 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Wed, 6 Apr 2022 13:55:48 +0200
Subject: [PATCH 4/5] Issue-#944: Add margin on badge

---
 src/components/@shared/atoms/Badge.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/@shared/atoms/Badge.module.scss b/src/components/@shared/atoms/Badge.module.scss
index bb642aa7..2201247a 100644
--- a/src/components/@shared/atoms/Badge.module.scss
+++ b/src/components/@shared/atoms/Badge.module.scss
@@ -8,6 +8,7 @@
   line-height: 1 !important;
   text-transform: uppercase;
   padding: 0.2rem;
+  margin-left: 0.2rem;
   border-radius: $border-radius;
   color: $brand-white;
   background: $brand-purple;

From b9eadeebb29b0f66da945dff6ea05f5bdfa3ab97 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Wed, 6 Apr 2022 16:35:52 +0200
Subject: [PATCH 5/5] Issue-#944: Add comment to bypass code climate issue

---
 src/components/Header.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c992cc3f..71ba4089 100755
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -41,6 +41,7 @@ const Header = () => (
               <Logo className={styles.headerLogoImage} />
               <h1 className={styles.headerTitle}>
                 {siteTitle}
+                {/* V4 badge */}
                 <Badge label="v4" size={fontSizeMini} />
               </h1>
             </Link>