Fix Roadmap modal

components/RoadmapModal/index.scss

@@ -1,114 +1,121 @@
-.Roadmap.Dialog {
+.Roadmap.DialogContent {
-  max-height: 60vh;
+  gap: 0;
-  overflow-y: scroll;
+  padding-bottom: $unit-2x;
 
-  .top {
+  .DialogHeader {
+    padding: $unit-4x;
+  }
+
+  h3.priority {
+    font-weight: $medium;
+    font-size: $font-large;
+    margin-bottom: $unit-4x;
+
+    &.in_progress {
+      color: $yellow;
+    }
+
+    &.high {
+      color: $red;
+    }
+
+    &.mid {
+      color: $orange-10;
+    }
+
+    &.low {
+      color: $blue;
+    }
+  }
+
+  & > div:not(.DialogHeader) {
     display: flex;
     flex-direction: column;
-    gap: $unit;
+    gap: $unit-2x;
+    padding: 0 $unit-4x;
 
-    h3.priority {
+    section.notes {
-      font-weight: $medium;
-      font-size: $font-large;
-
-      &.in_progress {
-        color: $yellow;
-      }
-
-      &.high {
-        color: $red;
-      }
-
-      &.mid {
-        color: $orange-10;
-      }
-
-      &.low {
-        color: $blue;
-      }
-    }
-
-    p {
-      margin-bottom: $unit;
-    }
-
-    .LinkItem {
-      $diameter: $unit-6x;
-      border: 1px solid var(--link-item-bg);
-      border-radius: $card-corner;
-
-      &:hover {
-        background-color: var(--link-item-bg);
-
-        svg {
-          fill: var(--link-item-image-color-hover);
-        }
-      }
-
-      a {
-        display: flex;
-        padding: $unit-2x;
-
-        &:hover {
-          text-decoration: none;
-        }
-
-        .Left {
-          align-items: center;
-          display: flex;
-          gap: $unit-2x;
-          flex-grow: 1;
-        }
-
-        svg {
-          fill: var(--link-item-image-color);
-          width: $diameter;
-          height: auto;
-
-          &.ShareIcon {
-            width: $unit-4x;
-          }
-        }
-      }
-
-      h3 {
-        font-weight: $bold;
-        max-width: 70%;
-        line-height: 1.3;
-      }
-    }
-  }
-
-  .Separator {
-    background: var(--separator-bg);
-    border-radius: 2px;
-    margin: $unit-3x 0;
-    height: 2px;
-  }
-  p {
-    color: var(--text-secondary);
-
-    font-size: $font-regular;
-    line-height: 1.3;
-  }
-
-  .notes {
-    color: var(--text-primary);
-    list-style-type: none;
-
-    li {
       display: flex;
       flex-direction: column;
       gap: $unit;
       margin-bottom: $unit-2x;
 
-      h4 {
+      p {
-        font-size: $font-medium;
+        margin-bottom: $unit;
-        font-weight: $bold;
       }
 
-      p {
+      .LinkItem {
-        font-size: $font-regular;
+        $diameter: $unit-6x;
+        border: 1px solid var(--link-item-bg);
+        border-radius: $card-corner;
+
+        &:hover {
+          background-color: var(--link-item-bg);
+
+          svg {
+            fill: var(--link-item-image-color-hover);
+          }
+        }
+
+        a {
+          display: flex;
+          padding: $unit-2x;
+
+          &:hover {
+            text-decoration: none;
+          }
+
+          .Left {
+            align-items: center;
+            display: flex;
+            gap: $unit-2x;
+            flex-grow: 1;
+          }
+
+          svg {
+            fill: var(--link-item-image-color);
+            width: $diameter;
+            height: auto;
+
+            &.ShareIcon {
+              width: $unit-4x;
+            }
+          }
+        }
+
+        h3 {
+          font-weight: $bold;
+          max-width: 70%;
+          line-height: 1.3;
+        }
+      }
+    }
+
+    p {
+      color: var(--text-secondary);
+
+      font-size: $font-regular;
+      line-height: 1.3;
+    }
+
+    ul {
+      color: var(--text-primary);
+      list-style-type: none;
+
+      li {
+        display: flex;
+        flex-direction: column;
+        gap: $unit;
+        margin-bottom: $unit-2x;
+
+        h4 {
+          font-size: $font-medium;
+          font-weight: $bold;
+        }
+
+        p {
+          font-size: $font-regular;
+        }
       }
     }
   }

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,49 +19,50 @@ const RoadmapModal = () => {
   const { t } = useTranslation('roadmap')
 
   return (
-    <Dialog.Root>
+    <Dialog>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('modals.roadmap.title')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent
-        <Dialog.Content
+        className="Roadmap"
-          className="Roadmap Dialog"
+        onOpenAutoFocus={(event) => event.preventDefault()}
-          onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={() => {}}
-        >
+      >
-          <div className="DialogHeader">
+        <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">{t('title')}</Dialog.Title>
+          <DialogTitle className="DialogTitle">{t('title')}</DialogTitle>
-            <Dialog.Close className="DialogClose" asChild>
+          <DialogClose className="DialogClose" asChild>
-              <span>
+            <span>
-                <CrossIcon />
+              <CrossIcon />
-              </span>
+            </span>
-            </Dialog.Close>
+          </DialogClose>
-          </div>
+        </div>
 
-          <section>
+        <div>
-            <div className="top">
+          <section className="notes">
-              <h3 className="priority in_progress">{t('subtitle')}</h3>
+            <p>{t('blurb')}</p>
-              <p>{t('blurb')}</p>
+            <p>{t('link.intro')}</p>
-              <p>{t('link.intro')}</p>
+            <div className="LinkItem">
-              <div className="LinkItem">
+              <Link href="https://github.com/users/jedmund/projects/1/views/3">
-                <Link href="https://github.com/users/jedmund/projects/1/views/3">
+                <a
-                  <a
+                  href="https://github.com/users/jedmund/projects/1/views/3"
-                    href="https://github.com/users/jedmund/projects/1/views/3"
+                  target="_blank"
-                    target="_blank"
+                  rel="noreferrer"
-                    rel="noreferrer"
+                >
-                  >
+                  <div className="Left">
-                    <div className="Left">
+                    <GithubIcon />
-                      <GithubIcon />
+                    <h3>{t('link.title')}</h3>
-                      <h3>{t('link.title')}</h3>
+                  </div>
-                    </div>
+                  <ShareIcon className="ShareIcon" />
-                    <ShareIcon className="ShareIcon" />
+                </a>
-                  </a>
+              </Link>
-                </Link>
-              </div>
             </div>
-            <div className="Separator" />
+          </section>
-            <ul className="notes">
+
+          <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>
+        </div>
-        <Dialog.Overlay className="Overlay" />
+      </DialogContent>
-      </Dialog.Portal>
+    </Dialog>
-    </Dialog.Root>
   )
 }