diff --git a/src/App.tsx b/src/App.tsx
index 8e9c4bf1..717ad2f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,12 @@ limitations under the License.
*/
import { Suspense, useEffect, useState } from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import {
+ BrowserRouter as Router,
+ Switch,
+ Route,
+ useLocation,
+} from "react-router-dom";
import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history";
@@ -35,6 +40,26 @@ import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
const SentryRoute = Sentry.withSentryRouting(Route);
+interface BackgroundProviderProps {
+ children: JSX.Element;
+}
+
+const BackgroundProvider = ({ children }: BackgroundProviderProps) => {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ let backgroundImage = "";
+ if (!["/login", "/register"].includes(pathname)) {
+ backgroundImage = "var(--background-gradient)";
+ }
+
+ document.getElementsByTagName("body")[0].style.backgroundImage =
+ backgroundImage;
+ }, [pathname]);
+
+ return <>{children};
+};
+
interface AppProps {
history: History;
}
@@ -56,40 +81,42 @@ export default function App({ history }: AppProps) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
- {loaded ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
- )}
+
+ {loaded ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
);
}
diff --git a/src/graphics/backgroundGradient.svg b/src/graphics/backgroundGradient.svg
new file mode 100644
index 00000000..088244d8
--- /dev/null
+++ b/src/graphics/backgroundGradient.svg
@@ -0,0 +1,16 @@
+
diff --git a/src/graphics/loggedOutGradient.svg b/src/graphics/loggedOutGradient.svg
new file mode 100644
index 00000000..7855ef81
--- /dev/null
+++ b/src/graphics/loggedOutGradient.svg
@@ -0,0 +1,48 @@
+
diff --git a/src/index.css b/src/index.css
index a1112ff0..f585be5c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,11 +49,17 @@ limitations under the License.
/* The distance to inset non-full-width content from the edge of the window
along the inline axis */
--inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
+
+ --background-gradient: url("graphics/backgroundGradient.svg");
}
.cpd-theme-dark {
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
--stopgap-background-85: rgba(16, 19, 23, 0.85);
+
+ background-size: calc(max(100%, 100vw)) calc(max(100%, 100vh));
+ background-repeat: no-repeat;
+ background-position: bottom right;
}
@font-face {