3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-06-02 02:42:57 +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">
<head>
<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
class="pomerium_favicon"
rel="apple-touch-icon"
sizes="180x180"
href="/.pomerium/apple-touch-icon.png"
/>
<link rel="icon" sizes="32x32" href="/.pomerium/favicon-32x32.png" />
<link rel="icon" sizes="16x16" href="/.pomerium/favicon-16x16.png" />
<link
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
name="viewport"
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 CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import React, { FC } from "react";
import React, {FC, useLayoutEffect} from "react";
import ErrorPage from "./components/ErrorPage";
import Footer from "./components/Footer";
@ -12,12 +12,13 @@ import UserInfoPage from "./components/UserInfoPage";
import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
import { SubpageContextProvider } from "./context/Subpage";
import { createTheme } from "./theme";
import { PageData, UserInfoPageData } from "./types";
const theme = createTheme();
import { PageData } from "./types";
const App: FC = () => {
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 = <></>;
switch (data?.page) {
case "Error":
@ -34,6 +35,22 @@ const App: FC = () => {
body = <WebAuthnRegistrationPage data={data} />;
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 (
<ThemeProvider theme={theme}>
<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 React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
import LogoURL from "../static/logo_white.svg";
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
@ -108,7 +109,7 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
</>
) : (
<a href="/.pomerium">
<Logo />
<Logo src={ data?.logoUrl || LogoURL }/>
</a>
)}
<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 type { FC } from "react";
const Logo: FC = () => {
return <img alt="Logo" src={LogoURL} height="30px" />;
const Logo: FC<{src: string}> = ({src}) => {
return <img alt="Logo" src={src} height="30px" />;
};
export default Logo;

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

@ -6,8 +6,8 @@ import muiCreateTheme, {
Theme as MuiTheme,
} from "@mui/material/styles/createTheme";
export const createTheme = (): MuiTheme =>
muiCreateTheme({
export const createTheme = (primaryColor: string, secondaryColor: string): MuiTheme => {
return muiCreateTheme({
components: {
MuiBackdrop: {
styleOverrides: {
@ -109,10 +109,10 @@ export const createTheme = (): MuiTheme =>
paper: common.white,
},
primary: {
main: "#6F43E7",
main: primaryColor,
},
secondary: {
main: "#49AAA1",
main: secondaryColor,
},
},
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 = {
csrfToken?: string;
primaryColor?: string;
secondaryColor?: string;
logoUrl?: string;
faviconUrl?: string;
};
export type ErrorPageData = BasePageData & {