Use Text component for HeaderItem

1 files changed, 9 insertions, 7 deletions

diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
index b130cb0c4..ac214904c 100644
--- a/packages/website/ts/pages/jobs/list/header_item.tsx
+++ b/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>
     );