more mui (#221)

agent/agentUi/src/AccessCard.jsx

@@ -1,5 +1,6 @@
 import LanIcon from "@mui/icons-material/Lan";
 import DeleteIcon from "@mui/icons-material/Delete";
+import {Card} from "@mui/material";
 
 const AccessCard = (props) => {
     const releaseClicked = () => {
@@ -7,13 +8,13 @@ const AccessCard = (props) => {
     }
 
     return (
-        <div className={"card"}>
+        <Card sx={{ mt: 2, p: 2 }}>
             <h2>{props.access.frontendToken} [<LanIcon/>]</h2>
             <p>
                 {props.access.token} &rarr; {props.access.bindAddress}
             </p>
             <p><DeleteIcon onClick={releaseClicked}/></p>
-        </div>
+        </Card>
     );
 }
 

agent/agentUi/src/Overview.jsx

@@ -3,6 +3,7 @@ import ShareCard from "./ShareCard.jsx";
 import AccessCard from "./AccessCard.jsx";
 import LanIcon from "@mui/icons-material/Lan";
 import ShareIcon from "@mui/icons-material/Share";
+import {Card} from "@mui/material";
 
 const Overview = (props) => {
     let cards = [];
@@ -19,9 +20,7 @@ const Overview = (props) => {
             }
         });
     } else {
-        cards.push(<div key="help" className={"card"}>
-            <h5>Your 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>
-        </div>);
+        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>);
     }
 
     return <>{cards}</>;

agent/agentUi/src/ShareCard.jsx

@@ -1,5 +1,6 @@
 import ShareIcon from "@mui/icons-material/Share";
 import DeleteIcon from "@mui/icons-material/Delete";
+import {Card} from "@mui/material";
 
 const ShareCard = (props) => {
     let frontends = [];
@@ -12,14 +13,14 @@ const ShareCard = (props) => {
     }
 
     return (
-        <div className={"card"}>
+        <Card sx={{ mt: 2, p: 2 }}>
             <h2>{props.share.token} [<ShareIcon />]</h2>
             <p>({props.share.shareMode}, {props.share.backendMode})</p>
             <p>
                 {props.share.backendEndpoint} &rarr; {frontends}
             </p>
             <p><DeleteIcon onClick={releaseClicked}/></p>
-        </div>
+        </Card>
     );
 }
 

agent/agentUi/src/index.css

@@ -1,6 +1,5 @@
 body {
   margin: 0;
-  font-family: 'Poppins', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   padding-bottom: 15px;
@@ -51,12 +50,3 @@ button:focus-visible {
   padding: 2rem;
 }
 
-.info {
-  margin-top: 5em;
-}
-
-.card {
-  margin-top: 2em;
-  padding: 1em;
-  border: 0;
-}