From 7f6b73704748e806c9ed79c9f3d3c18dc8057c50 Mon Sep 17 00:00:00 2001 From: Katie Rischpater <98350084+the-bay-kay@users.noreply.github.com> Date: Thu, 28 Sep 2023 14:23:20 -0700 Subject: [PATCH 1/4] Recentered & Resized "inferred trip" checkmark See [Issue #979](https://github.com/e-mission/e-mission-docs/issues/979#issuecomment-1736386591) for more details. Only slight difference in comment; removed the `-0.2rem` in this commit, the buttons look crowded otherwise. --- www/js/survey/multilabel/MultiLabelButtonGroup.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx index cb14c61ea..268d16eb7 100644 --- a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx +++ b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx @@ -100,10 +100,10 @@ const MultilabelButtonGroup = ({ trip, buttonsInline=false }) => { ) })} </View> - <View> - <IconButton icon='check-bold' mode='outlined' size={16} onPress={verifyTrip} + <View style={{marginTop:'1rem'}}> + <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip} disabled={trip.verifiability != 'can-verify'} - style={{width: 20, height: 20, margin: 3}}/> + style={{width: 24, height: 24, margin: 3}}/> </View> </View> <Modal visible={modalVisibleFor != null} transparent={true} onDismiss={() => dismiss()}> From d3f8970ef8e6f27d1e56b7b94d7ae02e3b8ebbd1 Mon Sep 17 00:00:00 2001 From: Katie Rischpater <98350084+the-bay-kay@users.noreply.github.com> Date: Mon, 2 Oct 2023 10:40:04 -0700 Subject: [PATCH 2/4] Checkmark dynamically appears, color matches Updated the button to only appear if you can verify the trip. Button color now matches the "inferred trip" data. --- www/js/survey/multilabel/MultiLabelButtonGroup.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx index 268d16eb7..33842f48c 100644 --- a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx +++ b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx @@ -100,11 +100,12 @@ const MultilabelButtonGroup = ({ trip, buttonsInline=false }) => { ) })} </View> - <View style={{marginTop:'1rem'}}> - <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip} - disabled={trip.verifiability != 'can-verify'} - style={{width: 24, height: 24, margin: 3}}/> - </View> + {trip.verifiability === 'can-verify' && ( + <View style={{marginTop:'1rem'}}> + <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip} + style={{width: 24, height: 24, margin: 3, backgroundColor: colors.secondaryContainer}}/> + </View> + )} </View> <Modal visible={modalVisibleFor != null} transparent={true} onDismiss={() => dismiss()}> <Dialog visible={modalVisibleFor != null} onDismiss={() => dismiss()}> From 6262d2e6d80a2bff87132649dd4882215f8b3299 Mon Sep 17 00:00:00 2001 From: Katie Rischpater <98350084+the-bay-kay@users.noreply.github.com> Date: Tue, 3 Oct 2023 08:17:57 -0700 Subject: [PATCH 3/4] Update www/js/survey/multilabel/MultiLabelButtonGroup.tsx See conversation in PR `rem` doesn't work properly in react-native, updated Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com> --- www/js/survey/multilabel/MultiLabelButtonGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx index 33842f48c..ecfcf7ea6 100644 --- a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx +++ b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx @@ -101,7 +101,7 @@ const MultilabelButtonGroup = ({ trip, buttonsInline=false }) => { })} </View> {trip.verifiability === 'can-verify' && ( - <View style={{marginTop:'1rem'}}> + <View style={{marginTop: 16}}> <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip} style={{width: 24, height: 24, margin: 3, backgroundColor: colors.secondaryContainer}}/> </View> From 9c36f7dfb894122810165443f97c1c4d27d306a1 Mon Sep 17 00:00:00 2001 From: Katie Rischpater <98350084+the-bay-kay@users.noreply.github.com> Date: Tue, 3 Oct 2023 08:19:43 -0700 Subject: [PATCH 4/4] Update www/js/survey/multilabel/MultiLabelButtonGroup.tsx iconButtonProp & Border Color Changed prop to use native property, adjusted border color. Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com> --- www/js/survey/multilabel/MultiLabelButtonGroup.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx index ecfcf7ea6..0ce031bee 100644 --- a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx +++ b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx @@ -103,7 +103,8 @@ const MultilabelButtonGroup = ({ trip, buttonsInline=false }) => { {trip.verifiability === 'can-verify' && ( <View style={{marginTop: 16}}> <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip} - style={{width: 24, height: 24, margin: 3, backgroundColor: colors.secondaryContainer}}/> + containerColor={colors.secondaryContainer} + style={{width: 24, height: 24, margin: 3, borderColor: colors.secondary}} /> </View> )} </View>