From 569dfce1ce38d36966f8daf1e828998f8ef8e748 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Tue, 19 Nov 2024 21:25:18 -0500
Subject: [PATCH] typography lint (#221)

---
 agent/agentUi/src/AgentUi.tsx        |  2 +-
 agent/agentUi/src/NewAccessModal.tsx |  6 ++++--
 agent/agentUi/src/NewShareModal.tsx  |  6 ++++--
 agent/agentUi/src/Overview.tsx       | 13 ++++++++++---
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/agent/agentUi/src/AgentUi.tsx b/agent/agentUi/src/AgentUi.tsx
index 7296b9e0..51d5624e 100644
--- a/agent/agentUi/src/AgentUi.tsx
+++ b/agent/agentUi/src/AgentUi.tsx
@@ -59,7 +59,7 @@ const AgentUi = () => {
     return (
         <>
             <NavBar version={version} shareClick={openNewShare} accessClick={openNewAccess} />
-            <Overview overview={overview} />
+            <Overview overview={overview} shareClick={openNewShare} accessClick={openNewAccess} />
             <NewShareModal isOpen={newShareOpen} close={closeNewShare} />
             <NewAccessModal isOpen={newAccessOpen} close={closeNewAccess} />
         </>
diff --git a/agent/agentUi/src/NewAccessModal.tsx b/agent/agentUi/src/NewAccessModal.tsx
index f75c6ca9..9470c6e6 100644
--- a/agent/agentUi/src/NewAccessModal.tsx
+++ b/agent/agentUi/src/NewAccessModal.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import {useFormik} from "formik";
 import {GetAgentApi} from "./model/api.ts";
-import {Box, Button, Modal, TextField} from "@mui/material";
+import {Box, Button, Modal, TextField, Typography} from "@mui/material";
 import {modalStyle} from "./model/theme.ts";
 
 interface NewAccessModalProps {
@@ -35,7 +35,9 @@ const NewAccessModal = ({ close, isOpen }: NewAccessModalProps) => {
     return (
           <Modal open={isOpen} onClose={close}>
               <Box sx={{...modalStyle}}>
-                  <h2>Access...</h2>
+                  <Typography>
+                      <h2>Access...</h2>
+                  </Typography>
                   {errorMessage}
                   <form onSubmit={newAccessForm.handleSubmit}>
                       <TextField
diff --git a/agent/agentUi/src/NewShareModal.tsx b/agent/agentUi/src/NewShareModal.tsx
index 37911042..e14b2b77 100644
--- a/agent/agentUi/src/NewShareModal.tsx
+++ b/agent/agentUi/src/NewShareModal.tsx
@@ -1,7 +1,7 @@
 import {useFormik} from "formik";
 import {GetAgentApi} from "./model/api.ts";
 import {useState} from "react";
-import {Box, Button, Checkbox, FormControlLabel, MenuItem, Modal, TextField} from "@mui/material";
+import {Box, Button, Checkbox, FormControlLabel, MenuItem, Modal, TextField, Typography} from "@mui/material";
 import {modalStyle} from "./model/theme.ts";
 
 interface NewShareModalProps {
@@ -54,7 +54,9 @@ const NewShareModal = ({ close, isOpen }: NewShareModalProps) => {
     return (
         <Modal open={isOpen} onClose={close}>
             <Box sx={{ ...modalStyle }}>
-                <h2>Share...</h2>
+                <Typography>
+                    <h2>Share...</h2>
+                </Typography>
                 {errorMessage}
                 <form onSubmit={form.handleSubmit}>
                     <TextField
diff --git a/agent/agentUi/src/Overview.tsx b/agent/agentUi/src/Overview.tsx
index baffb4e9..c328482c 100644
--- a/agent/agentUi/src/Overview.tsx
+++ b/agent/agentUi/src/Overview.tsx
@@ -1,5 +1,5 @@
 import {AgentObject} from "./model/overview.ts";
-import {Card, Grid2} from "@mui/material";
+import {Box, Card, Grid2, Typography} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import LanIcon from "@mui/icons-material/Lan";
 import ShareCard from "./ShareCard.tsx";
@@ -7,9 +7,11 @@ import AccessCard from "./AccessCard.tsx";
 
 interface OverviewProps {
     overview: Array<AgentObject>;
+    shareClick: () => void;
+    accessClick: () => void;
 }
 
-const Overview = ({ overview }: OverviewProps) => {
+const Overview = ({ overview, shareClick, accessClick }: OverviewProps) => {
     let cards = [];
     if(overview.length > 0) {
         overview.forEach(row => {
@@ -26,7 +28,12 @@ const Overview = ({ overview }: OverviewProps) => {
     } else {
         cards.push(<Grid2 size={{ xs: 12 }}>
             <Card key="empty">
-                <h5>zrok Agent is empty! Add a <a href={"#"}>share <ShareIcon /></a> or <a href={"#"}>access <LanIcon /></a> share to get started.</h5>
+                <Box sx={{ p: 2, textAlign: "center" }}>
+                    <Typography variant="h6" component="div">
+                        zrok Agent is empty! Add a <a href={"#"} onClick={shareClick}>share <ShareIcon/></a> or <a
+                        href={"#"} onClick={accessClick}>access <LanIcon/></a> share to get started.
+                    </Typography>
+                </Box>
             </Card>
         </Grid2>);
     }