feat(nui): Add markdown support to text ui

Also changed the font to be a monospaced font, avoids weird alignment issues

web/package.json

@@ -5,26 +5,27 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^1.8.6",
-    "@emotion/react": "11",
-    "@emotion/styled": "11",
-    "@fortawesome/fontawesome-svg-core": "^6.1.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.0",
-    "@fortawesome/free-regular-svg-icons": "^6.1.0",
-    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.24",
-    "@types/node": "^16.11.18",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "framer-motion": "6",
+    "@types/node": "^16.11.26",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "framer-motion": "^6.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.1",
     "react-scripts": "5.0.0",
-    "typescript": "^4.5.5",
-    "web-vitals": "^2.1.3"
+    "typescript": "^4.6.3",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "cross-env PUBLIC_URL=/ craco start",
@@ -52,8 +53,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": ">=7.0.0 <8.0.0",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@craco/craco": "^6.4.3",
+    "@testing-library/dom": "^8.11.4",
+    "autoprefixer": "^10.0.2",
     "cross-env": "^7.0.3",
+    "postcss": "^8.1.0",
     "rimraf": "^3.0.2"
   }
 }

web/src/components/TextUI.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useNuiEvent } from "../hooks/useNuiEvent";
 import { Box, Flex, ScaleFade, Text } from "@chakra-ui/react";
 import { debugData } from "../utils/debugData";
+import ReactMarkdown from "react-markdown";
 
 interface Props {
   text: string;
@@ -13,7 +14,7 @@ debugData([
   {
     action: "textUi",
     data: {
-      text: "[E] - Access locker inventory",
+      text: "[E] - Access locker inventory \n [G] - Do something else  \n ",
       position: "right-center",
     },
   },
@@ -53,11 +54,14 @@ const TextUI: React.FC = () => {
           bg="gray.700"
           boxShadow="lg"
           p={3}
-          fontFamily="Poppins"
+          fontFamily="DM Mono"
           style={data.style}
           borderRadius="md"
+          maxW="xs"
         >
-          <Text>{data.text}</Text>
+          <Text>
+            <ReactMarkdown>{data.text}</ReactMarkdown>
+          </Text>
         </Box>
       </ScaleFade>
     </Flex>

web/src/index.css

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
 
 body {
   background: none !important;