trigger modal

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -428,16 +428,15 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
           <>
             <Heading isAtTop={true}>Permission groups</Heading>
             <Helper>Manage permission groups for your organization.</Helper>
-            <PermissionGroup>Admin</PermissionGroup>
-            <PermissionGroup>Developer</PermissionGroup>
-            <PermissionGroup>Viewer</PermissionGroup>
+            <PermissionGroup name="Admin" />
+            <PermissionGroup name="Developer" />
+            <PermissionGroup name="Viewer" />
             <Spacer y={0.4} />
             <Button alt>
               <I className="material-icons">add</I>
               New group
             </Button>
             <Spacer y={1.7} />
-            <RoleModal />
           </>
         )}
         <Heading isAtTop={true}>Share project</Heading>
@@ -499,6 +498,7 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
           </Placeholder>
         )
       )}
+      <Spacer y={2} />
     </>
   );
 };
@@ -510,19 +510,6 @@ const I = styled.i`
   font-size: 18px;
 `;
 
-const Group = styled.div`
-  display: inline-block;
-  border-radius: 5px;
-  margin-right: 10px;
-  cursor: pointer;
-  font-size: 13px;
-  padding: 7px 10px;
-  background: ${({ theme }) => theme.clickable.bg};
-  border: 1px solid ${({ theme }) => theme.border};
-  width: fit-content;
-  margin-bottom: 15px;
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;

dashboard/src/main/home/project-settings/PermissionGroup.tsx

@@ -1,27 +1,49 @@
-import React from "react";
-
-import Container from "components/porter/Container";
-import Image from "components/porter/Image";
-import Input from "components/porter/Input";
-import Modal from "components/porter/Modal";
-import Spacer from "components/porter/Spacer";
-import Text from "components/porter/Text";
+import React, { useState } from "react";
+import styled from "styled-components";
 
 import role from "assets/role.svg";
 
 import RoleModal from "./RoleModal";
 
 type PermissionGroupProps = {
-  foo?: boolean;
+  name: string;
 };
 
-const PermissionGroup: React.FC<PermissionGroupProps> = ({ foo }) => {
+const PermissionGroup: React.FC<PermissionGroupProps> = ({ name }) => {
+  const [showModal, setShowModal] = useState(false);
+
   return (
     <>
-      foo
-      <RoleModal />
+      <StyledPermissionGroup
+        onClick={() => {
+          setShowModal(true);
+        }}
+      >
+        {name}
+      </StyledPermissionGroup>
+      {showModal && (
+        <RoleModal
+          name={name}
+          closeModal={() => {
+            setShowModal(false);
+          }}
+        />
+      )}
     </>
   );
 };
 
 export default PermissionGroup;
+
+const StyledPermissionGroup = styled.div`
+  display: inline-block;
+  border-radius: 5px;
+  margin-right: 10px;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 7px 10px;
+  background: ${({ theme }) => theme.clickable.bg};
+  border: 1px solid ${({ theme }) => theme.border};
+  width: fit-content;
+  margin-bottom: 15px;
+`;

dashboard/src/main/home/project-settings/RoleModal.tsx

@@ -10,12 +10,13 @@ import Text from "components/porter/Text";
 import role from "assets/role.svg";
 
 type RoleModalProps = {
-  foo?: boolean;
+  name: string;
+  closeModal: () => void;
 };
 
-const RoleModal: React.FC<RoleModalProps> = ({ foo }) => {
+const RoleModal: React.FC<RoleModalProps> = ({ name, closeModal }) => {
   return (
-    <Modal closeModal={() => {}} width={"800px"}>
+    <Modal closeModal={closeModal} width={"800px"}>
       <Container row>
         <Image src={role} />
         <Spacer inline x={1} />
@@ -25,7 +26,7 @@ const RoleModal: React.FC<RoleModalProps> = ({ foo }) => {
       <Input
         placeholder="ex: admin"
         width="300px"
-        value="Admin"
+        value={name}
         setValue={() => {}}
       />
       <Spacer y={1} />