theme component customization (#221)

This commit is contained in:
Michael Quigley 2024-10-21 13:43:59 -04:00
parent 28e8896b87
commit b9609f1097
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 16 additions and 7 deletions

View File

@ -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} &rarr; {props.access.bindAddress}

View File

@ -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}</>;

View File

@ -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>

View File

@ -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)}>