From f346d2ad9964a510379b9910a1621f35f6aaf0f5 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Fri, 25 Mar 2022 23:56:50 +0100
Subject: [PATCH] refactor(nui): Context menu style adjustments

---
 web/src/components/ContextMenu.tsx | 173 ++++++++++++++++-------------
 web/src/components/TextUI.tsx      |   1 +
 web/src/index.css                  |   1 +
 3 files changed, 98 insertions(+), 77 deletions(-)

diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
index 6c84346..d62fa3d 100644
--- a/web/src/components/ContextMenu.tsx
+++ b/web/src/components/ContextMenu.tsx
@@ -2,6 +2,7 @@ import { useNuiEvent } from "../hooks/useNuiEvent";
 import {
   Box,
   Text,
+  Flex,
   Popover,
   PopoverTrigger,
   Portal,
@@ -41,6 +42,16 @@ debugData<Props>([
           description: "Even cooler vehicle",
           metadata: ["Plate: JGM 971", "Status: In garage"],
         },
+        ["Burger"]: {
+          description: "Make a delicious burger",
+          metadata: {
+            ["Bun"]: 3,
+            ["Lettuce"]: 2,
+            ["Meat"]: 1,
+            ["Tomato"]: 1,
+            ["Cheese"]: 2,
+          },
+        },
       },
     },
   },
@@ -59,89 +70,97 @@ const ContextMenu: React.FC = () => {
   });
 
   return (
-    <Box
+    <Flex
       position="absolute"
-      w="xs"
-      h="fit-content"
-      maxH="20rem"
-      top="20%"
-      right="25%"
+      w="75%"
+      h="80%"
+      justifyContent="flex-end"
+      alignItems="center"
     >
-      <Box borderRadius="md" bg="gray.700" mb={3}>
-        <Text
-          fontFamily="Poppins"
-          fontSize="md"
-          p={2}
-          textAlign="center"
-          fontWeight="light"
-        >
-          {contextMenu.title}
-        </Text>
-      </Box>
-      <Box maxH="33rem" overflowY="scroll">
-        {Object.entries(contextMenu.options).map((option, index) => (
-          <Popover
-            placement="right-start"
-            trigger="hover"
-            eventListeners={{ scroll: true }}
-            isLazy
+      <Box w="xs" h={580}>
+        <Box borderRadius="md" bg="gray.800" mb={3}>
+          <Text
+            fontFamily="Poppins"
+            fontSize="md"
+            p={2}
+            textAlign="center"
+            fontWeight="light"
           >
-            <PopoverTrigger>
-              <Box
-                bg="gray.700"
-                borderRadius="md"
-                h="fit-content"
-                w="100%"
-                p={2}
-                mb={1}
-                fontFamily="Poppins"
-                fontSize="md"
-                transition="300ms"
-                _hover={{ bg: "gray.800" }}
-                key={`option-${index}`}
-              >
-                {/* TODO: react-markdown (?) */}
-                <Box paddingBottom={1}>
-                  <Text w="100%" fontWeight="medium">
-                    {option[0]}
-                  </Text>
-                </Box>
-                {option[1].description && (
+            {contextMenu.title}
+          </Text>
+        </Box>
+        <Box maxH={560} overflowY="scroll">
+          {Object.entries(contextMenu.options).map((option, index) => (
+            <Popover
+              placement="right-start"
+              trigger="hover"
+              eventListeners={{ scroll: true }}
+              isLazy
+            >
+              <PopoverTrigger>
+                <Box
+                  bg="gray.800"
+                  borderRadius="md"
+                  h="fit-content"
+                  w="100%"
+                  p={2}
+                  mb={1}
+                  fontFamily="Poppins"
+                  fontSize="md"
+                  transition="300ms"
+                  _hover={{ bg: "gray.700" }}
+                  key={`option-${index}`}
+                >
+                  {/* TODO: react-markdown (?) */}
                   <Box paddingBottom={1}>
-                    <Text>{option[1].description}</Text>
+                    <Text w="100%" fontWeight="medium">
+                      {option[0]}
+                    </Text>
                   </Box>
-                )}
-                <Portal>
-                  <PopoverContent fontFamily="Poppins" bg="gray.800">
-                    <PopoverBody>
-                      {option[1]?.metadata &&
-                      Array.isArray(option[1].metadata) ? (
-                        option[1].metadata.map((metadata: string, index) => (
-                          <Text key={`context-metadata-${index}`}>
-                            {metadata}
-                          </Text>
-                        ))
-                      ) : (
-                        <>
-                          {typeof option[1].metadata === "object" &&
-                            Object.entries(option[1].metadata).map(
-                              (metadata: { [key: string]: any }, index) => (
-                                <Text key={`context-metadata-${index}`}>
-                                  {metadata[0]}: {metadata[1]}
-                                </Text>
-                              )
-                            )}
-                        </>
-                      )}
-                    </PopoverBody>
-                  </PopoverContent>
-                </Portal>
-              </Box>
-            </PopoverTrigger>
-          </Popover>
-        ))}
+                  {option[1].description && (
+                    <Box paddingBottom={1}>
+                      <Text>{option[1].description}</Text>
+                    </Box>
+                  )}
+                  <Portal>
+                    <PopoverContent
+                      fontFamily="Poppins"
+                      bg="gray.800"
+                      outline="none"
+                      border="none"
+                      w="fit-content"
+                      maxW="2xs"
+                    >
+                      <PopoverBody>
+                        {option[1]?.metadata &&
+                        Array.isArray(option[1].metadata) ? (
+                          option[1].metadata.map((metadata: string, index) => (
+                            <Text key={`context-metadata-${index}`}>
+                              {metadata}
+                            </Text>
+                          ))
+                        ) : (
+                          <>
+                            {typeof option[1].metadata === "object" &&
+                              Object.entries(option[1].metadata).map(
+                                (metadata: { [key: string]: any }, index) => (
+                                  <Text key={`context-metadata-${index}`}>
+                                    {metadata[0]}: {metadata[1]}
+                                  </Text>
+                                )
+                              )}
+                          </>
+                        )}
+                      </PopoverBody>
+                    </PopoverContent>
+                  </Portal>
+                </Box>
+              </PopoverTrigger>
+            </Popover>
+          ))}
+        </Box>
       </Box>
-    </Box>
+    </Flex>
   );
 };
 
diff --git a/web/src/components/TextUI.tsx b/web/src/components/TextUI.tsx
index 11f711f..0278fe2 100644
--- a/web/src/components/TextUI.tsx
+++ b/web/src/components/TextUI.tsx
@@ -38,6 +38,7 @@ const TextUI: React.FC = () => {
       w="100%"
       h="100%"
       p={3}
+      position="absolute"
       alignItems={data.position === "top-center" ? "baseline" : "center"}
       justifyContent={
         data.position === "right-center"
diff --git a/web/src/index.css b/web/src/index.css
index f54aa11..b093f6f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -12,6 +12,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
   user-select: none;
+  overflow: hidden !important;
 }
 
 #root {