From 7ba6d8900e2abfaf0ceb4bb9e04a020afbdd36fa Mon Sep 17 00:00:00 2001 From: Hope Tambala Date: Thu, 26 Nov 2020 00:56:49 -0500 Subject: [PATCH] fix: card styling of forms for form gallery --- components/Cards/SmallCardsCarousel/index.js | 137 ++++++++---------- .../PaperInputPicker/AutoFill/index.js | 4 +- .../FormikFields/PaperInputPicker/index.js | 96 ++++++------ .../PaperInputPicker/index.style.js | 3 +- domains/DataCollection/FormGallery/index.js | 41 +++--- 5 files changed, 135 insertions(+), 146 deletions(-) diff --git a/components/Cards/SmallCardsCarousel/index.js b/components/Cards/SmallCardsCarousel/index.js index dfc814755..e0967eb7f 100644 --- a/components/Cards/SmallCardsCarousel/index.js +++ b/components/Cards/SmallCardsCarousel/index.js @@ -3,7 +3,7 @@ import { View, StyleSheet, ScrollView } from 'react-native'; import { - Card, Button, Text + Card, Text } from 'react-native-paper'; import I18n from '../../../modules/i18n'; @@ -13,8 +13,6 @@ import NewRecordSVG from '../../../assets/icons/New-Record-icon.svg'; import EnvSVG from '../../../assets/icons/Home-icon.svg'; import MedEvalSVG from '../../../assets/icons/Heart-Icon.svg'; - - /** * Carousel of Forms that are used for Form Navigation * @@ -36,65 +34,65 @@ import MedEvalSVG from '../../../assets/icons/Heart-Icon.svg'; const SmallCardsCarousel = ({ puenteForms, navigateToNewRecord, setView, surveyee, setUser }) => ( - - {puenteForms.map((form) => ( - { - if (setUser) { - setView('Forms'); - navigateToNewRecord(form.tag, surveyee); - } else { - navigateToNewRecord(form.tag); - } - }} - > - {form.tag === 'id' && ( - - - - - {I18n.t('cards.smallCards.residentID')} - - - - )} + + {puenteForms.map((form) => ( + { + if (setUser) { + setView('Forms'); + navigateToNewRecord(form.tag, surveyee); + } else { + navigateToNewRecord(form.tag); + } + }} + > + {form.tag === 'id' && ( + + + + + {I18n.t('cards.smallCards.residentID')} + + + + )} - {form.tag === 'env' && ( - - - - - {`${I18n.t('cards.smallCards.environmental')} ${I18n.t('cards.smallCards.history')}`} - - - - )} - {form.tag === 'med-eval' && ( - - - - - {`${I18n.t('cards.smallCards.medical')} ${I18n.t('cards.smallCards.evaluation')}`} - - - - )} - {form.tag === 'vitals' && ( - - - - - {I18n.t('cards.smallCards.vitals')} - - - - )} - - ))} - - ); + {form.tag === 'env' && ( + + + + + {`${I18n.t('cards.smallCards.environmental')} ${I18n.t('cards.smallCards.history')}`} + + + + )} + {form.tag === 'med-eval' && ( + + + + + {`${I18n.t('cards.smallCards.medical')} ${I18n.t('cards.smallCards.evaluation')}`} + + + + )} + {form.tag === 'vitals' && ( + + + + + {I18n.t('cards.smallCards.vitals')} + + + + )} + + ))} + +); const styles = StyleSheet.create({ cardSmallStyle: { @@ -108,7 +106,7 @@ const styles = StyleSheet.create({ marginRight: 'auto', }, cardContainer: { - alignItems: "center", + alignItems: 'center', marginHorizontal: 14, marginVertical: 14, }, @@ -117,21 +115,10 @@ const styles = StyleSheet.create({ }, text: { flexShrink: 1, - textAlign: "center", + textAlign: 'center', color: theme.colors.primary, - fontWeight: "bold", + fontWeight: 'bold', marginVertical: 7, - }, - topButton: { - marginTop: 10, - marginBottom: 0, - padding: 0, - flexWrap: "wrap" - }, - bottomButton: { - marginTop: 0, - marginBottom: 0, - padding: 0 } }); diff --git a/components/FormikFields/PaperInputPicker/AutoFill/index.js b/components/FormikFields/PaperInputPicker/AutoFill/index.js index 2b6bed41f..542536fc8 100644 --- a/components/FormikFields/PaperInputPicker/AutoFill/index.js +++ b/components/FormikFields/PaperInputPicker/AutoFill/index.js @@ -97,8 +97,8 @@ export default class AutoFill extends Component { {fields.length > 0 ? ( {query} ) : ( - {placeholder} - )} + {placeholder} + )} ); diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js index 91ec61314..5084cb162 100644 --- a/components/FormikFields/PaperInputPicker/index.js +++ b/components/FormikFields/PaperInputPicker/index.js @@ -6,18 +6,16 @@ import { TextInput, Button, Headline } from 'react-native-paper'; -import AutoFill from './AutoFill'; -import HouseholdManager from './HouseholdManager'; - import getLocation from '../../../modules/geolocation'; +import I18n from '../../../modules/i18n'; +import { theme, layout } from '../../../modules/theme'; + import PaperButton from '../../Button'; +import AutoFill from './AutoFill'; +import HouseholdManager from './HouseholdManager'; -import { theme, layout } from '../../../modules/theme'; import { stylesDefault, stylesPaper, styleX } from './index.style'; -import I18n from '../../../modules/i18n'; -import styles from '../../ResidentIdSearchbar/index.styles'; - const PaperInputPicker = ({ data, formikProps, scrollViewScroll, setScrollViewScroll, surveyingOrganization, customForm, ...rest @@ -55,11 +53,10 @@ const PaperInputPicker = ({ <> {fieldType === 'input' && ( - {translatedLabel.length > 40 && - {translatedLabel} - } + {translatedLabel.length > 40 + && {translatedLabel}} 40 ? "" : translatedLabel} + label={translatedLabel.length > 40 ? '' : translatedLabel} onChangeText={handleChange(formikKey)} onBlur={handleBlur(formikKey)} {...rest} //eslint-disable-line @@ -74,11 +71,17 @@ const PaperInputPicker = ({ )} {fieldType === 'numberInput' && ( - {translatedLabel.length > 40 && - {translatedLabel} - } + {translatedLabel.length > 40 + && ( + + {translatedLabel} + + )} 40 ? "" : translatedLabel} + label={translatedLabel.length > 40 ? '' : translatedLabel} onChangeText={handleChange(formikKey)} onBlur={handleBlur(formikKey)} {...rest} //eslint-disable-line @@ -299,7 +302,7 @@ const PaperInputPicker = ({ {errors[result.textKey]} - )} + )} ))} @@ -372,7 +375,7 @@ const PaperInputPicker = ({ )} {fieldType === 'multiInputRow' && ( - + {translatedLabel} {data.options.map((result) => (result.textSplit ? ( @@ -380,20 +383,20 @@ const PaperInputPicker = ({ {result.label} ) : ( - - + - - {errors[customForm ? result.label : I18n.t(result.label)]} - - - )))} + mode="outlined" + theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }} + /> + + {errors[customForm ? result.label : I18n.t(result.label)]} + + + )))} )} @@ -407,22 +410,22 @@ const PaperInputPicker = ({ {result.label} ) : ( - - + - - {errors[result.value]} - - - )))} + mode="outlined" + keyboardType="numeric" + maxLength={result.maxLength ? result.maxLength : null} + theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }} + /> + + {errors[result.value]} + + + )))} ) @@ -431,7 +434,4 @@ const PaperInputPicker = ({ ); }; - - - export default PaperInputPicker; diff --git a/components/FormikFields/PaperInputPicker/index.style.js b/components/FormikFields/PaperInputPicker/index.style.js index 50d8b0489..7f813f45c 100644 --- a/components/FormikFields/PaperInputPicker/index.style.js +++ b/components/FormikFields/PaperInputPicker/index.style.js @@ -4,7 +4,6 @@ import { import { theme } from '../../../modules/theme'; - const stylesDefault = StyleSheet.create({ horizontalLine: { borderBottomColor: '#D0D0D0', @@ -30,7 +29,7 @@ const stylesDefault = StyleSheet.create({ marginTop: 10 }, label: { - fontWeight: "bold", + fontWeight: 'bold', color: theme.colors.black, backgroundColor: theme.colors.background } diff --git a/domains/DataCollection/FormGallery/index.js b/domains/DataCollection/FormGallery/index.js index e94ea9ec5..8449712bf 100644 --- a/domains/DataCollection/FormGallery/index.js +++ b/domains/DataCollection/FormGallery/index.js @@ -6,11 +6,12 @@ import { Text, Button, Title, Paragraph, Card } from 'react-native-paper'; -import { layout } from '../../../modules/theme'; +import { theme, layout } from '../../../modules/theme'; +import I18n from '../../../modules/i18n'; -import ComingSoonSVG from '../../../assets/graphics/static/Adventurer.svg'; import SmallCardsCarousel from '../../../components/Cards/SmallCardsCarousel'; -import I18n from '../../../modules/i18n'; + +import ComingSoonSVG from '../../../assets/graphics/static/Adventurer.svg'; const FormGallery = (props) => { const { @@ -37,16 +38,12 @@ const FormGallery = (props) => { navigateToCustomForm(form); }} > - - {form.name.length > 16 && ( - - )} - {form.name.length > 10 && form.name.length <= 16 && ( - - )} - {form.name.length <= 10 && ( - - )} + + + + {form.name} + + ))} @@ -87,14 +84,20 @@ const FormGallery = (props) => { }; const styles = StyleSheet.create({ - buttonTextSmall: { - fontSize: 7 + cardContainer: { + alignItems: 'center', + justifyContent: 'center', + margin: 20 }, - buttonTextMed: { - fontSize: 10 + textContainer: { + flexDirection: 'row', }, - buttonTextBig: { - fontSize: 16 + text: { + flexShrink: 1, + textAlign: 'center', + color: theme.colors.primary, + fontWeight: 'bold', + marginVertical: 7, }, header: { fontSize: 20,