mirror of
https://github.com/pomerium/pomerium.git
synced 2025-08-06 10:21:05 +02:00
frontend: react+mui (#3004)
* mui v5 wip * wip * wip * wip * use compressor for all controlplane endpoints * wip * wip * add deps * fix authenticate URL * fix test * fix test * fix build * maybe fix build * fix integration test * remove image asset test * add yarn.lock
This commit is contained in:
Caleb Doxsey
GitHub
parent
64d8748251
commit
2824faecbf
84 changed files with 13373 additions and 1455 deletions
161
ui/src/theme/index.ts
Normal file
161
ui/src/theme/index.ts
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import { softShadows } from "./shadows";
|
||||
import "@fontsource/dm-mono";
|
||||
import "@fontsource/dm-sans";
|
||||
import common from "@mui/material/colors/common";
|
||||
import muiCreateTheme, {
|
||||
Theme as MuiTheme,
|
||||
} from "@mui/material/styles/createTheme";
|
||||
|
||||
export const createTheme = (): MuiTheme =>
|
||||
muiCreateTheme({
|
||||
components: {
|
||||
MuiBackdrop: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: "rgba(68, 56, 102, 0.8)",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiBreadcrumbs: {
|
||||
styleOverrides: {
|
||||
separator: {
|
||||
opacity: "30%",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: "rgba(0,0,0,0.075)",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDialog: {
|
||||
styleOverrides: {
|
||||
paper: {
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDialogActions: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexFlow: "row nowrap",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDialogContent: {
|
||||
styleOverrides: {
|
||||
root: { padding: "16px" },
|
||||
},
|
||||
},
|
||||
MuiDialogTitle: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
display: "flex",
|
||||
flexFlow: "row nowrap",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "16px",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiFilledInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: "4px",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiLinearProgress: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItemIcon: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minWidth: 32,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: "4px",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
head: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
action: {
|
||||
active: "#39256C",
|
||||
},
|
||||
background: {
|
||||
default: "#FBFBFB",
|
||||
paper: common.white,
|
||||
},
|
||||
primary: {
|
||||
main: "#6F43E7",
|
||||
},
|
||||
secondary: {
|
||||
main: "#49AAA1",
|
||||
},
|
||||
},
|
||||
shadows: softShadows,
|
||||
shape: {
|
||||
borderRadius: "16px",
|
||||
},
|
||||
typography: {
|
||||
fontFamily: [
|
||||
'"DM Sans"',
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
'"Segoe UI"',
|
||||
"Roboto",
|
||||
'"Helvetica Neue"',
|
||||
"Arial",
|
||||
"sans-serif",
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
].join(","),
|
||||
h1: {
|
||||
fontSize: "3.052rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
h2: {
|
||||
fontSize: "2.441rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
h3: {
|
||||
fontSize: "1.953rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
h4: {
|
||||
fontSize: "1.563rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
h5: {
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
h6: {
|
||||
fontSize: "1rem",
|
||||
fontWeight: 550,
|
||||
},
|
||||
},
|
||||
});
|
||||
57
ui/src/theme/shadows.ts
Normal file
57
ui/src/theme/shadows.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import type { Shadows } from "@mui/material/styles/shadows";
|
||||
|
||||
export const softShadows: Shadows = [
|
||||
"none",
|
||||
"0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 6px 12px -4px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)",
|
||||
];
|
||||
|
||||
export const strongShadows: Shadows = [
|
||||
"none",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 2px 2px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 4px 8px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 5px 8px -2px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 6px 12px -4px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 7px 12px -4px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 6px 16px -4px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 7px 16px -4px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 8px 18px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 9px 18px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 10px 20px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 11px 20px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 12px 22px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 13px 22px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 14px 24px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 16px 28px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 18px 30px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 20px 32px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 22px 34px -8px rgba(0,0,0,0.50)",
|
||||
"0 0 1px 0 rgba(0,0,0,0.70), 0 24px 36px -8px rgba(0,0,0,0.50)",
|
||||
];
|
||||
Loading…
Add table
Add a link
Reference in a new issue