responsive layout improvements (#221)

This commit is contained in:
Michael Quigley 2024-10-29 11:34:29 -04:00
parent c84b2a39e7
commit 9a12ab4661
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 12 additions and 6 deletions

View File

@ -14,7 +14,7 @@ const AccessCard = (props) => {
<p>
{props.access.token} &rarr; {props.access.bindAddress}
</p>
<Button variant="outlined" onClick={deleteHandler}><DeleteIcon /></Button>
<Button variant="contained" onClick={deleteHandler}><DeleteIcon /></Button>
</Card>
);
}

View File

@ -1,4 +1,4 @@
import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material";
import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import LanIcon from "@mui/icons-material/Lan";
import ShareIcon from "@mui/icons-material/Share";
@ -16,11 +16,17 @@ const NavBar = (props) => {
>
<MenuIcon/>
</IconButton>
<Typography variant="p" component={"div"} sx={{flexGrow: 1}}>
<Typography variant="p" component={"div"} sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "block" }}>
zrok Agent { props.version !== "" ? " | " + props.version : ""}
</Typography>
<Button color="inherit" onClick={props.shareClick}><ShareIcon /></Button>
<Button color="inherit" onClick={props.accessClick}><LanIcon /></Button>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="right" size="grow">
<Button color="inherit" onClick={props.shareClick}><ShareIcon /></Button>
</Grid2>
<Grid2 display="flex" justifyContent="right">
<Button color="inherit" onClick={props.accessClick}><LanIcon /></Button>
</Grid2>
</Grid2>
</Toolbar>
</AppBar>
)

View File

@ -20,7 +20,7 @@ const ShareCard = (props) => {
({props.share.shareMode}, {props.share.backendMode}) <br/>
{props.share.backendEndpoint} &rarr; {frontends} <br/>
</p>
<Button variant="outlined" onClick={deleteHandler} ><DeleteIcon /></Button>
<Button variant="contained" onClick={deleteHandler} ><DeleteIcon /></Button>
</Card>
);
}