Merge pull request #951 from oceanprotocol/issue-944-version-badge

V4 badge

src/components/@shared/atoms/Badge.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './Badge.module.scss'
+import PropTypes from 'prop-types'
+
+export default function Badge({ label, size }) {
+  return (
+    <span className={styles.badge} style={{ fontSize: size }}>
+      {label}
+    </span>
+  )
+}
+
+Badge.propTypes = {
+  label: PropTypes.string,
+  size: PropTypes.string
+}

src/components/@shared/atoms/Badge.module.scss

@@ -0,0 +1,16 @@
+@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;
+  margin-left: 0.2rem;
+  border-radius: $border-radius;
+  color: $brand-white;
+  background: $brand-purple;
+  vertical-align: top;
+}

src/components/Header.jsx

@@ -4,6 +4,8 @@ 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'
+import { fontSizeMini } from '../styles/_variables.scss'
 
 const query = graphql`
   query {
@@ -37,7 +39,11 @@ 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}
+                {/* V4 badge */}
+                <Badge label="v4" size={fontSizeMini} />
+              </h1>
             </Link>
             <nav className={styles.headerMenu}>
               {sections.map(({ node }) => (

src/components/HeaderHome.jsx

@@ -5,6 +5,8 @@ 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'
+import { fontSizeSmall } from '../styles/_variables.scss'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -32,7 +34,10 @@ const HeaderHome = () => (
               <a href={siteTaglineURL}>Immunefi</a>
             </div>
             <Logo className={styles.headerLogo} />
-            <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            <h1 className={styles.headerTitle}>
+              {siteTitle}
+              <Badge label="v4" size={fontSizeSmall} />
+            </h1>
             <p className={styles.headerDescription}>
               {siteDescription}
               <div className={styles.container}>

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