mirror of
https://github.com/openziti/zrok.git
synced 2024-11-07 16:54:23 +01:00
theme component customization (#221)
This commit is contained in:
parent
28e8896b87
commit
b9609f1097
@ -8,7 +8,7 @@ const AccessCard = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card sx={{ mt: 2, p: 2 }}>
|
||||
<Card>
|
||||
<h2>{props.access.frontendToken} [<LanIcon/>]</h2>
|
||||
<p>
|
||||
{props.access.token} → {props.access.bindAddress}
|
||||
|
@ -11,16 +11,16 @@ const Overview = (props) => {
|
||||
props.overview.forEach((row) => {
|
||||
switch(row.type) {
|
||||
case "share":
|
||||
cards.push(<ShareCard releaseShare={props.releaseShare} share={row.v} key={row.v.token} />);
|
||||
cards.push(<ShareCard key={row.v.token} releaseShare={props.releaseShare} share={row.v} />);
|
||||
break;
|
||||
|
||||
case "access":
|
||||
cards.push(<AccessCard releaseAccess={props.releaseAccess} access={row.v} key={row.v.frontendToken} />);
|
||||
cards.push(<AccessCard key={row.v.frontendToken} releaseAccess={props.releaseAccess} access={row.v} />);
|
||||
break;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
cards.push(<Card sx={{ mt: 2, p: 2}}><h5>zrok Agent is empty! Add a <a href="#" onClick={props.shareClick}>share <ShareIcon /></a> or <a href={"#"} onClick={props.accessClick}>access <LanIcon /></a> share to get started.</h5></Card>);
|
||||
cards.push(<Card key="empty"><h5>zrok Agent is empty! Add a <a href="#" onClick={props.shareClick}>share <ShareIcon /></a> or <a href={"#"} onClick={props.accessClick}>access <LanIcon /></a> share to get started.</h5></Card>);
|
||||
}
|
||||
|
||||
return <>{cards}</>;
|
||||
|
@ -13,7 +13,7 @@ const ShareCard = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card sx={{ mt: 2, p: 2 }}>
|
||||
<Card>
|
||||
<h2>{props.share.token} [<ShareIcon />]</h2>
|
||||
<p>({props.share.shareMode}, {props.share.backendMode})</p>
|
||||
<p>
|
||||
|
@ -5,6 +5,16 @@ import AgentUi from "./AgentUi.jsx";
|
||||
import {createTheme, ThemeProvider} from "@mui/material";
|
||||
|
||||
export const themeOptions = {
|
||||
components: {
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: ({theme}) => theme.unstable_sx({
|
||||
mt: 5,
|
||||
p: 2.5,
|
||||
}),
|
||||
}
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
@ -16,10 +26,9 @@ export const themeOptions = {
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Poppins',
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider theme={createTheme(themeOptions)}>
|
||||
|
Loading…
Reference in New Issue
Block a user