From f36188247ce0d00d46b9c8d8cf9a0d02b3b3c12a Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Sat, 9 Oct 2021 16:37:04 +0200
Subject: [PATCH] set up modal dialog in profile sections

---
 packages/design-system/src/index.ts        |   3 +
 packages/web/components/MegaMenu.tsx       |   8 ++
 packages/web/components/ProfileSection.tsx | 117 +++++++++++++--------
 3 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index bb0061cb..6855c14a 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -93,8 +93,11 @@ export {
   MenuItem,
   MenuList,
   Modal,
+  ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
+  ModalHeader,
   ModalOverlay,
   Select,
   SimpleGrid,
diff --git a/packages/web/components/MegaMenu.tsx b/packages/web/components/MegaMenu.tsx
index 9f6b077e..07629401 100644
--- a/packages/web/components/MegaMenu.tsx
+++ b/packages/web/components/MegaMenu.tsx
@@ -367,6 +367,14 @@ const PlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
             <MenuItem>View Profile</MenuItem>
           </MetaLink>
           <MenuItem onClick={disconnect}>Disconnect</MenuItem>
+
+          <MetaLink
+            color="black"
+            href="/profile/setup/username"
+            _hover={{ textDecoration: 'none' }}
+          >
+            <MenuItem>Edit Profile</MenuItem>
+          </MetaLink>
         </MenuList>
       </Menu>
     </Flex>
diff --git a/packages/web/components/ProfileSection.tsx b/packages/web/components/ProfileSection.tsx
index 7db49edf..5ab1473a 100644
--- a/packages/web/components/ProfileSection.tsx
+++ b/packages/web/components/ProfileSection.tsx
@@ -1,4 +1,19 @@
-import { Box, EditIcon, HStack, IconButton, Text } from '@metafam/ds';
+import {
+  Box,
+  Button,
+  EditIcon,
+  HStack,
+  IconButton,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from '@metafam/ds';
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
 
@@ -17,45 +32,65 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
   onRemoveClick,
   canEdit,
   displayEditButton,
-}) => (
-  <Box minW="72">
-    {title ? (
-      <Box bg="purpleProfileSection" borderTopRadius="lg" pt={5} pb={5}>
-        <HStack height={5} pr={4} pl={8}>
-          <Text fontSize="md" color="blueLight" as="div" mr="auto">
-            {title.toUpperCase()}
-          </Text>
-          {displayEditButton ? (
-            <IconButton
-              aria-label="Edit Profile Info"
-              size="lg"
-              background="transparent"
-              color="#A426A4"
-              icon={<EditIcon />}
-              _hover={{ color: 'white' }}
-              isRound
-            />
-          ) : null}
-          {canEdit ? (
-            <FaTimes
-              color="blueLight"
-              opacity="0.4"
-              cursor="pointer"
-              onClick={onRemoveClick}
-            />
-          ) : null}
-        </HStack>
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <Box minW="72">
+      {title ? (
+        <Box bg="purpleProfileSection" borderTopRadius="lg" pt={5} pb={5}>
+          <HStack height={5} pr={4} pl={8}>
+            <Text fontSize="md" color="blueLight" as="div" mr="auto">
+              {title.toUpperCase()}
+            </Text>
+            {displayEditButton ? (
+              <IconButton
+                aria-label="Edit Profile Info"
+                size="lg"
+                background="transparent"
+                color="#A426A4"
+                icon={<EditIcon />}
+                _hover={{ color: 'white' }}
+                onClick={onOpen}
+                isRound
+              />
+            ) : null}
+            {canEdit ? (
+              <FaTimes
+                color="blueLight"
+                opacity="0.4"
+                cursor="pointer"
+                onClick={onRemoveClick}
+              />
+            ) : null}
+          </HStack>
+        </Box>
+      ) : null}
+      <Box
+        bg="blueProfileSection"
+        borderBottomRadius="lg"
+        borderTopRadius={!title ? 'lg' : 0}
+        p={8}
+        boxShadow="md"
+        css={{ backdropFilter: 'blur(8px)' }}
+      >
+        {children}
       </Box>
-    ) : null}
-    <Box
-      bg="blueProfileSection"
-      borderBottomRadius="lg"
-      borderTopRadius={!title ? 'lg' : 0}
-      p={8}
-      boxShadow="md"
-      css={{ backdropFilter: 'blur(8px)' }}
-    >
-      {children}
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>LOL</ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+            <Button variant="ghost">Secondary Action</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </Box>
-  </Box>
-);
+  );
+};