feat(ui): Use JetBrains Mono

Hypfer · Feb 28, 2022 · 5a7045c · 5a7045c
1 parent 374f00c
commit 5a7045c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -32,7 +32,8 @@
   "dependencies": {
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@fontsource/roboto": "4.5.1",
+    "@fontsource/jetbrains-mono": "4.5.3",
+    "@fontsource/roboto": "4.5.3",
     "@mui/material": "5.2.0",
     "@mui/icons-material": "5.2.0",
     "@mui/lab": "5.0.0-alpha.48",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -12,6 +12,7 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
+import "@fontsource/jetbrains-mono/200.css";
 
 const queryClient = new QueryClient();
 

diff --git a/frontend/src/components/LogViewer.module.css b/frontend/src/components/LogViewer.module.css
@@ -31,7 +31,8 @@
 }
 
 .content {
-    font-family: monospace;
+    font-family: "JetBrains Mono",monospace;
+    font-weight: 200;
     white-space: pre-wrap;
     width: 100%;
     overflow-wrap: anywhere;

diff --git a/frontend/src/settings/connectivity/MQTTConnectivity.tsx b/frontend/src/settings/connectivity/MQTTConnectivity.tsx
@@ -628,7 +628,7 @@ const MQTTConnectivity = (): JSX.Element => {
                         <br/>
                         <Typography variant="subtitle2" sx={{mt: 1}} noWrap={false}>
                             The MQTT Topic structure will look like this:<br/>
-                            <span style={{fontFamily: "monospace", overflowWrap: "anywhere"}}>
+                            <span style={{fontFamily: "\"JetBrains Mono\",monospace", fontWeight: 200, overflowWrap: "anywhere"}}>
                                 <span style={{
                                     color: theme.palette.warning.main
                                 }} ref={topicElement}>

diff --git a/package-lock.json b/package-lock.json