mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Issue-#944: Change badge font size for home page
This commit is contained in:
parent
d29383982a
commit
70059c5947
@ -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
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user