import React from 'react'
import injectSheet from 'react-jss'

import { Phone, Desktop } from '../components/breakpoints'

const Instruction = ({ classes, stepNumber, stepDescription }) => {
	return (
		<div className={classes.instructionRoot}>
			<Phone>
				<div>
					<div className={classes.stepNumberPhone}>{stepNumber}</div>
					<div className={classes.stepDescriptionPhone}>{stepDescription}</div>
				</div>
			</Phone>
			<Desktop>
				<div>
					<div className={classes.stepNumberDesktop}>{stepNumber}</div>
					<div className={classes.stepDescriptionDesktop}>
						{stepDescription}
					</div>
				</div>
			</Desktop>
		</div>
	)
}

const styles = {
	instructionRoot: {
		'text-align': 'center',
		margin: '40px 0px 60px 0px',
	},
	stepNumberPhone: {
		'font-weight': 'bold',
		'font-size': '10px',
		color: '#3d65f9',
		'margin-bottom': '20px',
	},
	stepDescriptionPhone: {
		color: '#000000',
		'font-size': '14px',
	},
	stepNumberDesktop: {
		'font-weight': 'bold',
		'font-size': '18px',
		color: '#3d65f9',
		'margin-bottom': '20px',
	},
	stepDescriptionDesktop: {
		color: '#000000',
		'font-size': '25px',
	},
}

export default injectSheet(styles)(Instruction)

@@ -764,38 +764,69 @@
 : %7B%0A%09%09'font-
-weight': 'bold
+family': 'hah-bold',%0A%09%09'letter-spacing': '2px
 ',%0A%09%09'font-s
@@ -996,22 +996,53 @@
 ont-
-weight': 'bold
+family': 'hah-bold',%0A%09%09'letter-spacing': '2px
 ',%0A%09

Update font weight