[MS] User details modal

[Ironicbay]

Describe your changes

Closes #5974

Checklist

Before you submit this pull request, please make sure to:

• Keep changes in the pull request as small as possible
• Ensure the commit history is sanitized
• Give a meaningful title to your PR
• Describe your changes
• Link any related issue in the description
• Link any dependent pull request in the description

If this PR adds a new feature or fixes a bug:

• I have added or updated relevant tests

If this PR is related to GUI:

• I have checked that GUIs affected by my changes are working properly.

[NicoTuxx]

where is it coming from? copy/paste? is there a specific reflexion behind these values?

[Ironicbay]

These values are taken from the mockups, I was unsure if setting them explicitly was necessary or not (and now that you mention it, the height value is different in the revoked mockup so I'm guessing it's not)

[NicoTuxx]

Yes in lots of cases the modal will fits its content and it will be good enough.
@fabienSvtr a thought on this?

[fabienSvtr]

We need to open an issue to harmonise all modal width. For this PR you can let the specific value.
I recently updated the Figma with width variables for that.

[fabienSvtr]

Here the BEM suggestion.
In addition, it is preferable to group the code according to context so that each group/block can be managed (such as the user's name and title).

Suggested change

	<div>
	<ion-text class="text1">
	{{ $t('UsersPage.UserDetailsModal.subtitles.name') }}
	</ion-text>
	<ion-text class="text1-right">
	{{ $t('UsersPage.UserDetailsModal.subtitles.joined') }}
	</ion-text>
	</div>
	<div>
	<ion-text class="text2">
	{{ user.humanHandle.label }}
	</ion-text>
	<ion-text class="text2-right">
	{{ timeSince(user.createdOn, '--', 'short') }}
	</ion-text>
	</div>
	<div>
	<ion-text class="text4">
	{{ $t('UsersPage.UserDetailsModal.subtitles.commonWorkspaces') }}
	</ion-text>
	</div>
	<div class="detail-name">
	<ion-text class="details-name__title">
	{{ $t('UsersPage.UserDetailsModal.subtitles.name') }}
	</ion-text>
	<ion-text class="detail-name__fullname">
	{{ user.humanHandle.label }}
	</ion-text>
	</div>
	<div class="detail-joined">
	<ion-text class="detail-joined__title">
	{{ $t('UsersPage.UserDetailsModal.subtitles.joined') }}
	{{ user.humanHandle.label }}
	</ion-text>
	<ion-text class=class="detail-joined__date">
	{{ timeSince(user.createdOn, '--', 'short') }}
	</ion-text>
	</div>
	<div>
	<ion-text class="text4">
	{{ $t('UsersPage.UserDetailsModal.subtitles.commonWorkspaces') }}
	</ion-text>
	</div>