Add dialpad to transfer dialog + various dialpad UI improvements

[anoadragon453]

This PR simply merges the feature branch feature/transfer_dialpad_improvements to develop. This branch is the combination of PRs #6217, #6301, #6325 and #6338, which have already been independently reviewed.

See each linked PR for the details, but the high-level summary is that the call transfer dialog now has a built in dial pad for transferring a call to a number you can dial:

as well as various improvements to the dial pad itself such as better sizing, letters under the buttons and a better-placed backspace button:

Design by @gaelledel, implementation by @dbkr and myself.

Signed-off-by: Andrew Morgan <andrewm@element.io>

[germain-gg]

Mainly looks good to me! Thank you for working on that

Before merging that in develop could you extract all the hardcoded colour into _dark.scss, _legacy-dark.scss, _light.scss and _legacy-dark.scss

[jryans]

@anoadragon453 Did a design review already happen? I did not notice a green check from @gaelledel on the other PRs...

[anoadragon453]

@jryans yes, it was reviewed at the end of the work in #6338.

[anoadragon453]

Thanks for the review @gsouquet. It turns out all of those colours were already variables 😅. I noticed a few more instances of #6F7882 being hardcoded in _legacy-dark.scss as well, though the colour is only officially named in _dark.scss:

matrix-react-sdk/res/themes/dark/css/_dark.scss

Line 12 in 9ce041a

$quaternary-fg-color: #6F7882;

matrix-react-sdk/res/themes/legacy-dark/css/_legacy-dark.scss

Lines 214 to 216 in 9ce041a

	$voice-record-stop-border-color: #6F7882;
	$voice-record-waveform-incomplete-fg-color: #6F7882;
	$voice-record-icon-color: #6F7882;

1. Would we use variables from _dark.scss in legacy-dark.scss and if so,
2. Do you want to fix that up? Either in this PR or a separate one?

[germain-gg]

As far as I understand _dark.scss and _legacy-dark.scss are two separate things and the latter is used independently in some hardened Element themes.
If you can fix it as part of this PR that is great, but I do not want to needlessly block you from getting that PR across

[t3chguy]

the latter is used independently in some hardened Element themes.

Actually is the base for all custom themes, not at all exclusive to Hardened Element https://github.com/vector-im/element-web/blob/develop/docs/theming.md#custom-themes https://github.com/aaronraimist/element-themes

And is used as-is on some legacy customer deployments

[anoadragon453]

@gsouquet I think we should move this fix to another PR as we have a customer waiting on this PR landing.

But thanks for the information both!