Add pencil to edit group on contract page

web/components/contract/contract-details.tsx

@@ -188,18 +188,28 @@ export function ContractDetails(props: {
         ) : !groupToDisplay && !user ? (
           <div />
         ) : (
-          <Button
+          <Row>
-            size={'xs'}
+            <Button
-            className={'max-w-[200px]'}
+              size={'xs'}
-            color={'gray-white'}
+              className={'max-w-[200px] pr-1'}
-            onClick={() =>
+              color={'gray-white'}
-              groupToDisplay
+              onClick={() =>
-                ? Router.push(groupPath(groupToDisplay.slug))
+                groupToDisplay
-                : setOpen(!open)
+                  ? Router.push(groupPath(groupToDisplay.slug))
-            }
+                  : setOpen(!open)
-          >
+              }
-            {groupInfo}
+            >
-          </Button>
+              {groupInfo}
+            </Button>
+            <Button
+              size={'xs'}
+              className={'!px-2'}
+              color={'gray-white'}
+              onClick={() => setOpen(!open)}
+            >
+              <PencilIcon className="inline h-5 w-5 shrink-0" />
+            </Button>
+          </Row>
         )}
       </Row>
       <Modal open={open} setOpen={setOpen} size={'md'}>