From a63dc637abf9c8db440542fb97334ec1469dcee4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 08:35:53 +0200 Subject: [PATCH 1/7] Add subtle primary color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .env.example | 1 + src/index.css | 1 + src/initializer.tsx | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/.env.example b/.env.example index f03e882..4180a83 100644 --- a/.env.example +++ b/.env.example @@ -25,3 +25,4 @@ LIVEKIT_SECRET="secret" # VITE_THEME_SYSTEM=#21262c # VITE_THEME_BACKGROUND=#15191e # VITE_THEME_BACKGROUND_85=#15191ed9 +# VITE_THEME_SUBTLE_PRIMARY=#26282D diff --git a/src/index.css b/src/index.css index f9e00ef..1f372a1 100644 --- a/src/index.css +++ b/src/index.css @@ -52,6 +52,7 @@ limitations under the License. --background: #15191e; --background-85: rgba(23, 25, 28, 0.85); --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */ + --subtle-primary: #26282d; } @font-face { diff --git a/src/initializer.tsx b/src/initializer.tsx index 37e659e..df5c8af 100644 --- a/src/initializer.tsx +++ b/src/initializer.tsx @@ -133,6 +133,10 @@ export class Initializer { "--background-85", import.meta.env.VITE_THEME_BACKGROUND_85 as string ); + style.setProperty( + "--subtle-primary", + import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string + ); } // Custom fonts From 0d72e3ae9e643f8c4e0a43b57425807828881906 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 08:36:18 +0200 Subject: [PATCH 2/7] Add `LockOff` icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/icons/LockOff.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/icons/LockOff.svg diff --git a/src/icons/LockOff.svg b/src/icons/LockOff.svg new file mode 100644 index 0000000..d0a7390 --- /dev/null +++ b/src/icons/LockOff.svg @@ -0,0 +1,4 @@ + + + + From 3cef00b6b695133eae551bee608a795afd4dad2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 11:10:00 +0200 Subject: [PATCH 3/7] Add E2EE banner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Banner.module.css | 22 +++++++++++++++++++++ src/Banner.tsx | 27 +++++++++++++++++++++++++ src/E2EEBanner.module.css | 22 +++++++++++++++++++++ src/E2EEBanner.tsx | 34 ++++++++++++++++++++++++++++++++ src/home/RegisteredView.tsx | 2 ++ src/home/UnauthenticatedView.tsx | 2 ++ 6 files changed, 109 insertions(+) create mode 100644 src/Banner.module.css create mode 100644 src/Banner.tsx create mode 100644 src/E2EEBanner.module.css create mode 100644 src/E2EEBanner.tsx 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 && ( From 4a90a6d64c16ee6cf1ddf74ad20ca5a771785822 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 11:10:43 +0200 Subject: [PATCH 4/7] Add E2EE lock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/E2EELock.module.css | 28 +++++++++++++++++++++ src/E2EELock.tsx | 56 +++++++++++++++++++++++++++++++++++++++++ src/room/InCallView.tsx | 2 ++ 3 files changed, 86 insertions(+) create mode 100644 src/E2EELock.module.css create mode 100644 src/E2EELock.tsx diff --git a/src/E2EELock.module.css b/src/E2EELock.module.css new file mode 100644 index 0000000..8d6e95f --- /dev/null +++ b/src/E2EELock.module.css @@ -0,0 +1,28 @@ +/* +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. +*/ + +.e2eeLock { + width: 32px; + height: 32px; + + display: flex; + align-items: center; + justify-content: center; + margin: 8px; + + border-radius: 100%; + background-color: var(--subtle-primary); +} diff --git a/src/E2EELock.tsx b/src/E2EELock.tsx new file mode 100644 index 0000000..3832e7f --- /dev/null +++ b/src/E2EELock.tsx @@ -0,0 +1,56 @@ +/* +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 { useTranslation } from "react-i18next"; +import { useCallback } from "react"; +import { useObjectRef } from "@react-aria/utils"; +import { useButton } from "@react-aria/button"; + +import styles from "./E2EELock.module.css"; +import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg"; +import { TooltipTrigger } from "./Tooltip"; + +export const E2EELock = () => { + const { t } = useTranslation(); + const tooltip = useCallback( + () => + t("Element Call is temporarily not encrypted while we test scalability."), + [t] + ); + + return ( + + + + ); +}; + +/** + * This component is a bit of hack - for some reason for the TooltipTrigger to + * work, it needs to contain a component which uses the useButton hook; please + * note that for some reason this also needs to be a separate component and we + * cannot just use the useButton hook inside the E2EELock. + */ +const Icon = () => { + const buttonRef = useObjectRef(); + const { buttonProps } = useButton({}, buttonRef); + + return ( +
+ +
+ ); +}; diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 98a3a63..b82b151 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -84,6 +84,7 @@ import { useMediaDevices } from "../livekit/useMediaDevices"; import { useFullscreen } from "./useFullscreen"; import { useLayoutStates } from "../video-grid/Layout"; import { useSFUConfig } from "../livekit/OpenIDLoader"; +import { E2EELock } from "../E2EELock"; const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {}); // There is currently a bug in Safari our our code with cloning and sending MediaStreams @@ -395,6 +396,7 @@ export function InCallView({ users={unencryptedEventsFromUsers} room={groupCall.room} /> + From 3b49fa079b3ff5c9ef73ab1739678a12132ffa84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 11:36:34 +0200 Subject: [PATCH 5/7] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- public/locales/en-GB/app.json | 1 + 1 file changed, 1 insertion(+) diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index f14991d..c96a54e 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -37,6 +37,7 @@ "Display name": "Display name", "Download debug logs": "Download debug logs", "Element Call Home": "Element Call Home", + "Element Call is temporarily not encrypted while we test scalability.": "Element Call is temporarily not encrypted while we test scalability.", "Exit full screen": "Exit full screen", "Expose developer settings in the settings window.": "Expose developer settings in the settings window.", "Feedback": "Feedback", From b9e15ab9929968456d2e42dd90a2e2ec1e2d1d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 7 Jul 2023 10:11:27 +0200 Subject: [PATCH 6/7] Fix sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/E2EEBanner.module.css | 3 ++- src/E2EEBanner.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/E2EEBanner.module.css b/src/E2EEBanner.module.css index 80b06bb..dd77749 100644 --- a/src/E2EEBanner.module.css +++ b/src/E2EEBanner.module.css @@ -18,5 +18,6 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; - gap: 16px; + gap: 12px; + font-size: var(--font-size-caption); } diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx index 78e6815..08d1ffb 100644 --- a/src/E2EEBanner.tsx +++ b/src/E2EEBanner.tsx @@ -24,7 +24,7 @@ export const E2EEBanner = () => { return (
- + Element Call is temporarily not encrypted while we test scalability. From 7a47d0504dabf2a4b7f089e50e9b5f155248d270 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 7 Jul 2023 10:14:04 +0200 Subject: [PATCH 7/7] Size improvement numero dos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/E2EELock.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/E2EELock.module.css b/src/E2EELock.module.css index 8d6e95f..504ace7 100644 --- a/src/E2EELock.module.css +++ b/src/E2EELock.module.css @@ -15,8 +15,8 @@ limitations under the License. */ .e2eeLock { - width: 32px; - height: 32px; + width: 24px; + height: 24px; display: flex; align-items: center;