#1371 | Subject Dashboard UI updates - feedback comments

avniproject · Apr 29, 2024 · 055e3b7 · 055e3b7
1 parent 158701f
commit 055e3b7
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 33 deletions.
diff --git a/packages/openchs-android/src/views/common/IndividualProfile.js b/packages/openchs-android/src/views/common/IndividualProfile.js
@@ -129,9 +129,10 @@ class IndividualProfile extends AbstractComponent {
     renderProfileActionButton(iconMode, displayTextMessageKey, onPress) {
         return (<TouchableNativeFeedback onPress={onPress}>
             <View style={{
-                flexDirection: 'row', height: DGS.resizeHeight(30),
+                flexDirection: 'row',
                 paddingHorizontal: DGS.resizeWidth(6),
-                alignItems: 'center', justifyContent: 'flex-start', marginHorizontal: 4, backgroundColor: Styles.greyBackground
+                alignItems: 'center', justifyContent: 'flex-start', marginHorizontal: 4, backgroundColor: Styles.greyBackground,
+                borderRadius: 5, elevation: 2
             }}>
                 <AvniIcon name={iconMode} style={{
                     fontSize: DGS.resizeWidth(Styles.programProfileButtonText.fontSize),
@@ -188,7 +189,9 @@ class IndividualProfile extends AbstractComponent {
             paddingHorizontal: 10,
             marginEnd: 2,
             alignItems: 'center',
-            backgroundColor: Styles.greyBackground
+            backgroundColor: Styles.greyBackground,
+            borderRadius: 5,
+            elevation: 2
         }}>
             <Text style={{color: Styles.accentColor}}>{`${groupAction.label} ${this.I18n.t(label)}`}</Text>
         </TouchableOpacity>
@@ -243,18 +246,14 @@ class IndividualProfile extends AbstractComponent {
                 (
                     <>
                         <CustomActivityIndicator loading={this.state.displayProgressIndicator}/>
-                        <View style={{
-                            marginVertical: 10,
-                            marginHorizontal: 10,
-                            backgroundColor: Styles.greyBackground
-                        }}>
+                        <View>
                             <ActionSelector
                                 title={this.I18n.t("enrolInProgram")}
                                 hide={() => this.dispatchAction(Actions.HIDE_ACTION_SELECTOR)}
                                 visible={this.state.displayActionSelector}
                                 actions={this.state.programActions}
                             />
-                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
+                            <View style={{flexDirection: 'row', alignItems: 'center', paddingBottom: 10, backgroundColor: Styles.greyBackground}}>
                                 <View style={{
                                     paddingHorizontal: 20,
                                     justifyContent: 'center',

diff --git a/packages/openchs-android/src/views/common/PreviousEncounters.js b/packages/openchs-android/src/views/common/PreviousEncounters.js
@@ -272,9 +272,11 @@ const styles = StyleSheet.create({
     container: {
         padding: Distances.ScaledContentDistanceFromEdge,
         margin: 4,
-        elevation: 2,
         backgroundColor: Styles.greyBackground,
-        marginVertical: 3
+        marginVertical: 3,
+        borderWidth: 2,
+        borderColor: Styles.greyBackground,
+        borderRadius: 10
     },
     viewAllContainer: {
         right: Distances.ScaledContentDistanceFromEdge,

diff --git a/packages/openchs-android/src/views/common/Relatives.js b/packages/openchs-android/src/views/common/Relatives.js
@@ -110,7 +110,7 @@ class Relatives extends AbstractComponent {
         const dataSource = new ListView.DataSource({rowHasChanged: () => false}).cloneWithRows(relatives);
         return (
             relatives.length > 0 ?
-                (<View style={{flexDirection: "column", paddingBottom: 10}}>
+                (<View style={{flexDirection: "column", paddingBottom: 10, borderRadius: 10}}>
                     {this.renderTitle()}
                     <ListView enableEmptySections={true}
                               dataSource={dataSource}
@@ -125,7 +125,9 @@ class Relatives extends AbstractComponent {
                                               </View>
 
                                           </View>
+                                          <View style={{marginHorizontal: 10}}>
                                           <SubjectInfoCard individual={relative.relative} />
+                                          </View>
                                           {editDeleteFeatureToggle && this.renderRelativeActionButton(relative)}
                                       </View>
                                   </TouchableNativeFeedback>
@@ -143,11 +145,11 @@ export default Relatives;
 const styles = StyleSheet.create({
     container: {
         margin: 4,
-        elevation: 2,
         backgroundColor: Styles.greyBackground,
         marginVertical: 3,
-        paddingBottom: 5,
-        paddingTop: 5
+        paddingBottom: 10,
+        paddingTop: 5,
+        borderRadius: 10
     },
     relativeDetails: {
         flexDirection: 'row',
@@ -159,6 +161,9 @@ const styles = StyleSheet.create({
         flex: 1
     },
     buttonStyle: {
-        backgroundColor: Styles.greyBackground
+        backgroundColor: Styles.greyBackground,
+        borderRadius: 5,
+        elevation: 2,
+        marginHorizontal: 5
     }
 });
diff --git a/packages/openchs-android/src/views/individual/SubjectDashboardGeneralTab.js b/packages/openchs-android/src/views/individual/SubjectDashboardGeneralTab.js
@@ -109,7 +109,7 @@ class SubjectDashboardGeneralTab extends AbstractComponent {
 
     render() {
         return (
-            <View style={{backgroundColor: Colors.GreyContentBackground, marginTop: 10}}>
+            <View style={{backgroundColor: Colors.WhiteContentBackground, marginTop: 10}}>
                 <ActionSelector
                     title={this.I18n.t("followupTypes")}
                     hide={() => this.dispatchAction(Actions.HIDE_ENCOUNTER_SELECTOR)}

diff --git a/packages/openchs-android/src/views/individual/SubjectDashboardProfileTab.js b/packages/openchs-android/src/views/individual/SubjectDashboardProfileTab.js
@@ -345,16 +345,18 @@ class SubjectDashboardProfileTab extends AbstractComponent {
 
     renderSummary() {
         return <View>
-            <View>
+            <View style={{marginLeft: 10}}>
                 <Text style={Styles.cardTitle}>{this.I18n.t('subjectSummary')}</Text>
             </View>
 
             <View style={{
                 padding: Distances.ScaledContentDistanceFromEdge,
                 margin: 4,
-                elevation: 2,
                 backgroundColor: Styles.greyBackground,
-                marginVertical: 16
+                marginVertical: 16,
+                borderWidth: 2,
+                borderColor: Styles.greyBackground,
+                borderRadius: 10
             }}>
 
                 <Observations observations={_.defaultTo(this.state.subjectSummary, [])}
@@ -402,13 +404,9 @@ const styles = StyleSheet.create({
     container: {
         padding: Distances.ScaledContentDistanceFromEdge,
         margin: 4,
-        elevation: 2,
         backgroundColor: Styles.greyBackground,
         marginVertical: 3,
-        borderBottomLeftRadius: 5,
-        borderBottomRightRadius: 5,
-        borderTopLeftRadius: 5,
-        borderTopRightRadius: 5,
+        borderRadius: 10,
     },
     memberCard: {
         marginTop: 5,

diff --git a/packages/openchs-android/src/views/primitives/ContextActionButton.js b/packages/openchs-android/src/views/primitives/ContextActionButton.js
@@ -25,7 +25,9 @@ class ContextActionButton extends AbstractComponent {
                     fontSize: Fonts.Medium,
                     color: color,
                     paddingHorizontal: 5,
-                    backgroundColor: Styles.greyBackground
+                    backgroundColor: Styles.greyBackground,
+                    borderRadius: 5,
+                    elevation: 2
                 }}>{`${this.I18n.t(this.props.labelKey)}`}</Text></TouchableOpacity>
         );
     }

diff --git a/packages/openchs-android/src/views/program/SubjectDashboardProgramsTab.js b/packages/openchs-android/src/views/program/SubjectDashboardProgramsTab.js
@@ -195,9 +195,9 @@ class SubjectDashboardProgramsTab extends AbstractComponent {
             (<View style={{
                 padding: Distances.ScaledContentDistanceFromEdge,
                 margin: 4,
-                elevation: 2,
                 backgroundColor: Styles.greyBackground,
-                marginVertical: 16
+                marginVertical: 16,
+                borderRadius: 10
             }}>
                 <Text style={[Fonts.MediumBold]}>{this.getExitHeaderMessage(this.state.enrolment)}</Text>
                 <Observations form={this.getExitForm()}
@@ -214,9 +214,9 @@ class SubjectDashboardProgramsTab extends AbstractComponent {
         return <View style={{
             padding: Distances.ScaledContentDistanceFromEdge,
             margin: 4,
-            elevation: 2,
             backgroundColor: Styles.greyBackground,
-            marginVertical: 16
+            marginVertical: 16,
+            borderRadius: 10
         }}>
             <View>
                 <Text style={Styles.cardTitle}>{this.I18n.t('summary')}</Text>
@@ -235,9 +235,9 @@ class SubjectDashboardProgramsTab extends AbstractComponent {
         return (<View style={{
             padding: Distances.ScaledContentDistanceFromEdge,
             margin: 4,
-            elevation: 2,
             backgroundColor: Styles.greyBackground,
-            marginVertical: 16
+            marginVertical: 16,
+            borderRadius: 10
         }}>
             <TouchableOpacity onPress={() => this.dispatchAction(Actions.ON_ENROLMENT_TOGGLE)}>
                 <Text style={Styles.cardTitle}>{this.I18n.t('enrolmentDetails')}</Text>
@@ -283,7 +283,7 @@ class SubjectDashboardProgramsTab extends AbstractComponent {
                     marginHorizontal: 16,
                     backgroundColor: Colors.WhiteContentBackground
                 }}>
-                    <View style={{backgroundColor: Styles.greyBackground}}>
+                    <View style={{backgroundColor: Styles.greyBackground, borderRadius: 10}}>
                         {this.state.enrolment.individual.voided &&
                         <Text style={{
                             fontSize: Fonts.Large,