Skip to content
Snippets Groups Projects
Commit 2e953001 authored by Birgitta B's avatar Birgitta B Committed by birgitta410
Browse files

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
parent 5a40f6cb
No related branches found
No related tags found
No related merge requests found
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}>
......
......@@ -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
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment