From 2e953001662399862525da377970a0663ed19363 Mon Sep 17 00:00:00 2001
From: Birgitta B <bboeckel@thoughtworks.com>
Date: Sun, 13 Jan 2019 10:46:27 +0100
Subject: [PATCH] Add component to display hints above action buttons

This component can be placed right above an ActionButtonFooter to display a "turquoise" colored, slightly smaller text, e.g. to give helpful hints what to do before saving. If put outside the ScrollView, it will permanently display and cover up part of the scrollable area until the area is scrolled.

Issue: 178
---
 components/app-text.js | 14 +++++++++++++-
 styles/index.js        |  9 +++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/app-text.js b/components/app-text.js
index 6e996da..aaf7098 100644
--- a/components/app-text.js
+++ b/components/app-text.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from 'react-native'
+import { Text, View } from 'react-native'
 import styles from "../styles"
 
 export default function AppText(props) {
@@ -21,6 +21,18 @@ export function AppTextLight(props) {
   )
 }
 
+export function ActionHint(props) {
+  return (
+    <View
+      style={styles.actionHintWrappingView}>
+      <AppText
+        style={[styles.actionHint, props.style]}>
+        {props.children}
+      </AppText>
+    </View>
+  )
+}
+
 export function SymptomSectionHeader(props) {
   return (
     <AppText style={styles.symptomViewHeading}>
diff --git a/styles/index.js b/styles/index.js
index 5e73a93..ce44ff8 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
 const fontLight = 'Prompt-Thin'
 
 const regularSize = 16
+const hintSize = 14
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10
@@ -34,6 +35,14 @@ export default StyleSheet.create({
     fontFamily: fontLight,
     fontSize: regularSize
   },
+  actionHintWrappingView: {
+    margin: defaultIndentation
+  },
+  actionHint: {
+    color: secondaryColor,
+    fontFamily: fontRegular,
+    fontSize: hintSize
+  },
   paragraph: {
     marginBottom: defaultBottomMargin
   },