Issue-#944: Change badge font size for home page

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 }) {
+export default function Badge({ label, size }) {
-  return <span className={styles.badge}>{label}</span>
+  return (
+    <span className={styles.badge} style={{ fontSize: size }}>
+      {label}
+    </span>
+  )
 }
 
 Badge.propTypes = {
-  label: PropTypes.string
+  label: PropTypes.string,
+  size: PropTypes.string
 }

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

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}

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