Additional role and timezone fields on user profile: Discovery

Problem to solve

Via https://gitlab.com/gitlab-org/gitlab-ce/issues/50157 we are implementing extended user-focused tooltips. While working on the design of this, we found that two additional user-related information would be very helpful to have.

• Role/job title
• User timezone

Proposal

Looking at this from a wider perspective, both information make sense to be added to a user's profile and also be shown on the user-centric tooltip.

• Let's add a Role/job title field on the user profile settings if an or is set in the related "Organization" form.
• Let's add a timezone information derived from the user's location
  • MVC: If this is too much overhead to achieve via an existing lib, let's add an additional field that allows the user to pick their timezone.

Solution

Let's redistribute the information in the header a bit:

1st line: Full name
2nd line: username, joined info
3rd line: location and job title at organization info
4th line: social + website

Here's what it looks like on desktop:

With bio	Without bio

The margins between the 2nd and 3rd line (as defined above) should be 8px, the margin between the 1st and the 2nd, 3rd and 4th should be 16px.

There won't be enough space to fit the location and job title + org into a single line so it's best we put each in their own lines:

We also need to add a 'Job title' input field to the profile settings page.