diff --git a/src/App.tsx b/src/App.tsx
index 1931a8c7..00890f31 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";
@@ -34,6 +39,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;
}
@@ -53,40 +78,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 366aa596..c1e9fe1a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -51,12 +51,17 @@ limitations under the License.
--inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
--small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
--subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ --background-gradient: url("graphics/backgroundGradient.svg");
}
.cpd-theme-dark {
--cpd-color-border-accent: var(--cpd-color-green-1100);
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
--stopgap-background-85: rgba(16, 19, 23, 0.85);
+
+ background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+ background-repeat: no-repeat;
+ background-position: center;
}
@font-face {