Convert to NoticeView and add header to NoticeView

Author: hannesmcman

source/views/components/notice.js

@@ -3,6 +3,7 @@ import * as React from 'react'
 import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
 import * as c from './colors'
 import {Button} from './button'
+import {Heading} from './markdown/heading'
 
 const styles = StyleSheet.create({
 	container: {
@@ -23,18 +24,28 @@ const styles = StyleSheet.create({
 })
 
 type Props = {
+	header?: string,
 	text?: string,
 	style?: any,
 	spinner?: boolean,
 	buttonText?: string,
 	onPress?: () => any,
 }
 
-export function NoticeView({text, style, spinner, buttonText, onPress}: Props) {
+export function NoticeView({
+	header,
+	text,
+	style,
+	spinner,
+	buttonText,
+	onPress,
+}: Props) {
 	return (
 		<View style={[styles.container, style]}>
 			{spinner ? <ActivityIndicator style={styles.spinner} /> : null}
 
+			<Heading level={1}>{header}</Heading>
+
 			<Text selectable={true} style={styles.text}>
 				{text || 'Notice!'}
 			</Text>

source/views/sis/tes.js

@@ -1,22 +1,46 @@
 // @flow
 
 import * as React from 'react'
-import {View, Component} from 'react-native'
+import {View, StyleSheet} from 'react-native'
 import {TabBarIcon} from '../components/tabbar-icon'
 import openUrl from '../components/open-url'
+import type {TopLevelViewPropsType} from '../types'
+import * as c from '../components/colors'
+import {NoticeView} from '../components/notice'
 
-class TESView extends React.Component {
-  static navigationOptions = {
+type Props = TopLevelViewPropsType
+
+export default class TESView extends React.PureComponent<Props> {
+	static navigationOptions = {
 		tabBarLabel: 'TES',
-		tabBarIcon: TabBarIcon('card'),
+		tabBarIcon: TabBarIcon('cash'),
 	}
 
-  componentDidMount() {
-    openUrl('https://www.stolaf.edu/apps/tes/')
-  }
-
-  render() {
-    return (<View></View>)
-  }
+	launchSite = () => {
+		openUrl('https://www.stolaf.edu/apps/tes/')
+	}
 
+	render() {
+		return (
+			<View style={styles.container}>
+				<NoticeView
+					buttonText="Open TES"
+					header="Time Entry System"
+					onPress={this.launchSite}
+					text="The St. Olaf Time Entry System (TES) is the place to report your work hours, for both students and hourly staff."
+				/>
+			</View>
+		)
+	}
 }
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		flexGrow: 1,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		backgroundColor: c.white,
+		padding: 20,
+	},
+})