Add new layout and styles for roadmap modal

components/RoadmapModal/index.scss

@@ -1,26 +1,115 @@
-h3.priority {
-  font-weight: $medium;
-  font-size: $font-medium;
-  margin-bottom: $unit;
+.Roadmap.Dialog {
+  max-height: 60vh;
+  overflow-y: scroll;
 
-  &.high {
-    color: $red;
+  .top {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+
+    h3.priority {
+      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;
+      }
+    }
   }
 
-  &.mid {
-    color: $orange-10;
+  .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;
   }
 
-  &.low {
-    color: $blue;
-  }
-}
-
-.notes {
-  color: var(--text-primary);
-  list-style-type: disc;
-
-  li {
-    margin-bottom: $unit-half;
+  .notes {
+    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

@@ -5,13 +5,12 @@ import * as Dialog from '@radix-ui/react-dialog'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import ShareIcon from '~public/icons/Share.svg'
-import DiscordIcon from '~public/icons/discord.svg'
 import GithubIcon from '~public/icons/github.svg'
 
 import './index.scss'
 
 const RoadmapModal = () => {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation('roadmap')
 
   return (
     <Dialog.Root>
@@ -22,13 +21,11 @@ const RoadmapModal = () => {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Content
-          className="Dialog"
+          className="Roadmap Dialog"
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
           <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">
-              {t('menu.roadmap')}
-            </Dialog.Title>
+            <Dialog.Title className="DialogTitle">{t('title')}</Dialog.Title>
             <Dialog.Close className="DialogClose" asChild>
               <span>
                 <CrossIcon />
@@ -37,37 +34,52 @@ const RoadmapModal = () => {
           </div>
 
           <section>
-            <h3 className="priority high">High priority</h3>
+            <div className="top">
+              <h3 className="priority in_progress">{t('subtitle')}</h3>
+              <p>{t('blurb')}</p>
+              <p>{t('link.intro')}</p>
+              <div className="LinkItem">
+                <Link href="https://github.com/users/jedmund/projects/1/views/3">
+                  <a
+                    href="https://github.com/users/jedmund/projects/1/views/3"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <div className="Left">
+                      <GithubIcon />
+                      <h3>{t('link.title')}</h3>
+                    </div>
+                    <ShareIcon className="ShareIcon" />
+                  </a>
+                </Link>
+              </div>
+            </div>
+            <div className="Separator" />
             <ul className="notes">
-              <li>URL state for team tabs</li>
               <li>
-                More team details (Full Auto, Auto Guard, Clear Time) and
-                filters
+                <h4>{t('roadmap.item1.title')}</h4>
+                <p>{t('roadmap.item1.description')}</p>
               </li>
               <li>
-                Character mods - Rings, Earrings, Perpetuity Rings, Styles
+                <h4>{t('roadmap.item2.title')}</h4>
+                <p>{t('roadmap.item2.description')}</p>
+              </li>
+              <li>
+                <h4>{t('roadmap.item3.title')}</h4>
+                <p>{t('roadmap.item3.description')}</p>
+              </li>
+              <li>
+                <h4>{t('roadmap.item4.title')}</h4>
+                <p>{t('roadmap.item4.description')}</p>
+              </li>
+              <li>
+                <h4>{t('roadmap.item5.title')}</h4>
+                <p>{t('roadmap.item5.description')}</p>
+              </li>
+              <li>
+                <h4>{t('roadmap.item6.title')}</h4>
+                <p>{t('roadmap.item6.description')}</p>
               </li>
-            </ul>
-          </section>
-          <section>
-            <h3 className="priority mid">Medium priority</h3>
-            <ul className="notes">
-              <li>Dark mode improvements for logged out users</li>
-              <li>Light Markdown in team details</li>
-              <li>Transcendence Steps - Eternals and Bahamut</li>
-              <li>Rearrange items in team</li>
-              <li>Remove items from team</li>
-            </ul>
-          </section>
-          <section>
-            <h3 className="priority low">Low priority</h3>
-            <ul className="notes">
-              <li>Figure out DNS to simplify URLs to just granblue.team</li>
-              <li>Unify About, Changelog, Roadmap</li>
-              <li>Add R characters</li>
-              <li>Add images for weird units like Aquors</li>
-              <li>Character substitutions</li>
-              <li>Deeper gbf.wiki integration</li>
             </ul>
           </section>
         </Dialog.Content>

styles/themes.scss

@@ -11,6 +11,8 @@
 
   --full-auto-text: #{$text--full--auto--light};
 
+  --separator-bg: #{$separator--bg--light};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -133,6 +135,8 @@
 
   --full-auto-text: #{$text--full--auto--dark};
 
+  --separator-bg: #{$separator--bg--dark};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 

styles/variables.scss

@@ -73,6 +73,7 @@ $orange-90: #ffebd9;
 // Colors -- Interface
 $blue: #275dc5;
 $red: #ff6161;
+$yellow: #c89d39;
 $error: #d13a3a;
 
 // Colors -- Elements
@@ -130,6 +131,9 @@ $page--hover--dark: $grey-30;
 $page--element--bg--light: $grey-70;
 $page--element--bg--dark: $grey-40;
 
+$separator--bg--light: $grey-90;
+$separator--bg--dark: $grey-15;
+
 // Color Definitions: Dialog
 $dialog--bg--light: $grey-100;
 $dialog--bg--dark: $grey-25;
@@ -250,7 +254,7 @@ $text--primary--color--light: $grey-40;
 $text--primary--color--dark: $grey-90;
 
 $text--secondary--color--light: $grey-60;
-$text--secondary--color--dark: $grey-60;
+$text--secondary--color--dark: $grey-70;
 
 $text--tertiary--color--light: $grey-50;
 $text--tertiary--color--dark: $grey-50;