Implement Radix's Alert dialog for deleting teams

We didn't implement the method for actually doing the deleting yet, though

components/BottomHeader/index.tsx

@@ -1,13 +1,17 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { MouseEventHandler, useContext, useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
 
 import AppContext from '~context/AppContext'
 
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+
 import Header from '~components/Header'
 import Button from '~components/Button'
 
 import { ButtonType } from '~utils/enums'
+import CrossIcon from '~public/icons/Cross.svg'
+
 
 const BottomHeader = () => {
     const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
@@ -26,6 +30,16 @@ const BottomHeader = () => {
         }
     }, [cookies, setUsername, setAuthenticated])
 
+    function closeModal() {
+        const escape = new KeyboardEvent('keydown', {'key': 'Escape'})
+        document.dispatchEvent(escape)
+    }
+
+    function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+        // TODO: Implement deleting teams
+        console.log("Deleting team...")
+    }
+
     const leftNav = () => {
         return (
             <Button icon="edit" click={() => {}}>Add more info</Button>
@@ -33,13 +47,35 @@ const BottomHeader = () => {
     }
 
     const rightNav = () => {
-        return (
+        if (editable && router.route === '/p/[party]') {
-            <div>
+            return (
-                { (editable && router.route === '/p/[party]') ?
+                <AlertDialog.Root>
-                    <Button icon="cross" type={ButtonType.Destructive} click={() => {}}>Delete team</Button> : ''
+                <AlertDialog.Trigger className="Button destructive">
-                }
+                    <span className='icon'>
-            </div>
+                        <CrossIcon />
-        )
+                    </span>
+                    <span className="text">Delete team</span>
+                </AlertDialog.Trigger>
+                <AlertDialog.Portal>
+                <AlertDialog.Overlay className="Overlay" onClick={(e) => closeModal()} />
+                <AlertDialog.Content className="Dialog">
+                    <AlertDialog.Title className="DialogTitle">
+                        Delete team
+                    </AlertDialog.Title>
+                    <AlertDialog.Description className="DialogDescription">
+                        Are you sure you want to permanently delete this team?
+                    </AlertDialog.Description>
+                    <div className="actions">
+                        <AlertDialog.Cancel className="Button modal">Nevermind</AlertDialog.Cancel>
+                        <AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>Yes, delete</AlertDialog.Action>
+                    </div>
+                </AlertDialog.Content>
+                </AlertDialog.Portal>
+            </AlertDialog.Root>
+            )
+        } else {
+            return (<div />)
+        }
     }
         
             

components/Button/index.scss

@@ -34,6 +34,18 @@
         }
     }
 
+    &.modal:hover {
+        background: $grey-90;
+    }
+
+    &.modal.destructive {
+        color: $error;
+        
+        &:hover {
+            color: darken($error, 10)
+        }
+    }
+
     .icon {
         margin-top: 2px;
         

components/Overlay/index.scss

@@ -1,12 +1,12 @@
-.Overlay {
+// .Overlay {
-    background: black;
+//     background: black;
-    position: absolute;
+//     position: absolute;
-    opacity: 0.28;
+//     opacity: 0.28;
 
-    height: 100%;
+//     height: 100%;
-    width: 100%;
+//     width: 100%;
 
-    top: 0;
+//     top: 0;
-    left: 0;
+//     left: 0;
-    z-index: 2;
+    
-}
+// }

package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "grid-web",
       "dependencies": {
+        "@radix-ui/react-alert-dialog": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.5",
         "@radix-ui/react-dropdown-menu": "^0.1.4",
         "@radix-ui/react-hover-card": "^0.1.3",
@@ -2284,6 +2285,24 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-0.1.5.tgz",
+      "integrity": "sha512-Lq9h3GSvw752e7dFll3UWvm4uWiTlYAXLFX6wr/VQPRoa7XaQO8/1NBu4ikLHAecGEd/uDGZLY3aP7ovGPQYtg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-dialog": "0.1.5",
+        "@radix-ui/react-primitive": "0.1.3",
+        "@radix-ui/react-slot": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz",
@@ -8284,6 +8303,20 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-alert-dialog": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-0.1.5.tgz",
+      "integrity": "sha512-Lq9h3GSvw752e7dFll3UWvm4uWiTlYAXLFX6wr/VQPRoa7XaQO8/1NBu4ikLHAecGEd/uDGZLY3aP7ovGPQYtg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-dialog": "0.1.5",
+        "@radix-ui/react-primitive": "0.1.3",
+        "@radix-ui/react-slot": "0.1.2"
+      }
+    },
     "@radix-ui/react-arrow": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz",

package.json

@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^0.1.5",
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@radix-ui/react-hover-card": "^0.1.3",

pages/p/[party].tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import Party from '~components/Party'
+import * as AlertDialog  from '@radix-ui/react-alert-dialog'
 
 const PartyRoute: React.FC = () => {
     const router = useRouter()

styles/globals.scss

@@ -11,7 +11,7 @@ body {
     font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
     height: 100vh;
-    padding: $unit * 2;
+    padding: $unit * 2 !important;
     
     &.no-scroll {
         overflow: hidden;
@@ -58,3 +58,44 @@ h1 {
 
 }
 
+.Overlay {
+    background: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+}
+
+.Dialog {
+    animation: 150ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;
+    background: white;
+    border-radius: $unit;
+    display: flex;
+    flex-direction: column;
+    gap: $unit * 3;
+    min-width: $unit * 48;
+    min-height: $unit * 12;
+    padding: $unit * 3;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 21;
+
+    .DialogTitle {
+        font-size: $font-large;
+    }
+
+    .DialogDescription {
+        flex-grow: 1;
+    }
+
+    .actions {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+    }
+}
+