diff --git a/src/Banner.module.css b/src/Banner.module.css
new file mode 100644
index 0000000..6acc941
--- /dev/null
+++ b/src/Banner.module.css
@@ -0,0 +1,22 @@
+/*
+Copyright 2023 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.
+*/
+
+.banner {
+ flex: 1;
+ border-radius: 8px;
+ padding: 16px;
+ background-color: var(--subtle-primary);
+}
diff --git a/src/Banner.tsx b/src/Banner.tsx
new file mode 100644
index 0000000..fcc68a3
--- /dev/null
+++ b/src/Banner.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2023 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 { ReactNode } from "react";
+
+import styles from "./Banner.module.css";
+
+interface Props {
+ children: ReactNode;
+}
+
+export const Banner = ({ children }: Props) => {
+ return
{children}
;
+};
diff --git a/src/E2EEBanner.module.css b/src/E2EEBanner.module.css
new file mode 100644
index 0000000..80b06bb
--- /dev/null
+++ b/src/E2EEBanner.module.css
@@ -0,0 +1,22 @@
+/*
+Copyright 2023 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.
+*/
+
+.e2eeBanner {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+}
diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx
new file mode 100644
index 0000000..78e6815
--- /dev/null
+++ b/src/E2EEBanner.tsx
@@ -0,0 +1,34 @@
+/*
+Copyright 2023 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 { Trans } from "react-i18next";
+
+import { Banner } from "./Banner";
+import styles from "./E2EEBanner.module.css";
+import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+
+export const E2EEBanner = () => {
+ return (
+
+
+
+
+ Element Call is temporarily not encrypted while we test scalability.
+
+
+
+ );
+};
diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx
index ee696d2..f46376a 100644
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -39,6 +39,7 @@ import { Form } from "../form/Form";
import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
import { useOptInAnalytics } from "../settings/useSetting";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { E2EEBanner } from "../E2EEBanner";
interface Props {
client: MatrixClient;
@@ -146,6 +147,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
)}
+
{error && (
diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx
index 1fb1a84..e8f9672 100644
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -41,6 +41,7 @@ import commonStyles from "./common.module.css";
import { generateRandomName } from "../auth/generateRandomName";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { useOptInAnalytics } from "../settings/useSetting";
+import { E2EEBanner } from "../E2EEBanner";
export const UnauthenticatedView: FC = () => {
const { setClient } = useClient();
@@ -168,6 +169,7 @@ export const UnauthenticatedView: FC = () => {
Terms and conditions
+
{error && (