Commit 634aea5

committed

FInish Pattern component styling in Reference

1 parent 9fa168a commit 634aea5Copy full SHA for 634aea5

File tree

+13

-6

lines changed

+13

-6

lines changed

Lines changed: 13 additions & 6 deletions

Original file line number	Diff line number	Diff line change
@@ -23,9 +23,17 @@ const StyledPattern = styled.div`
`23`	`23`	`}`
`24`	`24`	`;
`25`	`25`
`26`		-const Memo = styled.span`
`27`		`- color: ${props => props.theme.ATLANTIS};`
	`26`	+const SubHeader = styled.span`
	`27`	`+ background-color: ${props => props.theme.titleBackground};`
	`28`	`+ color: ${props => props.theme.header};`
`28`	`29`	`display: block;`
	`30`	`+ margin-bottom: 8px;`
	`31`	`+ padding: 4px;`
	`32`	`+ text-transform: uppercase;`
	`33`	+`;
	`34`	`+`
	`35`	+const Type = styled.span`
	`36`	`+ text-transform: capitalize;`
`29`	`37`	`;
`30`	`38`
`31`	`39`	const StyledLink = styled(Link)`
@@ -40,7 +48,6 @@ const StyledLink = styled(Link)`
`40`	`48`	`}`
`41`	`49`	`;
`42`	`50`
`43`		`-// const Pattern = ({ match, mode }) => {`
`44`	`51`	`class Pattern extends React.Component {`
`45`	`52`	`componentDidMount() {`
`46`	`53`	`this.props.reset();`
`@@ -62,11 +69,11 @@ class Pattern extends React.Component {`
`62`	`69`	`<React.Fragment>`
`63`	`70`	`<h2>{pattern.name}</h2>`
`64`	`71`	`<p>`
`65`		`- <Memo>Type:</Memo>`
`66`		`- {pattern.type} pattern`
	`72`	`+ <SubHeader>Type:</SubHeader>`
	`73`	`+ <Type>{pattern.type} pattern</Type>`
`67`	`74`	`</p>`
`68`	`75`	`<p>`
`69`		`- <Memo>Description:</Memo>`
	`76`	`+ <SubHeader>Description:</SubHeader>`
`70`	`77`	{`This pattern ${pattern.hint}.`}
`71`	`78`	`</p>`
`72`	`79`

Comments

(0)