Implement Radix's Dialog component for the About modal.

Probably still want to spend some time making this look nice/wordsmithing the copy later.

components/AboutModal/index.scss

@@ -1,10 +1,22 @@
-.AboutModal p {
+.About.Dialog {
-    font-size: $font-regular;
+    width: $unit * 60;
-    line-height: 1.24;
-    margin: 0;
-    margin-bottom: $unit * 2;
 
-    &:last-of-type {
+    section {
-        margin-bottom: 0;
+        margin-bottom: $unit * 4;
+
+        h2 {
+            margin-bottom: $unit * 3;
+        }
+    }
+
+    .DialogDescription p {
+        font-size: $font-regular;
+        line-height: 1.24;
+        margin: 0;
+        margin-bottom: $unit * 2;
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
     }
 }

components/AboutModal/index.tsx

@@ -1,35 +1,42 @@
 import React from 'react'
-import { createPortal } from 'react-dom'
+import * as Dialog from '@radix-ui/react-dialog'
-import api from '~utils/api'
-
-import Modal from '~components/Modal'
-import Overlay from '~components/Overlay'
 
+import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props {
+const AboutModal = () => {
-    close: () => void
-}
-
-const AboutModal = (props: Props) => {
     return (
-        createPortal(
+        <Dialog.Root>
-            <div>
+            <Dialog.Trigger asChild>
-                <Modal 
+                <li className="MenuItem">About</li>
-                    title="About"
+            </Dialog.Trigger>
-                    styleName="AboutModal"
+            <Dialog.Portal>
-                    close={ () => {} }
+                <Dialog.Content className="About Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
-                >
+                    <div className="DialogHeader">
-                    <div>
+                        <Dialog.Title className="DialogTitle">About</Dialog.Title>
-                        <p>Siero is a tool to save and share parties for <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a></p>
+                        <Dialog.Close className="DialogClose" asChild>
-                        <p>All you need to do to get started is start adding things. Siero will make a URL and you can share your party with the world.</p>
+                            <span>
-                        <p>If you want to save your parties for safe keeping or to edit them later, you can make a free account.</p>
+                                <CrossIcon />
+                            </span>
+                        </Dialog.Close>
                     </div>
-                </Modal>
+                    <Dialog.Description className="DialogDescription">
-                <Overlay onClick={props.close} />
+                        <p>Granblue.team is a tool to save and share team compositions for <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a></p>
-            </div>,
+                        <p>Start adding things to a team and a URL will be created for you to share it wherever you like, no account needed.</p>
-            document.body
+                        <p>You can make an account to save any teams you find for future reference, or to keep all of your teams together in one place.</p>
-        )
+                    </Dialog.Description>
+                    <Dialog.Title className="DialogTitle">Credits</Dialog.Title>
+                    <Dialog.Description className="DialogDescription">
+                        <p>Granblue.team was built by <a href="https://twitter.com/jedmund">@jedmund</a> with a lot of help from <a href="https://twitter.com/lalalalinna">@lalalalinna</a> and <a href="https://twitter.com/tarngerine">@tarngerine</a>.</p>
+                    </Dialog.Description>
+                    <Dialog.Title className="DialogTitle">Open Source</Dialog.Title>
+                    <Dialog.Description className="DialogDescription">
+                        <p>This app is open source. You can contribute on Github.</p>
+                    </Dialog.Description>
+                </Dialog.Content>
+                <Dialog.Overlay className="Overlay" />
+            </Dialog.Portal>
+        </Dialog.Root>
     )
 }
 

components/BottomHeader/index.tsx

@@ -30,11 +30,6 @@ 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...")

components/HeaderMenu/index.tsx

@@ -46,10 +46,7 @@ const HeaderMenu = (props: Props) => {
                         </li>
                     </div>
                     <div className="MenuGroup">
-                        <li className="MenuItem" onClick={openAboutModal}>About</li>
+                        <AboutModal />
-                        {aboutOpen ? (
-                            <AboutModal close={closeAboutModal} />
-                        ) : null}
                         <li className="MenuItem">Settings</li>
                         <li className="MenuItem" onClick={props.logout}>Logout</li>
                     </div>
@@ -62,10 +59,7 @@ const HeaderMenu = (props: Props) => {
         return (
             <ul className="Menu unauth">
                 <div className="MenuGroup">
-                    <li className="MenuItem" onClick={openAboutModal}>About</li>
+                    <AboutModal />
-                    {aboutOpen ? (
-                        <AboutModal close={closeAboutModal} />
-                    ) : null}
                 </div>
                 <div className="MenuGroup">
                         <li className="MenuItem">

styles/globals.scss

@@ -69,12 +69,13 @@ h1 {
 }
 
 .Dialog {
-    animation: 150ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;
+    animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running openModal;
     background: white;
     border-radius: $unit;
     display: flex;
     flex-direction: column;
     gap: $unit * 3;
+    height: auto;
     min-width: $unit * 48;
     min-height: $unit * 12;
     padding: $unit * 3;
@@ -84,8 +85,31 @@ h1 {
     transform: translate(-50%, -50%);
     z-index: 21;
 
+    .DialogHeader {
+        display: flex;
+    }
+
+    .DialogClose {
+        background: transparent;
+        height: 21px;
+        width: 21px;
+
+        &:hover {
+            cursor: pointer;
+            
+            svg {
+                fill: $grey-00;
+            }
+        }
+
+        svg {
+            fill: $grey-10;
+        }
+    }
+
     .DialogTitle {
         font-size: $font-large;
+        flex-grow: 1;
     }
 
     .DialogDescription {
@@ -99,3 +123,15 @@ h1 {
     }
 }
 
+@keyframes openModal {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+
+    100% {
+        // opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+