From 679710efc317111962d0dfb3dc89ab3bace7b855 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Feb 2022 20:43:02 -0800 Subject: [PATCH] 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 | 52 ++++++++++++++++++++++++++----- components/Button/index.scss | 12 +++++++ components/Overlay/index.scss | 20 ++++++------ package-lock.json | 33 ++++++++++++++++++++ package.json | 1 + pages/p/[party].tsx | 1 + styles/globals.scss | 43 ++++++++++++++++++++++++- 7 files changed, 143 insertions(+), 19 deletions(-) diff --git a/components/BottomHeader/index.tsx b/components/BottomHeader/index.tsx index e850489b..8eca6768 100644 --- a/components/BottomHeader/index.tsx +++ b/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) { + // TODO: Implement deleting teams + console.log("Deleting team...") + } + const leftNav = () => { return ( @@ -33,13 +47,35 @@ const BottomHeader = () => { } const rightNav = () => { - return ( -
- { (editable && router.route === '/p/[party]') ? - : '' - } -
- ) + if (editable && router.route === '/p/[party]') { + return ( + + + + + + Delete team + + + closeModal()} /> + + + Delete team + + + Are you sure you want to permanently delete this team? + +
+ Nevermind + deleteTeam(e)}>Yes, delete +
+ + + + ) + } else { + return (
) + } } diff --git a/components/Button/index.scss b/components/Button/index.scss index 6bd0fdde..666d1800 100644 --- a/components/Button/index.scss +++ b/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; diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss index 1895992e..2c6a0aa2 100644 --- a/components/Overlay/index.scss +++ b/components/Overlay/index.scss @@ -1,12 +1,12 @@ -.Overlay { - background: black; - position: absolute; - opacity: 0.28; +// .Overlay { +// background: black; +// position: absolute; +// opacity: 0.28; - height: 100%; - width: 100%; +// height: 100%; +// width: 100%; - top: 0; - left: 0; - z-index: 2; -} \ No newline at end of file +// top: 0; +// left: 0; + +// } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5d16aaeb..508d58de 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 898e39c7..8cdf5796 100644 --- a/package.json +++ b/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", diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index a317520c..e43e2b07 100644 --- a/pages/p/[party].tsx +++ b/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() diff --git a/styles/globals.scss b/styles/globals.scss index 05115da2..75f34903 100644 --- a/styles/globals.scss +++ b/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%; + } +} +