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:
+9
@@ -17,3 +17,12 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.normal,
|
||||
.decryptionFailure {
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
+10
-4
@@ -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")}
|
||||
|
||||
+3
-6
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user