Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Factor out duplicated CSS for buttons in encryption settings #29269

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Factor out duplicated CSS for buttons in encryption settings #29269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d4d154
Factor out duplicated CSS for buttons in encryption settings
dbkr Feb 14, 2025
35f0417
Update snapshot
dbkr Feb 14, 2025
75bf106
Update snapshot
dbkr Feb 14, 2025
6fd476d
More snapshots
dbkr Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions res/css/views/settings/encryption/_ChangeRecoveryKey.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,4 @@
flex-direction: column;
gap: var(--cpd-space-8x);
}

.mx_ChangeRecoveryKey_footer {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
justify-content: center;
}
}
7 changes: 7 additions & 0 deletions res/css/views/settings/encryption/_EncryptionCard.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,10 @@
}
}
}

.mx_EncryptionCard_buttons {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
justify-content: center;
}
7 changes: 0 additions & 7 deletions res/css/views/settings/encryption/_ResetIdentityPanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,4 @@
text-align: center;
}
}

.mx_ResetIdentityPanel_footer {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
justify-content: center;
}
}
14 changes: 7 additions & 7 deletions src/components/views/settings/encryption/ChangeRecoveryKey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-soli
import { logger } from "matrix-js-sdk/src/logger";

import { _t } from "../../../../languageHandler";
import { EncryptionCard } from "./EncryptionCard";
import { EncryptionCard, EncryptionCardButtons } from "./EncryptionCard";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
import { copyPlaintext } from "../../../../utils/strings";
Expand Down Expand Up @@ -237,12 +237,12 @@ function InformationPanel({ onContinueClick, onCancelClick }: InformationPanelPr
<Text as="span" weight="medium" className="mx_InformationPanel_description">
{_t("settings|encryption|recovery|set_up_recovery_secondary_description")}
</Text>
<div className="mx_ChangeRecoveryKey_footer">
<EncryptionCardButtons>
<Button onClick={onContinueClick}>{_t("action|continue")}</Button>
<Button kind="tertiary" onClick={onCancelClick}>
{_t("action|cancel")}
</Button>
</div>
</EncryptionCardButtons>
</>
);
}
Expand Down Expand Up @@ -284,12 +284,12 @@ function KeyPanel({ recoveryKey, onConfirmClick, onCancelClick }: KeyPanelProps)
<CopyIcon />
</IconButton>
</div>
<div className="mx_ChangeRecoveryKey_footer">
<EncryptionCardButtons>
<Button onClick={onConfirmClick}>{_t("action|continue")}</Button>
<Button kind="tertiary" onClick={onCancelClick}>
{_t("action|cancel")}
</Button>
</div>
</EncryptionCardButtons>
</>
);
}
Expand Down Expand Up @@ -347,12 +347,12 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
<ErrorMessage>{_t("settings|encryption|recovery|enter_key_error")}</ErrorMessage>
)}
</Field>
<div className="mx_ChangeRecoveryKey_footer">
<EncryptionCardButtons>
<Button disabled={!isKeyValid}>{submitButtonLabel}</Button>
<Button kind="tertiary" onClick={onCancelClick}>
{_t("action|cancel")}
</Button>
</div>
</EncryptionCardButtons>
</Root>
);
}
4 changes: 4 additions & 0 deletions src/components/views/settings/encryption/EncryptionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,7 @@ export function EncryptionCard({
</div>
);
}

export function EncryptionCardButtons({ children }: PropsWithChildren): JSX.Element {
return <div className="mx_EncryptionCard_buttons">{children}</div>;
}
Comment on lines +62 to +64
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code style says one file per component (I don't make the rules!)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also, documentation please. What does this do, how should it be used?

6 changes: 3 additions & 3 deletions src/components/views/settings/encryption/ResetIdentityPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
import React, { type MouseEventHandler } from "react";

import { _t } from "../../../../languageHandler";
import { EncryptionCard } from "./EncryptionCard";
import { EncryptionCard, EncryptionCardButtons } from "./EncryptionCard";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import { uiAuthCallback } from "../../../../CreateCrossSigning";

Expand Down Expand Up @@ -74,7 +74,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
</VisualList>
{variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
</div>
<div className="mx_ResetIdentityPanel_footer">
<EncryptionCardButtons>
<Button
destructive={true}
onClick={async (evt) => {
Expand All @@ -89,7 +89,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
<Button kind="tertiary" onClick={onCancelClick}>
{_t("action|cancel")}
</Button>
</div>
</EncryptionCardButtons>
</EncryptionCard>
</>
);
Expand Down
10 changes: 5 additions & 5 deletions ...-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
</button>
</div>
<div
class="mx_ChangeRecoveryKey_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17"
Expand Down Expand Up @@ -266,7 +266,7 @@ exports[`<ChangeRecoveryKey /> flow to setup a recovery key should ask the user
/>
</div>
<div
class="mx_ChangeRecoveryKey_footer"
class="mx_EncryptionCard_buttons"
>
<button
aria-disabled="true"
Expand Down Expand Up @@ -421,7 +421,7 @@ exports[`<ChangeRecoveryKey /> flow to setup a recovery key should ask the user
</span>
</div>
<div
class="mx_ChangeRecoveryKey_footer"
class="mx_EncryptionCard_buttons"
>
<button
aria-disabled="true"
Expand Down Expand Up @@ -539,7 +539,7 @@ exports[`<ChangeRecoveryKey /> flow to setup a recovery key should display infor
After clicking continue, we’ll generate a recovery key for you.
</span>
<div
class="mx_ChangeRecoveryKey_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17"
Expand Down Expand Up @@ -699,7 +699,7 @@ exports[`<ChangeRecoveryKey /> flow to setup a recovery key should display the r
</button>
</div>
<div
class="mx_ChangeRecoveryKey_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17"
Expand Down
4 changes: 2 additions & 2 deletions ...tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</ul>
</div>
<div
class="mx_ResetIdentityPanel_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17 _destructive_i91xf_116"
Expand Down Expand Up @@ -338,7 +338,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</span>
</div>
<div
class="mx_ResetIdentityPanel_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17 _destructive_i91xf_116"
Expand Down
2 changes: 1 addition & 1 deletion ...components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</span>
</div>
<div
class="mx_ResetIdentityPanel_footer"
class="mx_EncryptionCard_buttons"
>
<button
class="_button_i91xf_17 _destructive_i91xf_116"
Expand Down
Loading