Move E2ePadlock icon colors to CSS module (#33577)

* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots

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"

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);
+}

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.Normal]: <InfoIcon />,
-    [E2ePadlockIcon.Warning]: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
+    [E2ePadlockIcon.Warning]: <ErrorSolidIcon />,
-    [E2ePadlockIcon.DecryptionFailure]: <ErrorSolidIcon color="var(--cpd-color-icon-tertiary)" />,
+    [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")}

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"