3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-06-06 12:52:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

Dynamic style changes (#3544)

Browse source 
* color changes

* dynamic logo

* dynamic favicon

* trailing whitespace

* useLayoutEffect
This commit is contained in:
Nathan Hayfield 2022-08-10 20:04:36 +02:00 • committed by GitHub
parent 3c63b6c028
commit f87e138eab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

17
ui/dist/index.html vendored
View file

@ -2,14 +2,25 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="/.pomerium/favicon.ico?v=2" /> <link id="favicon" rel="shortcut icon" href="/.pomerium/favicon.ico?v=2" />
<link <link
class="pomerium_favicon"
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
href="/.pomerium/apple-touch-icon.png" href="/.pomerium/apple-touch-icon.png"
/> />
<link rel="icon" sizes="32x32" href="/.pomerium/favicon-32x32.png" /> <link
<link rel="icon" sizes="16x16" href="/.pomerium/favicon-16x16.png" /> class="pomerium_favicon"
rel="icon"
sizes="32x32"
href="/.pomerium/favicon-32x32.png"
/>
<link
class="pomerium_favicon"
rel="icon"
sizes="16x16"
href="/.pomerium/favicon-16x16.png"
/>
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1, shrink-to-fit=no"

25
ui/src/App.tsx
View file

@ -1,7 +1,7 @@
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline"; import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles"; import { ThemeProvider } from "@mui/material/styles";
import React, { FC } from "react"; import React, {FC, useLayoutEffect} from "react";
import ErrorPage from "./components/ErrorPage"; import ErrorPage from "./components/ErrorPage";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
@ -12,12 +12,13 @@ import UserInfoPage from "./components/UserInfoPage";
import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage"; import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
import { SubpageContextProvider } from "./context/Subpage"; import { SubpageContextProvider } from "./context/Subpage";
import { createTheme } from "./theme"; import { createTheme } from "./theme";
import { PageData, UserInfoPageData } from "./types"; import { PageData } from "./types";
const theme = createTheme();
const App: FC = () => { const App: FC = () => {
const data = (window["POMERIUM_DATA"] || {}) as PageData; const data = (window["POMERIUM_DATA"] || {}) as PageData;
const primary = data?.primaryColor || "#6F43E7";
const secondary = data?.secondaryColor || "#49AAA1";
const theme = createTheme(primary, secondary);
let body: React.ReactNode = <></>; let body: React.ReactNode = <></>;
switch (data?.page) { switch (data?.page) {
case "Error": case "Error":
@ -34,6 +35,22 @@ const App: FC = () => {
body = <WebAuthnRegistrationPage data={data} />; body = <WebAuthnRegistrationPage data={data} />;
break; break;
} }
useLayoutEffect(() => {
const favicon = document.getElementById(
'favicon'
) as HTMLAnchorElement | null;
if (favicon) {
favicon.href = data?.faviconUrl || '/.pomerium/favicon.ico';
}
const extraFaviconLinks = document.getElementsByClassName(
'pomerium_favicon'
) as HTMLCollectionOf<HTMLAnchorElement> | null;
for (const link of extraFaviconLinks) {
link.style.display = data?.faviconUrl ? 'none' : '';
}
}, [])
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />

3
ui/src/components/Header.tsx
View file

@ -18,6 +18,7 @@ import styled from "@mui/material/styles/styled";
import { get } from "lodash"; import { get } from "lodash";
import React, { FC, useState } from "react"; import React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather"; import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
import LogoURL from "../static/logo_white.svg";
const DrawerHeader = styled("div")(({ theme }) => ({ const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex", display: "flex",
@ -108,7 +109,7 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
</> </>
) : ( ) : (
<a href="/.pomerium"> <a href="/.pomerium">
<Logo /> <Logo src={ data?.logoUrl || LogoURL }/>
</a> </a>
)} )}
<Box flexGrow={1} /> <Box flexGrow={1} />

5
ui/src/components/Logo.tsx
View file

@ -1,9 +1,8 @@
import LogoURL from "../static/logo_white.svg";
import React from "react"; import React from "react";
import type { FC } from "react"; import type { FC } from "react";
const Logo: FC = () => { const Logo: FC<{src: string}> = ({src}) => {
return <img alt="Logo" src={LogoURL} height="30px" />; return <img alt="Logo" src={src} height="30px" />;
}; };
export default Logo; export default Logo;

9
ui/src/theme/index.ts
View file

@ -6,8 +6,8 @@ import muiCreateTheme, {
Theme as MuiTheme, Theme as MuiTheme,
} from "@mui/material/styles/createTheme"; } from "@mui/material/styles/createTheme";
export const createTheme = (): MuiTheme => export const createTheme = (primaryColor: string, secondaryColor: string): MuiTheme => {
muiCreateTheme({ return muiCreateTheme({
components: { components: {
MuiBackdrop: { MuiBackdrop: {
styleOverrides: { styleOverrides: {
@ -109,10 +109,10 @@ export const createTheme = (): MuiTheme =>
paper: common.white, paper: common.white,
}, },
primary: { primary: {
main: "#6F43E7", main: primaryColor,
}, },
secondary: { secondary: {
main: "#49AAA1", main: secondaryColor,
}, },
}, },
shadows: softShadows, shadows: softShadows,
@ -159,3 +159,4 @@ export const createTheme = (): MuiTheme =>
}, },
}, },
}); });
}

4
ui/src/types/index.ts
View file

@ -81,6 +81,10 @@ export type WebAuthnRequestOptions = {
type BasePageData = { type BasePageData = {
csrfToken?: string; csrfToken?: string;
primaryColor?: string;
secondaryColor?: string;
logoUrl?: string;
faviconUrl?: string;
}; };
export type ErrorPageData = BasePageData & { export type ErrorPageData = BasePageData & {