[BUG] Several problems with the Volunteers feature

[John-Shortland-PikiTech]

Describe the bug

• Unexpected behaviour in 'Registering a Volunteer' Workflow
  • From the Website, after registering a new Volunteer with the 'Volunteer Coordinator' role selected; in the PWA the role appears as 'Undefined' in the list & the 'Volunteer Coordinator' role is NOT selected when the Volunteer screen is opened for the new Volunteer
• Website
  • Volunteer Registration screen
    • Typo: Under Roles, 'Cooridinater' should be 'Coordinator'
    • Placeholders should be Title Case. E.g. 'First name' should be 'First Name', etc
    • Spacing above 'Volunteer Registration' should be increased. E.g. Add 'my-5' CSS name to Container
• PWA
  • Volunteers List screen
    • 'Undefined' Role should be 'Volunteer Coordinator'
    • First Name column should be left-aligned
    • Last Name should be a column
  • (Add New) Volunteer screen
    • Typo: Under Roles, 'Cooridantor' should be 'Coordinator'
    • Placeholders should be Title Case. E.g. 'First name' should be 'First Name', etc

To Reproduce
Steps to reproduce the behavior:

1. Go to Volunteer Registration in Website
2. Register a new Volunteer with the 'Volunteer Coordinator' selected
3. Log into PWA
4. Open Volunteers list
   Note: 'Undefined' Role as appears in the row for the new Volunteer
5. Click on the row for the new Volunteer
   Note: 'Volunteer Coordinator' is not selected

Expected behavior
From the Website, after registering a new Volunteer with the 'Volunteer Coordinator' role selected; in the PWA the role appears as 'Volunteer Coordinator' in the list & the 'Volunteer Coordinator' role is selected when the Volunteer screen is opened for the new Volunteer

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS 10.15.4
• Browser: Chrome
• Version 81.0.4044.138

Smartphone (please complete the following information):
N/A

Additional context
N/A