UI/UX changes for showcase

[mahalakshme]

Issues:
https://drive.google.com/file/d/1Qu-jvYeHgBpsaqOGesa_4Jxb87k_oUT8/view?usp=sharing - Video that has issues pointed out

• Program enrolment audit details need to display in the Enrolment details section not in the Summary section
• Need to change the format(Enrolled on 12 Nov 2023 by Suresh) of audit as in the mockups. Same for registeration details in Profile tab as well.
• On clicking edit of Enrolment details, top bar that has the name is white in color and hence not visible - change the name to black
• Summary table of Enrolment looks separate, it also needs to have grey background like we have for encounter table so that it looks as one unit
• When the beneficiary has not enrolled in any program we show some gray bg unnecessarily
• There is some grey footer unnecessarily
• Relative box seems to be too bigger, move the DELETE button somewhat closer to other details
• When clicking on Menu -> dashboard, the filter icon should not be in the top right since the filters are not applicable for all dashboards, Hence it needs to display below the horizontal list of dashboards we display and above the selected filters.
• The selected filters are displayed with grey bg in the mockup. Currently we have blue bg, so the same can be done if it looks good.
• Currently there are different kinds of buttons which is somewhat looking wierd. So make all primary buttons like Do(on scheduled visits) similar to the one in mockups(green button with white text). Same for Edit, Enrol buttons as well
• Also on click of button we are showing grey border which also looks wierd. So, just replace it with ripple effect.

[petmongrels]

Please verify colors in the app during code review review and QA.
For ripple the buttons are too small and transition too fast to see the ripple, but it looks better than displaying the border only like it was earlier.

[himeshr]

Have reviewed the code changes on github, looks good.

[mahalakshme]

It looks good. But found some minor improvements that can be made:
https://github.com/avniproject/avni-client/assets/10369963/28aa8414-ad7d-430c-9854-e44a0f49820e

• 'Enrolment details' and 'Visits planned' sections are not separated
• Secondary buttons like Exit, cancel we were displaying in red text before - it is good to do that or like it was in mockup(with dark grey) to distinguish it from primary buttons
• Since we have moved to flat design, it might be good to remove shadow for buttons as well like in the mockup
• Ripples are not visible for other buttons other than 'Enrol in ${program}'
• For design consistency good to keep the headers outside - hence can move the 'Summary' heading outside of the gray bg - thats how it was there before this card
• If possible we can do this: In the mockups for all buttons they have made the bg light, and text darker. Currently for the buttons not touched like 'New Program Visit', 'Scheduled' we are having darker bg and white color text. Since the overall theme in the mockups is based on using a lighter theme and colors for the app, we can do this if possible.

[mahalakshme]

@petmongrels I dont see any recent commit to check

[petmongrels]

comments

• point 2, I have made the change but I am not able to make out whether the color is showing correctly or not visibly
• Have changed them to use TouchableNativeFeedback. I can verify on old style buttons, but in new style I cannot make out due to the colors used
• last one will have impact outside SubjectDashboard, so I have left it as it is

[mahalakshme]

@petmongrels

• I see the primary and secondary buttons have the same color
• I checked for ripple in 'Add relative' button since it is bigger(similar size as 'Enrol in') and outside of gray bg - but it was not visible.
• this is not needed for showcase: summary card is not of card structure

[AchalaBelokar]

• Program enrolment audit details need to display in the Enrolment details section not in the Summary section
• Secondary buttons like Exit, cancel we were displaying in red text before - it is good to do that or like it was in mockup(with dark grey) to distinguish it from primary buttons
• Since we have moved to flat design, it might be good to remove shadow for buttons as well like in the mockup
• Ripples are not visible for other buttons other than 'Enrol in ${program}'
• There is some grey footer unnecessarily
• When clicking on Menu -> dashboard, the filter icon should not be in the top right since the filters are not applicable for all dashboards, Hence it needs to display below the horizontal list of dashboards we display and above the selected filte
• all senaro are tested in the card