Fix style inconsistencies of "Verify this device" dialog

[luixxiul]

Closes https://github.com/vector-im/element-web/issues/21572

This PR addresses style inconsistencies of the security key dialog and modal window, including

• Window's padding value (based on authentication modal window; see Image 1)
• Border-radius (see Image 1)
• Text color (based on Secure Key dialog; see Image 2)
• The warning sign of the footer message (see Image 2)
• Size of the close button (see image 2)

Signed-off-by: Suguru Hirahara [email protected]

Before

Current design

Image 1

Image 2

After

Perhaps the big red icon on the header should be replaced with something else.

type: defect

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Fix style inconsistencies of "Verify this device" dialog (#8167). Fixes vector-im/element-web#21572. Contributed by @luixxiul.

Preview: https://pr8167--matrix-react-sdk.netlify.app ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov[bot]]

Codecov Report

Merging #8167 (385b441) into develop (61076c3) will not change coverage. The diff coverage is 0.00%.

@@           Coverage Diff            @@
##           develop    #8167   +/-   ##
========================================
  Coverage    29.25%   29.25%           
========================================
  Files          863      863           
  Lines        49876    49876           
  Branches     12696    12696           
========================================
  Hits         14592    14592           
  Misses       35284    35284           

Impacted Files	Coverage Δ
...rc/components/structures/auth/CompleteSecurity.tsx	0.00% <ø> (ø)
...components/structures/auth/SetupEncryptionBody.tsx	0.00% <0.00%> (ø)

[SimonBrandner]

@luixxiul, could you please use Fixes <issue link>, so that the PR shows up in the issue sidebar as a PR that might fix the issue?

[luixxiul]

No problem. Considering how much change this PR should include, I've replaced "fixes" with "addresses".

[luixxiul]

There is another dialog whose styles are also inconsistent due to the fact it uses BaseDialog.

Here the color of the warning icon is black.

[luixxiul]

Since it looks like it needs complicated changes of SetupEncryptionDialog.tsx more than changing some values of scss, I would like to leave it as it is for now.

[luixxiul]

Closing as stale.