rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add background gradient

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
2023-09-13 17:53:12 +02:00
parent 1f95ec7a0c
commit dd49bd517c
4 changed files with 132 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/App.tsx
View File

@@ -15,7 +15,12 @@ limitations under the License.
*/ */
import { Suspense, useEffect, useState } from "react"; 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 * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays"; import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history"; import { History } from "history";
@@ -35,6 +40,26 @@ import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
const SentryRoute = Sentry.withSentryRouting(Route); 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 { interface AppProps {
history: History; history: History;
} }
@@ -56,40 +81,42 @@ export default function App({ history }: AppProps) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
<Router history={history}> <Router history={history}>
{loaded ? ( <BackgroundProvider>
<Suspense fallback={null}> {loaded ? (
<ClientProvider> <Suspense fallback={null}>
<MediaDevicesProvider> <ClientProvider>
<InspectorContextProvider> <MediaDevicesProvider>
<Sentry.ErrorBoundary fallback={errorPage}> <InspectorContextProvider>
<OverlayProvider> <Sentry.ErrorBoundary fallback={errorPage}>
<DisconnectedBanner /> <OverlayProvider>
<Switch> <DisconnectedBanner />
<SentryRoute exact path="/"> <Switch>
<HomePage /> <SentryRoute exact path="/">
</SentryRoute> <HomePage />
<SentryRoute exact path="/login"> </SentryRoute>
<LoginPage /> <SentryRoute exact path="/login">
</SentryRoute> <LoginPage />
<SentryRoute exact path="/register"> </SentryRoute>
<RegisterPage /> <SentryRoute exact path="/register">
</SentryRoute> <RegisterPage />
<SentryRoute path="/inspector"> </SentryRoute>
<SequenceDiagramViewerPage /> <SentryRoute path="/inspector">
</SentryRoute> <SequenceDiagramViewerPage />
<SentryRoute path="*"> </SentryRoute>
<RoomPage /> <SentryRoute path="*">
</SentryRoute> <RoomPage />
</Switch> </SentryRoute>
</OverlayProvider> </Switch>
</Sentry.ErrorBoundary> </OverlayProvider>
</InspectorContextProvider> </Sentry.ErrorBoundary>
</MediaDevicesProvider> </InspectorContextProvider>
</ClientProvider> </MediaDevicesProvider>
</Suspense> </ClientProvider>
) : ( </Suspense>
<LoadingView /> ) : (
)} <LoadingView />
)}
</BackgroundProvider>
</Router> </Router>
); );
} }

16
src/graphics/backgroundGradient.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_4162_80259)">
<path d="M-37.0486 666.028C267.76 138.867 944.304 -46.1945 1477.05 260.929" stroke="url(#paint0_linear_4162_80259)" stroke-width="192" stroke-linecap="round"/>
</g>
<defs>
<filter id="filter0_f_4162_80259" x="-333.118" y="-183.694" width="2106.24" height="1145.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_4162_80259"/>
</filter>
<linearGradient id="paint0_linear_4162_80259" x1="1255.31" y1="320.254" x2="184.899" y2="607.497" gradientUnits="userSpaceOnUse">
<stop stop-color="#00C59E"/>
<stop offset="0.75" stop-color="#0044A5"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 938 B

48
src/graphics/loggedOutGradient.svg Normal file
View File

@@ -0,0 +1,48 @@
<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_4162_80135)">
<circle cx="720" cy="1620" r="1500" fill="url(#paint0_linear_4162_80135)"/>
<circle cx="720" cy="1620" r="1498.92" stroke="white" stroke-opacity="0.5" stroke-width="2.16028" style="mix-blend-mode:overlay"/>
</g>
<g filter="url(#filter1_f_4162_80135)">
<circle cx="720" cy="1550.86" r="1272.86" fill="white"/>
</g>
<defs>
<filter id="filter0_f_4162_80135" x="-900" y="0" width="3240" height="3240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
</filter>
<filter id="filter1_f_4162_80135" x="-672.863" y="158" width="2785.73" height="2785.73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
</filter>
<linearGradient id="paint0_linear_4162_80135" x1="549.5" y1="120" x2="549.5" y2="505.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#062993"/>
<stop offset="0.040404" stop-color="#02389D"/>
<stop offset="0.0808081" stop-color="#0045A6"/>
<stop offset="0.121212" stop-color="#0051AD"/>
<stop offset="0.161616" stop-color="#005DB4"/>
<stop offset="0.20202" stop-color="#0069BA"/>
<stop offset="0.242424" stop-color="#0075BB"/>
<stop offset="0.282828" stop-color="#0081BB"/>
<stop offset="0.323232" stop-color="#008CB9"/>
<stop offset="0.363636" stop-color="#0098B7"/>
<stop offset="0.40404" stop-color="#00A3B3"/>
<stop offset="0.444444" stop-color="#00AEAD"/>
<stop offset="0.484848" stop-color="#00B8A4"/>
<stop offset="0.525253" stop-color="#00C2A0"/>
<stop offset="0.565657" stop-color="#00CC99"/>
<stop offset="0.606061" stop-color="#3AD396"/>
<stop offset="0.646465" stop-color="#5DD898"/>
<stop offset="0.686869" stop-color="#79DD99"/>
<stop offset="0.727273" stop-color="#92E29B"/>
<stop offset="0.767677" stop-color="#A8E69F"/>
<stop offset="0.808081" stop-color="#BBEAA5"/>
<stop offset="0.848485" stop-color="#CDEEAE"/>
<stop offset="0.888889" stop-color="#DCF2B9"/>
<stop offset="0.929293" stop-color="#EAF6C7"/>
<stop offset="0.969697" stop-color="#F5FBD5"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

6
src/index.css
View File

@@ -49,11 +49,17 @@ limitations under the License.
/* The distance to inset non-full-width content from the edge of the window /* The distance to inset non-full-width content from the edge of the window
along the inline axis */ along the inline axis */
--inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2)); --inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
--background-gradient: url("graphics/backgroundGradient.svg");
} }
.cpd-theme-dark { .cpd-theme-dark {
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary); --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
--stopgap-background-85: rgba(16, 19, 23, 0.85); --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 { @font-face {