From f2928c184dda3f4a538dd08cd8a0c8fb4a05bdff Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 1 Feb 2019 13:39:25 +0100
Subject: [PATCH] create warning/verified icon to use in header/composer/member
 info

---
 res/css/_components.scss                    |  1 +
 res/css/views/rooms/_E2EIcon.scss           | 33 +++++++++++++++++++
 res/img/feather-icons/e2e/lock-verified.svg |  6 ++++
 res/img/feather-icons/e2e/lock-warning.svg  |  7 +++++
 src/components/views/rooms/E2EIcon.js       | 35 +++++++++++++++++++++
 5 files changed, 82 insertions(+)
 create mode 100644 res/css/views/rooms/_E2EIcon.scss
 create mode 100644 res/img/feather-icons/e2e/lock-verified.svg
 create mode 100644 res/img/feather-icons/e2e/lock-warning.svg
 create mode 100644 src/components/views/rooms/E2EIcon.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index e017d4b95a..ee55c000ff 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -107,6 +107,7 @@
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
 @import "./views/rooms/_AuxPanel.scss";
+@import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
new file mode 100644
index 0000000000..cd577df87b
--- /dev/null
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -0,0 +1,33 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_E2EIcon {
+    width: 25px;
+    height: 25px;
+    mask-repeat: no-repeat;
+    mask-position: center 0;
+    margin: 0 9px;
+}
+
+.mx_E2EIcon_verified {
+    mask-image: url('$(res)/img/feather-icons/e2e/lock-verified.svg');
+    background-color: $accent-color;
+}
+
+.mx_E2EIcon_warning {
+    mask-image: url('$(res)/img/feather-icons/e2e/lock-warning.svg');
+    background-color: $warning-color;
+}
diff --git a/res/img/feather-icons/e2e/lock-verified.svg b/res/img/feather-icons/e2e/lock-verified.svg
new file mode 100644
index 0000000000..a1546daf7e
--- /dev/null
+++ b/res/img/feather-icons/e2e/lock-verified.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="25" viewBox="0 0 22 25">
+    <g fill="none" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <path d="M8.23 21.01l-5.233-.007a1.995 1.995 0 0 1-1.997-2V11a2 2 0 0 1 2-2h14c1.259 0 2 .939 2 1M5 9V6a5 5 0 1 1 10 0v3"/>
+        <path d="M15.5 24s5.5-2.4 5.5-6v-4.2L15.5 12 10 13.8V18c0 3.6 5.5 6 5.5 6z"/>
+    </g>
+</svg>
diff --git a/res/img/feather-icons/e2e/lock-warning.svg b/res/img/feather-icons/e2e/lock-warning.svg
new file mode 100644
index 0000000000..e6acfca965
--- /dev/null
+++ b/res/img/feather-icons/e2e/lock-warning.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="25" viewBox="0 0 23 25">
+    <g fill="none" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
+        <path d="M7.23 20.01l-5.233-.007a2 2 0 0 1-1.997-2V10a2 2 0 0 1 2-2h14c1.259 0 2 .939 2 1M4 8V5a5 5 0 1 1 10 0v3"/>
+        <circle cx="15" cy="17" r="6"/>
+        <path d="M15 14v3M15 20v.01"/>
+    </g>
+</svg>
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
new file mode 100644
index 0000000000..9be3efa450
--- /dev/null
+++ b/src/components/views/rooms/E2EIcon.js
@@ -0,0 +1,35 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from 'classnames';
+import { _t } from '../../../languageHandler';
+
+export default function(props) {
+    const isWarning = props.status === "warning";
+    const isVerified = props.status === "verified";
+    const e2eIconClasses = classNames({
+        mx_E2EIcon: true,
+        mx_E2EIcon_warning: isWarning,
+        mx_E2EIcon_verified: isVerified,
+    }, props.className);
+    let e2eTitle;
+    if (isWarning) {
+        e2eTitle = _t("Some devices in this encrypted room are not trusted");
+    } else if (isVerified) {
+        e2eTitle = _t("All devices in this encrypted room are trusted");
+    }
+    return (<div className={e2eIconClasses} title={e2eTitle} />);
+}