From 4cb7381d03830fa755bc8ae71dff2d3ed1708cb8 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 10 Sep 2020 13:48:28 -0600
Subject: [PATCH 1/2] Show verification status in the room summary card

Fixes https://github.com/vector-im/element-web/issues/15143

Colours are the same for both light and dark theme.
---
 .../views/right_panel/_RoomSummaryCard.scss    | 18 ++++++++++++++++--
 .../views/right_panel/RoomSummaryCard.tsx      | 12 +++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index 78324c5e89..0031d3a64c 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -67,12 +67,26 @@ limitations under the License.
                 }
             }
 
-            .mx_RoomSummaryCard_e2ee_secure {
-                background-color: #5abff2;
+            .mx_RoomSummaryCard_e2ee_normal {
+                background-color: #424446;
                 &::before {
                     mask-image: url('$(res)/img/e2e/normal.svg');
                 }
             }
+
+            .mx_RoomSummaryCard_e2ee_verified {
+                background-color: #0dbd8b;
+                &::before {
+                    mask-image: url('$(res)/img/e2e/verified.svg');
+                }
+            }
+
+            .mx_RoomSummaryCard_e2ee_warning {
+                background-color: #ff4b55;
+                &::before {
+                    mask-image: url('$(res)/img/e2e/warning.svg');
+                }
+            }
         }
     }
 
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 9f803d1185..dd4c281090 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -40,6 +40,7 @@ import TextWithTooltip from "../elements/TextWithTooltip";
 import BaseAvatar from "../avatars/BaseAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import { E2EStatus, shieldStatusForRoom } from "../../../utils/ShieldUtils";
 
 interface IProps {
     room: Room;
@@ -200,6 +201,13 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
 
     const isRoomEncrypted = useIsEncrypted(cli, room);
 
+    const [e2eStatus, setE2eStatus] = useState<E2EStatus>();
+    useEffect(() => {
+        if (isRoomEncrypted) {
+            shieldStatusForRoom(cli, room).then(e => setE2eStatus(e));
+        }
+    });
+
     const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
     const header = <React.Fragment>
         <div className="mx_RoomSummaryCard_avatar" role="presentation">
@@ -207,7 +215,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <TextWithTooltip
                 tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
                 class={classNames("mx_RoomSummaryCard_e2ee", {
-                    mx_RoomSummaryCard_e2ee_secure: isRoomEncrypted,
+                    mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
+                    mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
+                    mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
                 })}
             />
         </div>

From 8862b8298c1ebbbb30e92ace79f87d18985ed71b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 11 Sep 2020 09:04:06 -0600
Subject: [PATCH 2/2] Use hooks better

---
 src/components/views/right_panel/RoomSummaryCard.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index dd4c281090..f51f66a5ea 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -40,7 +40,8 @@ import TextWithTooltip from "../elements/TextWithTooltip";
 import BaseAvatar from "../avatars/BaseAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, {IApp} from "../../../stores/WidgetStore";
-import { E2EStatus, shieldStatusForRoom } from "../../../utils/ShieldUtils";
+import { E2EStatus } from "../../../utils/ShieldUtils";
+import RoomContext from "../../../contexts/RoomContext";
 
 interface IProps {
     room: Room;
@@ -200,13 +201,8 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
     };
 
     const isRoomEncrypted = useIsEncrypted(cli, room);
-
-    const [e2eStatus, setE2eStatus] = useState<E2EStatus>();
-    useEffect(() => {
-        if (isRoomEncrypted) {
-            shieldStatusForRoom(cli, room).then(e => setE2eStatus(e));
-        }
-    });
+    const roomContext = useContext(RoomContext);
+    const e2eStatus = roomContext.e2eStatus;
 
     const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
     const header = <React.Fragment>