Update About, add Roadmap and Changelog

components/AboutModal/index.scss

@@ -1,6 +1,23 @@
+.DialogWrapper {
+  position: fixed;
+  background: none;
+  border: 0;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  min-width: 100vw;
+  overflow-y: auto;
+  color: inherit;
+}
+
 .About.Dialog {
   width: $unit * 60;
-
+  top: 0;
+  transform: translate(-50%, 0);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-top: $unit-10x;
   section {
     margin-bottom: $unit;
 
@@ -18,4 +35,71 @@
       margin-bottom: 0;
     }
   }
+
+  .Links {
+    display: grid;
+    gap: $unit;
+    margin: $unit-2x 0;
+  }
+
+  div.LinkItem {
+    margin-top: $unit-2x;
+  }
+
+  .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;
+    }
+  }
+}
+
+.ScrollingOverlay {
+  background: rgba(0 0 0 / 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-items: center;
+  overflow-y: auto;
+  z-index: 40;
 }

components/AboutModal/index.tsx

@@ -1,8 +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 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 AboutModal = () => {
@@ -16,55 +21,141 @@ const AboutModal = () => {
         </li>
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Content
-          className="About Dialog"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">
-              {t('menu.about')}
-            </Dialog.Title>
-            <Dialog.Close className="DialogClose" asChild>
-              <span>
-                <CrossIcon />
-              </span>
-            </Dialog.Close>
+        <Dialog.Overlay className="ScrollingOverlay">
+          <div className="DialogWrapper">
+            <Dialog.Content
+              className="About Dialog"
+              onOpenAutoFocus={(event) => event.preventDefault()}
+            >
+              <div className="DialogHeader">
+                <Dialog.Title className="DialogTitle">
+                  {t('menu.about')}
+                </Dialog.Title>
+                <Dialog.Close className="DialogClose" asChild>
+                  <span>
+                    <CrossIcon />
+                  </span>
+                </Dialog.Close>
+              </div>
+
+              <section>
+                <Dialog.Description className="DialogDescription">
+                  Granblue.team is a tool to save and share team comps for{' '}
+                  <a href="https://game.granbluefantasy.jp">
+                    Granblue Fantasy.
+                  </a>
+                </Dialog.Description>
+                <Dialog.Description className="DialogDescription">
+                  Start adding to a team and a URL will be created for you to
+                  share wherever you like, no account needed.
+                </Dialog.Description>
+                <Dialog.Description className="DialogDescription">
+                  However, if you do make an account, you can save any teams you
+                  find for future reference and keep all of your teams together
+                  in one place.
+                </Dialog.Description>
+              </section>
+
+              <section>
+                <Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
+                <Dialog.Description className="DialogDescription">
+                  This is an evolving project so feedback and suggestions are
+                  greatly appreciated!
+                </Dialog.Description>
+                <Dialog.Description className="DialogDescription">
+                  If you have a feature request, would like to report a bug, or
+                  are enjoying the tool and want to say thanks, come hang out in
+                  Discord!
+                </Dialog.Description>
+                <div className="LinkItem">
+                  <Link href="https://discord.gg/qyZ5hGdPC8">
+                    <a href="https://discord.gg/qyZ5hGdPC8">
+                      <div className="Left">
+                        <DiscordIcon />
+                        <h3>granblue-tools</h3>
+                      </div>
+                      <ShareIcon className="ShareIcon" />
+                    </a>
+                  </Link>
+                </div>
+              </section>
+
+              <section>
+                <Dialog.Title className="DialogTitle">Credits</Dialog.Title>
+                <Dialog.Description className="DialogDescription">
+                  Granblue.team was built by{' '}
+                  <a href="https://twitter.com/jedmund" target="_blank">
+                    @jedmund
+                  </a>{' '}
+                  with a lot of help from{' '}
+                  <a href="https://twitter.com/lalalalinna" target="_blank">
+                    @lalalalinna
+                  </a>{' '}
+                  and{' '}
+                  <a href="https://twitter.com/tarngerine" target="_blank">
+                    @tarngerine
+                  </a>
+                  .
+                </Dialog.Description>
+                <Dialog.Description className="DialogDescription">
+                  Many thanks also go to Jif, Slipper, Bless, yoey, 9highwind,
+                  and everyone else in{' '}
+                  <a
+                    href="https://game.granbluefantasy.jp/#guild/detail/1190185"
+                    target="_blank"
+                  >
+                    Fireplace
+                  </a>{' '}
+                  that helped with bug testing and feature requests. (P.S. We're
+                  recruiting!)
+                </Dialog.Description>
+              </section>
+
+              <section>
+                <Dialog.Title className="DialogTitle">
+                  Contributing
+                </Dialog.Title>
+                <Dialog.Description className="DialogDescription">
+                  This app is open source and licensed under{' '}
+                  <a
+                    href="https://choosealicense.com/licenses/agpl-3.0/"
+                    target="_blank"
+                  >
+                    GNU AGPLv3
+                  </a>
+                  . Plainly, that means you can download the source, modify it,
+                  and redistribute it if you attribute this project, use the
+                  same license, and keep it open source. You can contribute on
+                  Github.
+                </Dialog.Description>
+                <ul className="Links">
+                  <li className="LinkItem">
+                    <Link href="https://github.com/jedmund/hensei-api">
+                      <a href="https://github.com/jedmund/hensei-api">
+                        <div className="Left">
+                          <GithubIcon />
+                          <h3>jedmund/hensei-api</h3>
+                        </div>
+                        <ShareIcon className="ShareIcon" />
+                      </a>
+                    </Link>
+                  </li>
+                  <li className="LinkItem">
+                    <Link href="https://github.com/jedmund/hensei-web">
+                      <a href="https://github.com/jedmund/hensei-web">
+                        <div className="Left">
+                          <GithubIcon />
+                          <h3>jedmund/hensei-web</h3>
+                        </div>
+                        <ShareIcon className="ShareIcon" />
+                      </a>
+                    </Link>
+                  </li>
+                </ul>
+              </section>
+            </Dialog.Content>
           </div>
-
-          <section>
-            <Dialog.Description className="DialogDescription">
-              Granblue.team is a tool to save and share team compositions for{' '}
-              <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a>
-            </Dialog.Description>
-            <Dialog.Description className="DialogDescription">
-              Start adding things to a team and a URL will be created for you to
-              share it wherever you like, no account needed.
-            </Dialog.Description>
-            <Dialog.Description className="DialogDescription">
-              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.
-            </Dialog.Description>
-          </section>
-
-          <section>
-            <Dialog.Title className="DialogTitle">Credits</Dialog.Title>
-            <Dialog.Description className="DialogDescription">
-              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>.
-            </Dialog.Description>
-          </section>
-
-          <section>
-            <Dialog.Title className="DialogTitle">Open Source</Dialog.Title>
-            <Dialog.Description className="DialogDescription">
-              This app is open source. You can contribute on Github.
-            </Dialog.Description>
-          </section>
-        </Dialog.Content>
-        <Dialog.Overlay className="Overlay" />
+        </Dialog.Overlay>
       </Dialog.Portal>
     </Dialog.Root>
   )

components/ChangelogModal/index.scss

@@ -0,0 +1,15 @@
+h3.version {
+  color: $blue;
+  font-weight: $medium;
+  font-size: $font-medium;
+  margin-bottom: $unit;
+}
+
+.notes {
+  color: var(--text-primary);
+  list-style-type: disc;
+
+  li {
+    margin-bottom: $unit-half;
+  }
+}

components/ChangelogModal/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { useTranslation } from 'next-i18next'
+import * as Dialog from '@radix-ui/react-dialog'
+
+import CrossIcon from '~public/icons/Cross.svg'
+
+import './index.scss'
+
+const ChangelogModal = () => {
+  const { t } = useTranslation('common')
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <li className="MenuItem">
+          <span>{t('modals.changelog.title')}</span>
+        </li>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Content
+          className="Dialog"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <div className="DialogHeader">
+            <Dialog.Title className="DialogTitle">
+              {t('menu.changelog')}
+            </Dialog.Title>
+            <Dialog.Close className="DialogClose" asChild>
+              <span>
+                <CrossIcon />
+              </span>
+            </Dialog.Close>
+          </div>
+
+          <section>
+            <Dialog.Description className="DialogDescription">
+              <h3 className="version">1.0</h3>
+              <ul className="notes">
+                <li>First release!</li>
+                <li>Content update - Mid-December 2022 Flash Gala</li>
+                <li>You can embed Youtube videos now</li>
+                <li>Better clicking - right-click and open in a new tab</li>
+                <li>Manually set dark mode in Account Settings</li>
+                <li>Lots of bugs squashed</li>
+              </ul>
+            </Dialog.Description>
+          </section>
+        </Dialog.Content>
+        <Dialog.Overlay className="Overlay" />
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export default ChangelogModal

components/HeaderMenu/index.scss

@@ -20,6 +20,14 @@
 
     a {
       color: var(--text-primary);
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:visited {
+        color: var(--text-primary);
+      }
     }
   }
 
@@ -97,6 +105,14 @@
 
   a {
     color: $grey-50;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: $grey-50;
+    }
   }
 
   & > a,

components/HeaderMenu/index.tsx

@@ -8,6 +8,8 @@ import * as Switch from '@radix-ui/react-switch'
 
 import AboutModal from '~components/AboutModal'
 import AccountModal from '~components/AccountModal'
+import ChangelogModal from '~components/ChangelogModal'
+import RoadmapModal from '~components/RoadmapModal'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 
@@ -86,6 +88,10 @@ const HeaderMenu = (props: Props) => {
           </div>
           <div className="MenuGroup">
             <AboutModal />
+            <ChangelogModal />
+            <RoadmapModal />
+          </div>
+          <div className="MenuGroup">
             <AccountModal
               username={accountState.account.user?.username}
               picture={accountState.account.user?.picture}
@@ -133,6 +139,8 @@ const HeaderMenu = (props: Props) => {
         </div>
         <div className="MenuGroup">
           <AboutModal />
+          <ChangelogModal />
+          <RoadmapModal />
         </div>
         <div className="MenuGroup">
           <LoginModal />

components/RoadmapModal/index.scss

@@ -0,0 +1,26 @@
+h3.priority {
+  font-weight: $medium;
+  font-size: $font-medium;
+  margin-bottom: $unit;
+
+  &.high {
+    color: $red;
+  }
+
+  &.mid {
+    color: $orange-10;
+  }
+
+  &.low {
+    color: $blue;
+  }
+}
+
+.notes {
+  color: var(--text-primary);
+  list-style-type: disc;
+
+  li {
+    margin-bottom: $unit-half;
+  }
+}

components/RoadmapModal/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import Link from 'next/link'
+import { useTranslation } from 'next-i18next'
+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')
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <li className="MenuItem">
+          <span>{t('modals.roadmap.title')}</span>
+        </li>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Content
+          className="Dialog"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <div className="DialogHeader">
+            <Dialog.Title className="DialogTitle">
+              {t('menu.roadmap')}
+            </Dialog.Title>
+            <Dialog.Close className="DialogClose" asChild>
+              <span>
+                <CrossIcon />
+              </span>
+            </Dialog.Close>
+          </div>
+
+          <section>
+            <h3 className="priority high">High priority</h3>
+            <ul className="notes">
+              <li>URL state for team tabs</li>
+              <li>
+                More team details (Full Auto, Auto Guard, Clear Time) and
+                filters
+              </li>
+              <li>
+                Character mods - Rings, Earrings, Perpetuity Rings, Styles
+              </li>
+            </ul>
+          </section>
+          <section>
+            <h3 className="priority mid">Medium priority</h3>
+            <ul className="notes">
+              <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>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>
+        <Dialog.Overlay className="Overlay" />
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export default RoadmapModal

public/icons/Share.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 10.0104L9.10295 5.76102V9.5C9.10295 9.77614 9.3268 10 9.60295 10C9.87909 10 10.1029 9.77614 10.1029 9.5V4.5C10.1029 4.22386 9.87909 4 9.60295 4H4.60295C4.3268 4 4.10295 4.22386 4.10295 4.5C4.10295 4.77614 4.3268 5 4.60295 5L8.44975 5L4.14645 9.3033C3.95118 9.49856 3.95118 9.81515 4.14645 10.0104C4.34171 10.2057 4.65829 10.2057 4.85355 10.0104Z" />
+</svg>

public/icons/discord.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
+  <g id="图层_2" data-name="图层 2">
+    <g id="Discord_Logos" data-name="Discord Logos">
+      <g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White">
+        <path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

public/icons/github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+</svg>

public/locales/en/common.json

@@ -131,6 +131,12 @@
     "about": {
       "title": "About"
     },
+    "roadmap": {
+      "title": "Roadmap"
+    },
+    "changelog": {
+      "title": "Changelog"
+    },
     "conflict": {
       "character": "Only one <strong>version of a character</strong> can be included in each party. Do you want to change your party members?",
       "weapon": {
@@ -235,9 +241,11 @@
   },
   "menu": {
     "about": "About",
+    "changelog": "Changelog",
     "guides": "Guides",
     "language": "Language",
     "login": "Log in",
+    "roadmap": "Roadmap",
     "saved": "Saved",
     "settings": "Settings",
     "signup": "Sign up",

public/locales/ja/common.json

@@ -131,6 +131,12 @@
     "about": {
       "title": "このサイトについて"
     },
+    "roadmap": {
+      "title": "ロードマップ"
+    },
+    "changelog": {
+      "title": "変更ログ"
+    },
     "conflict": {
       "character": "<strong>同じ名前のキャラクター</strong>がパーティに編成されています。<br />以下のキャラクターを入れ替えますか？",
       "weapon": {
@@ -236,9 +242,11 @@
   },
   "menu": {
     "about": "このサイトについて",
+    "changelog": "変更ログ",
     "guides": "攻略",
     "language": "言語",
     "login": "ログイン",
+    "roadmap": "ロードマップ",
     "saved": "保存した編成",
     "settings": "アカウント設定",
     "signup": "登録",

styles/globals.scss

@@ -30,8 +30,17 @@ main {
 }
 
 a {
+  color: $blue;
   text-decoration: none;
 
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: $blue;
+  }
+
   &.wind {
     color: var(--wind-bg);
   }

styles/themes.scss

@@ -45,6 +45,11 @@
   --select-separator: #{$select--separator--light};
   --option-bg-hover: #{$option--bg--light--hover};
 
+  // Light - About
+  --link-item-bg: #{$link--item--bg--light};
+  --link-item-image-color: #{$link--item--bg--image--light};
+  --link-item-image-color-hover: #{$link--item--bg--image--light--hover};
+
   // Light - Text
   --text-primary: #{$text--primary--color--light};
   --text-secondary: #{$text--secondary--color--light};
@@ -160,6 +165,11 @@
   --select-separator: #{$select--separator--dark};
   --option-bg-hover: #{$option--bg--dark--hover};
 
+  // Dark - About
+  --link-item-bg: #{$link--item--bg--dark};
+  --link-item-image-color: #{$link--item--bg--image--dark};
+  --link-item-image-color-hover: #{$link--item--bg--image--dark--hover};
+
   // Dark - Text
   --text-primary: #{$text--primary--color--dark};
   --text-secondary: #{$text--secondary--color--dark};

styles/variables.scss

@@ -192,6 +192,14 @@ $grid--border--color--dark: $grey-40;
 $switch--nub--bg--light: $grey-80;
 $switch--nub--bg--dark: $grey-30;
 
+// Color Definitions: Link Items
+$link--item--bg--light: $grey-80;
+$link--item--bg--dark: $grey-30;
+$link--item--bg--image--light: $grey-60;
+$link--item--bg--image--dark: $grey-60;
+$link--item--bg--image--light--hover: $grey-40;
+$link--item--bg--image--dark--hover: $grey-80;
+
 // Color Definitions: Additional Weapons
 $extra--purple--bg--light: $purple-90;
 $extra--purple--card--bg--light: $purple-80;