style: font

This commit is contained in:
Cody Bender 2024-08-08 22:45:56 -04:00
parent 956c84c17e
commit aa794637d1
3 changed files with 44 additions and 14 deletions

View File

@ -1,10 +1,20 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head>
<meta charset="utf-8"> <head>
<title><%= title %></title> <meta charset="utf-8" />
</head> <title>
<body> <%= title %>
<div id="root"></div> </title>
</body> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet" />
</head>
<body>
<div id="root"></div>
</body>
</html> </html>

View File

@ -32,9 +32,18 @@ const useStyles = makeStyles((theme) => ({
listItem: { listItem: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
backgroundColor: theme.palette.background.default,
},
selected: {
backgroundColor: theme.palette.background.secondary, backgroundColor: theme.palette.background.secondary,
}, },
itemText: {
fontFamily: '"DM Mono", monospace',
fontWeight: 400,
},
icon: { icon: {
minWidth: 40, minWidth: 40,
color: theme.palette.grey[500], color: theme.palette.grey[500],
@ -68,7 +77,7 @@ const Sidebar = ({ modules: { services, settings } }) => {
selected={isSelected(path)} selected={isSelected(path)}
key={path} key={path}
onClick={() => history.push(path)} onClick={() => history.push(path)}
className={classes.listItem} classes={{ root: classes.listItem, selected: classes.selected }}
> >
<ListItemIcon classes={{ root: classes.icon }}> <ListItemIcon classes={{ root: classes.icon }}>
<Icon <Icon
@ -78,7 +87,10 @@ const Sidebar = ({ modules: { services, settings } }) => {
)} )}
/> />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={title.toUpperCase()} /> <ListItemText
primary={title.toUpperCase()}
classes={{ primary: classes.itemText }}
/>
</ListItem> </ListItem>
))} ))}
</List> </List>
@ -103,7 +115,10 @@ const Sidebar = ({ modules: { services, settings } }) => {
<ListItemIcon classes={{ root: classes.icon }}> <ListItemIcon classes={{ root: classes.icon }}>
<LinkIcon className={clsx(classes.icon)} /> <LinkIcon className={clsx(classes.icon)} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={title} /> <ListItemText
primary={title.toUpperCase()}
classes={{ primary: classes.itemText }}
/>
</ListItem> </ListItem>
); );
})} })}

View File

@ -39,6 +39,11 @@ const useStyles = makeStyles(() => ({
overflow: "hidden", overflow: "hidden",
flex: 1, flex: 1,
}, },
tabs: {
fontFamily: '"DM Mono", monospace',
fontWeight: 400,
},
})); }));
const Registry = () => { const Registry = () => {
@ -56,9 +61,9 @@ const Registry = () => {
onChange={(_, value) => setTab(value)} onChange={(_, value) => setTab(value)}
indicatorColor="primary" indicatorColor="primary"
> >
<Tab value={TAB_RECORDS} label="Records" /> <Tab value={TAB_RECORDS} label="Records" className={classes.tabs} />
<Tab value={TAB_LOOKUP} label="Lookup" /> <Tab value={TAB_LOOKUP} label="Lookup" className={classes.tabs} />
<Tab value={TAB_STATUS} label="Status" /> <Tab value={TAB_STATUS} label="Status" className={classes.tabs} />
{/* <Tab value={TAB_LOG} label='Log' /> */} {/* <Tab value={TAB_LOG} label='Log' /> */}
</Tabs> </Tabs>