Fix Roadmap modal

components/RoadmapModal/index.scss

@@ -1,15 +1,15 @@
-.Roadmap.Dialog {
-  max-height: 60vh;
-  overflow-y: scroll;
+.Roadmap.DialogContent {
+  gap: 0;
+  padding-bottom: $unit-2x;
 
-  .top {
-    display: flex;
-    flex-direction: column;
-    gap: $unit;
+  .DialogHeader {
+    padding: $unit-4x;
+  }
 
   h3.priority {
     font-weight: $medium;
     font-size: $font-large;
+    margin-bottom: $unit-4x;
 
     &.in_progress {
       color: $yellow;
@@ -28,6 +28,18 @@
     }
   }
 
+  & > div:not(.DialogHeader) {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-2x;
+    padding: 0 $unit-4x;
+
+    section.notes {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+      margin-bottom: $unit-2x;
+
       p {
         margin-bottom: $unit;
       }
@@ -79,12 +91,6 @@
       }
     }
 
-  .Separator {
-    background: var(--separator-bg);
-    border-radius: 2px;
-    margin: $unit-3x 0;
-    height: 2px;
-  }
     p {
       color: var(--text-secondary);
 
@@ -92,7 +98,7 @@
       line-height: 1.3;
     }
 
-  .notes {
+    ul {
       color: var(--text-primary);
       list-style-type: none;
 
@@ -113,3 +119,4 @@
       }
     }
   }
+}

components/RoadmapModal/index.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
-import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Dialog,
+  DialogClose,
+  DialogTitle,
+  DialogTrigger,
+} from '~components/Dialog'
+import DialogContent from '~components/DialogContent'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import ShareIcon from '~public/icons/Share.svg'
@@ -13,29 +19,28 @@ const RoadmapModal = () => {
   const { t } = useTranslation('roadmap')
 
   return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
+    <Dialog>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('modals.roadmap.title')}</span>
         </li>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Content
-          className="Roadmap Dialog"
+      </DialogTrigger>
+      <DialogContent
+        className="Roadmap"
         onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={() => {}}
       >
         <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">{t('title')}</Dialog.Title>
-            <Dialog.Close className="DialogClose" asChild>
+          <DialogTitle className="DialogTitle">{t('title')}</DialogTitle>
+          <DialogClose className="DialogClose" asChild>
             <span>
               <CrossIcon />
             </span>
-            </Dialog.Close>
+          </DialogClose>
         </div>
 
-          <section>
-            <div className="top">
-              <h3 className="priority in_progress">{t('subtitle')}</h3>
+        <div>
+          <section className="notes">
             <p>{t('blurb')}</p>
             <p>{t('link.intro')}</p>
             <div className="LinkItem">
@@ -53,9 +58,11 @@ const RoadmapModal = () => {
                 </a>
               </Link>
             </div>
-            </div>
-            <div className="Separator" />
-            <ul className="notes">
+          </section>
+
+          <section className="features">
+            <h3 className="priority in_progress">{t('subtitle')}</h3>
+            <ul>
               <li>
                 <h4>{t('roadmap.item1.title')}</h4>
                 <p>{t('roadmap.item1.description')}</p>
@@ -82,10 +89,9 @@ const RoadmapModal = () => {
               </li>
             </ul>
           </section>
-        </Dialog.Content>
-        <Dialog.Overlay className="Overlay" />
-      </Dialog.Portal>
-    </Dialog.Root>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }