Add E2EE banner

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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

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 <div className={styles.banner}>{children}</div>;
+};

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

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 (
+    <Banner>
+      <div className={styles.e2eeBanner}>
+        <LockOffIcon width={32} height={32} />
+        <Trans>
+          Element Call is temporarily not encrypted while we test scalability.
+        </Trans>
+      </div>
+    </Banner>
+  );
+};

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) {
                 <AnalyticsNotice />
               </Caption>
             )}
+            <E2EEBanner />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />

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 = () => {
                 <Link href={privacyPolicyUrl}>Terms and conditions</Link>
               </Trans>
             </Caption>
+            <E2EEBanner />
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />