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/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index ac94823..3246e23 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", 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..dd77749 --- /dev/null +++ b/src/E2EEBanner.module.css @@ -0,0 +1,23 @@ +/* +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: 12px; + font-size: var(--font-size-caption); +} diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx new file mode 100644 index 0000000..08d1ffb --- /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/E2EELock.module.css b/src/E2EELock.module.css new file mode 100644 index 0000000..504ace7 --- /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: 24px; + height: 24px; + + 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/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 32877e4..abf6933 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(); @@ -170,6 +171,7 @@ export const UnauthenticatedView: FC = () => { + {error && ( 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 @@ + + + + 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 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} /> +