From 384db1faaf7d50d9881b27873947fda5b23ff83b Mon Sep 17 00:00:00 2001
From: Zack <zazi21@student.bth.se>
Date: Tue, 26 May 2026 09:13:15 +0200
Subject: [PATCH] Move E2ePadlock icon colors to CSS module (#33577)

* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots
---
 .../E2eMessageSharedIcon-test.tsx.snap             |  6 ++----
 .../EventTileView/E2ePadlock/E2ePadlock.module.css |  9 +++++++++
 .../EventTileView/E2ePadlock/E2ePadlock.tsx        | 14 ++++++++++----
 .../__snapshots__/E2ePadlock.test.tsx.snap         |  9 +++------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
index b60dfac195..06a36a821b 100644
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
@@ -5,13 +5,12 @@ exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = `
   <div
     aria-label="State of the end-to-end encryption"
     aria-labelledby="react-use-id-1"
-    class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
+    class="_e2ePadlock_1hynz_8 _normal_1hynz_21 mx_EventTile_e2eIcon"
     data-testid="e2e-padlock"
     role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -36,13 +35,12 @@ exports[`E2eMessageSharedIcon renders correctly for an unknown user 1`] = `
   <div
     aria-label="State of the end-to-end encryption"
     aria-labelledby="react-use-id-1"
-    class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
+    class="_e2ePadlock_1hynz_8 _normal_1hynz_21 mx_EventTile_e2eIcon"
     data-testid="e2e-padlock"
     role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css
index acd72ad044..4a5b1821d0 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css
@@ -17,3 +17,12 @@
         display: block;
     }
 }
+
+.normal,
+.decryptionFailure {
+    color: var(--cpd-color-icon-tertiary);
+}
+
+.warning {
+    color: var(--cpd-color-icon-critical-primary);
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx
index e16901c56c..d176901aaf 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx
@@ -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")}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
index 2f0ed6141a..6b7ca2ebe7 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
@@ -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"