From 30b3ba302e788142e252aa5eef98c886e1f08a8f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 21 Feb 2024 21:45:11 +0100 Subject: [PATCH] Revert "Add theme URL param and adjust cpd theme based on it." This reverts commit f613b17824b957d0c4503bc22b2f913e040d605d. --- src/App.tsx | 90 +++++++++++++++---------------------------- src/Header.module.css | 1 - src/UrlParams.ts | 6 --- src/icons/Logo.svg | 22 +++++------ src/index.css | 7 ++-- 5 files changed, 46 insertions(+), 80 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 39a01879..f3482252 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,7 +35,6 @@ import { CrashView, LoadingView } from "./FullScreenView"; import { DisconnectedBanner } from "./DisconnectedBanner"; import { Initializer } from "./initializer"; import { MediaDevicesProvider } from "./livekit/MediaDevicesContext"; -import { useUrlParams } from "./UrlParams"; const SentryRoute = Sentry.withSentryRouting(Route); @@ -59,31 +58,6 @@ const BackgroundProvider: FC = ({ children }) => { return <>{children}; }; -interface ThemeProviderProps { - children: JSX.Element; -} - -const ThemeProvider: FC = ({ children }) => { - const { theme } = useUrlParams(); - const [previousTheme, setCurrentTheme] = useState( - document.body.classList.item(0), - ); - useEffect(() => { - // Don't update the current theme if the url does not contain a theme prop. - if (!theme) return; - const themeString = "cpd-theme-" + (theme ?? "dark"); - if (themeString !== previousTheme) { - if (previousTheme) { - document.body.classList.remove(previousTheme); - } - document.body.classList.add(themeString); - setCurrentTheme(themeString); - } - }, [previousTheme, theme]); - - return <>{children}; -}; - interface AppProps { history: History; } @@ -104,39 +78,37 @@ export const App: FC = ({ history }) => { // @ts-ignore - - - {loaded ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - ) : ( - - )} - - + + {loaded ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + + )} + ); diff --git a/src/Header.module.css b/src/Header.module.css index 1c9a7225..bb66034b 100644 --- a/src/Header.module.css +++ b/src/Header.module.css @@ -33,7 +33,6 @@ limitations under the License. } .headerLogo { - color: var(--cpd-color-text-primary); display: none; align-items: center; text-decoration: none; diff --git a/src/UrlParams.ts b/src/UrlParams.ts index 170c9906..da2a8aae 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -130,11 +130,6 @@ export interface UrlParams { * This is useful for video rooms. */ returnToLobby: boolean; - /** - * The theme to use for element call. - * can be "light", "dark", "light-hc" or "dark-hc". - */ - theme: string | null; } // This is here as a stopgap, but what would be far nicer is a function that @@ -234,7 +229,6 @@ export const getUrlParams = ( perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"), skipLobby: parser.getFlagParam("skipLobby"), returnToLobby: parser.getFlagParam("returnToLobby"), - theme: parser.getParam("theme"), }; }; diff --git a/src/icons/Logo.svg b/src/icons/Logo.svg index 8ee78ca7..4d64175f 100644 --- a/src/icons/Logo.svg +++ b/src/icons/Logo.svg @@ -2,17 +2,17 @@ Element Call (Beta) - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index 90794ddc..fc05247c 100644 --- a/src/index.css +++ b/src/index.css @@ -56,6 +56,10 @@ limitations under the License. --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 { @@ -148,9 +152,6 @@ limitations under the License. body { background-color: var(--cpd-color-bg-canvas-default); - background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); - background-repeat: no-repeat; - background-position: center; color: var(--cpd-color-text-primary); color-scheme: dark; margin: 0;