nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Move CSS for ResetIdentityPanel into EncryptionCard (#29311)

Browse Source 
* Move CSS for ResetIdentityPanel into EncryptionCard

This allows it to be re-used in other components. It's a *bit* magic
that EncryptionCard applies style to divs within it, although it
somewhat makes sense that it wants them styled a particular way.
The alternative would be to add another component for a div child of
encryption card like EncryptionCardButtons that just makes it flexbox
and centered: I'm not sure which is better.

* Update snapshot

* Update snapshot

* Do it the other way

Because we only want it in the destructive cards, not the other ones.

* Use flex component

* Also use gap prop and update snapshots

* Fix justification

* Snaspshots again

* Set align-items to normal

As center affected the list items too. Also add it to the flex
component because it didn't have it as an option.
This commit is contained in:
David Baker
2025-02-20 13:20:49 +00:00
committed by GitHub
parent e161f9fb18
commit e8954f08ce
8 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
View File

@@ -55,7 +55,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</ol>
</nav>
<div
class="mx_EncryptionCard mx_ResetIdentityPanel"
class="mx_EncryptionCard"
>
<div
class="mx_EncryptionCard_header"
@@ -83,7 +83,8 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</h2>
</div>
<div
class="mx_ResetIdentityPanel_content"
class="mx_Flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<ul
class="_visual-list_4dcf8_17"
@@ -235,7 +236,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</ol>
</nav>
<div
class="mx_EncryptionCard mx_ResetIdentityPanel"
class="mx_EncryptionCard"
>
<div
class="mx_EncryptionCard_header"
@@ -263,7 +264,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</h2>
</div>
<div
class="mx_ResetIdentityPanel_content"
class="mx_Flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<ul
class="_visual-list_4dcf8_17"

5
test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
View File

@@ -226,7 +226,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</ol>
</nav>
<div
class="mx_EncryptionCard mx_ResetIdentityPanel"
class="mx_EncryptionCard"
>
<div
class="mx_EncryptionCard_header"
@@ -254,7 +254,8 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</h2>
</div>
<div
class="mx_ResetIdentityPanel_content"
class="mx_Flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<ul
class="_visual-list_4dcf8_17"