Navigation with back and resume footer buttons

[Raidakarim]

Describe this pull request. Link to relevant GitHub issues, if any.

This PR includes issue #40 deliverables as detailed in the following:

• Back button implementation to move above plate position in bite acquisition, move to ready and move to mouth screens
• Back button removal in move above plate screen
• Resume button removal in bite acquisition screen
• A modified dictionary that is used to contain meal state and corresponding icon image pairings to populate the footer's resume button; the modification includes addition of stowing arm state and its newly created icon image
• Implementation of new side-by-side Locate Plate and Done Eating buttons in Bite Acquisition screen
• Implementation of continue without acquisition icon button and text in bite selection screen
  TODO: the responsiveness of icon buttons and footer buttons in different devices will be addressed as part of issue Make the App Fully Responsive #9

Explain how this pull request was tested, including but not limited to the below checkmarks.

I tested the implementations by running the app screens in my local Safari browser and ensuring:

• the back buttons appear as desired and goes to desired next action when clicked
• the modified (solo resume and back) footer buttons do desired actions when clicked
• the stowing arm icon in resume button and dictionary pairing appear and work as desired
• the modified bite selection screen with modified top two button locations and newly added continue without icon button work as desired

---

Before creating a pull request

• Format React code with npm run format
• Format Python code by running python3 -m black . in the top-level of this repository
• Thoroughly test your code's functionality, including unintended uses.
• Thoroughly test your code's responsiveness by rendering it on different devices, browsers, etc.
• Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop.

Before merging a pull request

• Squash all your commits into one (or Squash and Merge)

[Raidakarim]

Stowing arm resume icon:
I created a new icon for it by making the robot arm horizontally lying on the ground and adding “zzz” to indicate sleepiness. I experimented with different positions of the robot arm like vertical, and the robot arm in move above plate position. But, this position made the most sense.

Resizing icon canvas:
I resized canvas size in inkspace to fit image size. This looks better than before in “Inspect Element”.

Repositioning of solo back and resume buttons:
I edited the style properties of the icon button (marginLeft) and above text (textAlign) to position these in one corner instead of being in the center to match the style of other pages’ footer.

Replacing hard coded meal state icon image URL:
I used the dictionary values from the constants file to replace the hard coded icon images in the icon buttons of the main page, and footer back and resume buttons by accessing with the current meal state key of the dictionary.

BackIcon explanation:
I added explanatory text in the comment detailing why moveAbovePlate icon image is used in all backIcon instances in the app.

Simplifying nested if statements in Footer.jsx file:
I added a helper function that has all the if-else statements needed for different footer button conditions and it is called to return the HTML to render in the footer. I added comments for each conditions.

[amalnanavati]

Good work -- the code looks nice, and the app looks and functions in a clean way. Approved :)