Move E2ePadlock icon colors to CSS module (#33577)

* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots
This commit is contained in:
Zack
2026-05-26 09:13:15 +02:00
committed by GitHub
parent 5486a22922
commit 384db1faaf
4 changed files with 24 additions and 14 deletions
@@ -17,3 +17,12 @@
display: block;
}
}
.normal,
.decryptionFailure {
color: var(--cpd-color-icon-tertiary);
}
.warning {
color: var(--cpd-color-icon-critical-primary);
}
@@ -43,9 +43,15 @@ export interface E2ePadlockProps {
}
const icons: Record<E2ePadlockIcon, JSX.Element> = {
[E2ePadlockIcon.Normal]: <InfoIcon color="var(--cpd-color-icon-tertiary)" />,
[E2ePadlockIcon.Warning]: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
[E2ePadlockIcon.DecryptionFailure]: <ErrorSolidIcon color="var(--cpd-color-icon-tertiary)" />,
[E2ePadlockIcon.Normal]: <InfoIcon />,
[E2ePadlockIcon.Warning]: <ErrorSolidIcon />,
[E2ePadlockIcon.DecryptionFailure]: <ErrorSolidIcon />,
};
const iconClasses: Record<E2ePadlockIcon, string> = {
[E2ePadlockIcon.Normal]: styles.normal,
[E2ePadlockIcon.Warning]: styles.warning,
[E2ePadlockIcon.DecryptionFailure]: styles.decryptionFailure,
};
/**
@@ -62,7 +68,7 @@ export function E2ePadlock({ icon, title, className }: Readonly<E2ePadlockProps>
<Tooltip label={title} isTriggerInteractive={true}>
<div
data-testid="e2e-padlock"
className={classNames(styles.e2ePadlock, className)}
className={classNames(styles.e2ePadlock, iconClasses[icon], className)}
role="img"
tabIndex={0}
aria-label={_t("timeline|e2e_state")}
@@ -5,13 +5,12 @@ exports[`E2ePadlock > renders a 'DecryptionFailure' icon 1`] = `
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
class="E2ePadlock-module_e2ePadlock E2ePadlock-module_decryptionFailure"
data-testid="e2e-padlock"
role="img"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -31,13 +30,12 @@ exports[`E2ePadlock > renders a 'Normal' icon 1`] = `
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
class="E2ePadlock-module_e2ePadlock E2ePadlock-module_normal"
data-testid="e2e-padlock"
role="img"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -62,13 +60,12 @@ exports[`E2ePadlock > renders a 'Warning' icon 1`] = `
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
class="E2ePadlock-module_e2ePadlock E2ePadlock-module_warning"
data-testid="e2e-padlock"
role="img"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-critical-primary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"