theme component customization (#221)

agent/agentUi/src/AccessCard.jsx

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

agent/agentUi/src/Overview.jsx

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

agent/agentUi/src/ShareCard.jsx

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

agent/agentUi/src/main.jsx

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