From b0fab3ea4a7238fca6538a85e251540cc4001040 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 25 Jul 2018 14:21:39 +0800
Subject: Use our image component in mission

---
 packages/website/ts/components/ui/image.tsx | 6 +++++-
 packages/website/ts/pages/jobs/mission.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages/website')

diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
index c4ff93531..c8d39352b 100644
--- a/packages/website/ts/components/ui/image.tsx
+++ b/packages/website/ts/components/ui/image.tsx
@@ -5,9 +5,11 @@ export interface ImageProps {
     className?: string;
     src?: string;
     fallbackSrc?: string;
-    height?: string | number;
     borderRadius?: string;
     width?: string | number;
+    height?: string | number;
+    maxWidth?: string | number;
+    maxHeight?: string | number;
 }
 interface ImageState {
     imageLoadFailed: boolean;
@@ -29,6 +31,8 @@ export class Image extends React.Component<ImageProps, ImageState> {
                 src={src}
                 style={{
                     borderRadius: this.props.borderRadius,
+                    maxWidth: this.props.maxWidth,
+                    maxHeight: this.props.maxHeight,
                 }}
                 height={this.props.height}
                 width={this.props.width}
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index daec1e62a..b78cdc886 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
@@ -10,7 +11,7 @@ export interface MissionProps {
 }
 export const Mission = (props: MissionProps) => {
     const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const image = <img src="/images/jobs/world-map.svg" style={{ maxWidth: 500, maxHeight: 280 }} />;
+    const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
     const missionStatementClassName = isSmallScreen ? 'center' : undefined;
     const missionStatement = (
         <Container className={missionStatementClassName} maxWidth="388px">
-- 
cgit v1.2.3