From 8f13f3882f7b68396f291daf55c158a8fac6dda7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 17 Nov 2021 10:36:10 +0100
Subject: [PATCH] Cleanup `E2ePadlock` code (#7144)

---
 res/css/views/rooms/_EventTile.scss      |  2 --
 src/components/views/rooms/EventTile.tsx | 25 ++++++++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ed819be4f4..be23146096 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -424,8 +424,6 @@ $left-gutter: 64px;
     }
 
     &::before {
-        background-color: #ffffff;
-        mask-image: url('$(res)/img/e2e/normal.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 80%;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 20d9cdf75c..0745a6b191 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1509,25 +1509,25 @@ export function haveTileForEvent(e: MatrixEvent, showHiddenEvents?: boolean) {
 
 function E2ePadlockUndecryptable(props) {
     return (
-        <E2ePadlock title={_t("This message cannot be decrypted")} icon="warning" {...props} />
+        <E2ePadlock title={_t("This message cannot be decrypted")} icon={E2ePadlockIcon.Warning} {...props} />
     );
 }
 
 function E2ePadlockUnverified(props) {
     return (
-        <E2ePadlock title={_t("Encrypted by an unverified session")} icon="warning" {...props} />
+        <E2ePadlock title={_t("Encrypted by an unverified session")} icon={E2ePadlockIcon.Warning} {...props} />
     );
 }
 
 function E2ePadlockUnencrypted(props) {
     return (
-        <E2ePadlock title={_t("Unencrypted")} icon="warning" {...props} />
+        <E2ePadlock title={_t("Unencrypted")} icon={E2ePadlockIcon.Warning} {...props} />
     );
 }
 
 function E2ePadlockUnknown(props) {
     return (
-        <E2ePadlock title={_t("Encrypted by a deleted session")} icon="normal" {...props} />
+        <E2ePadlock title={_t("Encrypted by a deleted session")} icon={E2ePadlockIcon.Normal} {...props} />
     );
 }
 
@@ -1535,14 +1535,19 @@ function E2ePadlockUnauthenticated(props) {
     return (
         <E2ePadlock
             title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")}
-            icon="unauthenticated"
+            icon={E2ePadlockIcon.Normal}
             {...props}
         />
     );
 }
 
+enum E2ePadlockIcon {
+    Normal = "normal",
+    Warning = "warning",
+}
+
 interface IE2ePadlockProps {
-    icon: string;
+    icon: E2ePadlockIcon;
     title: string;
 }
 
@@ -1551,7 +1556,7 @@ interface IE2ePadlockState {
 }
 
 class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
-    constructor(props) {
+    constructor(props: IE2ePadlockProps) {
         super(props);
 
         this.state = {
@@ -1559,15 +1564,15 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
         };
     }
 
-    onHoverStart = () => {
+    private onHoverStart = (): void => {
         this.setState({ hover: true });
     };
 
-    onHoverEnd = () => {
+    private onHoverEnd = (): void => {
         this.setState({ hover: false });
     };
 
-    render() {
+    public render(): JSX.Element {
         let tooltip = null;
         if (this.state.hover) {
             tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;