[Bug] [UI] The Survey List screen doesn't match with design

[minhnimble]

Why

The application needs to show the survey list screen after loading all the data with a valid logged in session like design. Currently there are a few problems with the survey list screen:

• There is no page indicator spotted.
• The next button in the bottom right corner is not shown correctly in circle shape and it is compressed vertically on small screen devices (iPhone 5/SE, etc.).
• The survey image background got stretched out.
• In brighter background images, we would not be able to see the text clearly as texts are in white. What do you think about adding some dark overlay over the image in order to make text more legible?
• The bottom spacing for the survey's description and text is way too much comparing to the design.
• The status bar color is shown in black instead of white like design.

Acceptance Criteria

• The survey list screen needs to look like the following design:

Actual:

[Shayokh144]

New commit given : https://github.com/Shayokh144/SurveyApp/commit/cfb88840ff5f557d34b7752dcb8fb2c58f8c7fc3 Fixed problem List:

• page indicator is shown
• next button rounded corner issue is fixed
• the survey image which seems got stretched is actually not stretched. Here is the original image: https://dhdbhh0jsld0o.cloudfront.net/m/6ea42840403875928db3_l
• dark overlay added
• bottom space reduced
• status bar color fixed

[minhnimble]

Thank you for your quick responses! I noticed most of the issues listed are fixed, nice work 👍. At the same time, regarding one of your reply, I would like to comment as follow:

page indicator is shown

→ Unfortunately, right now the left position of the page indicator is too close to the leading side of the screen unlike design. On top of that, tapping on a specific page index of the page control will only update the current indicator highlight, not the corresponding survey displaying content. Please help investigate and fix those issues as well 🙏

[minhnimble]

After checking your latest code changes from the merge, there are still a small issue that I would like to know more on your opinion:

• The current page indicator is unable to update immediately when user performs fast scrolling. Is there any better way you can think of to handle this so that we can make sure the page indicator correctly reflects the current showing page in a timely manner?

https://user-images.githubusercontent.com/70877098/160049118-05c66ad6-f5df-4278-a0c6-da2f59b5553c.mp4

[Shayokh144]

I have added code in willDisplayCell delegate of collectionVew to improve this issue .