Use Text component for HeaderItem

packages/website/ts/components/ui/text.tsx

@@ -11,6 +11,7 @@ export interface TextProps {
     fontFamily?: string;
     fontColor?: string;
     lineHeight?: string;
+    minHeight?: string;
     center?: boolean;
     fontWeight?: number;
 }
@@ -26,6 +27,7 @@ export const Text = styled(PlainText)`
     ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
+    min-height: ${props => props.minHeight};
 `;
 
 Text.defaultProps = {

packages/website/ts/pages/jobs/list/header_item.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
+import { Text } from 'ts/components/ui/text';
 import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { colors } from 'ts/style/colors';
 
 export interface HeaderItemProps {
     headerText?: string;
@@ -9,15 +11,15 @@ export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerTe
     return (
         <div className="h2 lg-py4 md-py4 sm-py3">
             <ListItem>
-                <div
-                    style={{
-                        fontFamily: 'Roboto Mono',
-                        minHeight: '1.25em',
-                        lineHeight: 1.25,
-                    }}
+                <Text
+                    fontFamily="Roboto Mono"
+                    fontSize="24px"
+                    lineHeight="1.25"
+                    minHeight="1.25em"
+                    fontColor={colors.black}
                 >
                     {headerText}
-                </div>
+                </Text>
             </ListItem>
         </div>
     );