From dd49bd517c5794598475afedbddbd9f1d1fa09c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 13 Sep 2023 17:53:12 +0200 Subject: [PATCH] Add background gradient MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/App.tsx | 97 ++++++++++++++++++----------- src/graphics/backgroundGradient.svg | 16 +++++ src/graphics/loggedOutGradient.svg | 48 ++++++++++++++ src/index.css | 6 ++ 4 files changed, 132 insertions(+), 35 deletions(-) create mode 100644 src/graphics/backgroundGradient.svg create mode 100644 src/graphics/loggedOutGradient.svg 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 {