Merge pull request #148 from jedmund/fix-dialogs

Fix About, Changelog, Roadmap dialogs

components/AboutModal/index.scss

@@ -1,42 +1,28 @@
-.DialogWrapper {
+.About.DialogContent {
-  position: fixed;
+  gap: 0;
-  background: none;
+  padding-bottom: $unit;
-  border: 0;
-  inset: 0;
-  top: 0;
-  display: grid;
-  place-items: center;
-  min-height: 100vh;
-  min-width: 100vw;
-  overflow-y: auto;
-  color: inherit;
-}
 
-.About.Dialog {
+  & > div:not(.DialogHeader) {
-  top: 0;
+    display: flex;
-  animation: none;
+    flex-direction: column;
-  transform: translate(-50%, 0);
+    gap: $unit-2x;
-  border-bottom-left-radius: 0;
+    padding: 0 $unit-4x;
-  border-bottom-right-radius: 0;
-  margin-top: $unit-10x;
-
-  @include breakpoint(phone) {
-    border-radius: 0;
-    transform: none;
-    margin: 0;
   }
 
   section {
     margin-bottom: $unit;
 
-    h2 {
+    & > h2 {
+      font-size: $font-medium;
+      font-weight: $medium;
       margin-bottom: $unit * 3;
     }
   }
 
-  .DialogDescription {
+  p {
+    color: var(--text-secondary);
     font-size: $font-regular;
-    line-height: 1.24;
+    line-height: 1.3;
     margin-bottom: $unit;
 
     &:last-of-type {
@@ -80,6 +66,12 @@
         display: flex;
         gap: $unit-2x;
         flex-grow: 1;
+
+        h3 {
+          font-weight: 600;
+          max-width: 70%;
+          line-height: 1.3;
+        }
       }
 
       svg {
@@ -98,17 +90,3 @@
     }
   }
 }
-
-.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;
-  padding-top: 10%;
-}

components/AboutModal/index.tsx

@@ -1,7 +1,14 @@
 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'
@@ -14,63 +21,61 @@ const AboutModal = () => {
   const { t } = useTranslation('common')
 
   return (
-    <Dialog.Root>
+    <Dialog>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('modals.about.title')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent
-        <Dialog.Overlay className="ScrollingOverlay">
+        className="About"
-          <div className="DialogWrapper">
-            <Dialog.Content
-              className="About Dialog"
         onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={() => {}}
       >
         <div className="DialogHeader">
-                <Dialog.Title className="DialogTitle">
+          <DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
-                  {t('menu.about')}
+          <DialogClose className="DialogClose" asChild>
-                </Dialog.Title>
-                <Dialog.Close className="DialogClose" asChild>
             <span>
               <CrossIcon />
             </span>
-                </Dialog.Close>
+          </DialogClose>
         </div>
 
+        <div>
           <section>
-                <Dialog.Description className="DialogDescription">
+            <p>
               Granblue.team is a tool to save and share team comps for{' '}
               <a
                 href="https://game.granbluefantasy.jp"
                 target="_blank"
                 rel="noreferrer"
               >
-                    Granblue Fantasy.
+                Granblue Fantasy
               </a>
-                </Dialog.Description>
+              .
-                <Dialog.Description className="DialogDescription">
+            </p>
-                  Start adding to a team and a URL will be created for you to
+            <p>
-                  share wherever you like, no account needed.
+              Start adding to a team and a URL will be created for you to share
-                </Dialog.Description>
+              wherever you like, no account needed.
-                <Dialog.Description className="DialogDescription">
+            </p>
+            <p>
               However, if you do make an account, you can save any teams you
-                  find for future reference and keep all of your teams together
+              find for future reference and keep all of your teams together in
-                  in one place.
+              one place.
-                </Dialog.Description>
+            </p>
           </section>
 
           <section>
-                <Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
+            <h2>Feedback</h2>
-                <Dialog.Description className="DialogDescription">
+            <p>
               This is an evolving project so feedback and suggestions are
               greatly appreciated!
-                </Dialog.Description>
+            </p>
-                <Dialog.Description className="DialogDescription">
+            <p>
-                  If you have a feature request, would like to report a bug, or
+              If you have a feature request, would like to report a bug, or are
-                  are enjoying the tool and want to say thanks, come hang out in
+              enjoying the tool and want to say thanks, come hang out in
               Discord!
-                </Dialog.Description>
+            </p>
             <div className="LinkItem">
               <Link href="https://discord.gg/qyZ5hGdPC8">
                 <a
@@ -89,8 +94,8 @@ const AboutModal = () => {
           </section>
 
           <section>
-                <Dialog.Title className="DialogTitle">Credits</Dialog.Title>
+            <h2>Credits</h2>
-                <Dialog.Description className="DialogDescription">
+            <p>
               Granblue.team was built by{' '}
               <a
                 href="https://twitter.com/jedmund"
@@ -116,10 +121,10 @@ const AboutModal = () => {
                 @tarngerine
               </a>
               .
-                </Dialog.Description>
+            </p>
-                <Dialog.Description className="DialogDescription">
+            <p>
-                  Many thanks also go to Disinfect, Slipper, Jif, Bless,
+              Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind,
-                  9highwind, and everyone else in{' '}
+              and everyone else in{' '}
               <a
                 href="https://game.granbluefantasy.jp/#guild/detail/1190185"
                 target="_blank"
@@ -128,16 +133,13 @@ const AboutModal = () => {
                 Fireplace
               </a>{' '}
               that helped with bug testing and feature requests. (P.S.
-                  We&apos;re recruiting!) And yoey, but he won&apos;t join our
+              We&apos;re recruiting!) And yoey, but he won&apos;t join our crew.
-                  crew.
+            </p>
-                </Dialog.Description>
           </section>
 
           <section>
-                <Dialog.Title className="DialogTitle">
+            <h2>Contributing</h2>
-                  Contributing
+            <p>
-                </Dialog.Title>
-                <Dialog.Description className="DialogDescription">
               This app is open source and licensed under{' '}
               <a
                 href="https://choosealicense.com/licenses/agpl-3.0/"
@@ -146,11 +148,10 @@ const AboutModal = () => {
               >
                 GNU AGPLv3
               </a>
-                  . Plainly, that means you can download the source, modify it,
+              . Plainly, that means you can download the source, modify it, and
-                  and redistribute it if you attribute this project, use the
+              redistribute it if you attribute this project, use the same
-                  same license, and keep it open source. You can contribute on
+              license, and keep it open source. You can contribute on Github.
-                  Github.
+            </p>
-                </Dialog.Description>
             <ul className="Links">
               <li className="LinkItem">
                 <Link href="https://github.com/jedmund/hensei-api">
@@ -184,11 +185,9 @@ const AboutModal = () => {
               </li>
             </ul>
           </section>
-            </Dialog.Content>
         </div>
-        </Dialog.Overlay>
+      </DialogContent>
-      </Dialog.Portal>
+    </Dialog>
-    </Dialog.Root>
   )
 }
 

components/ChangelogModal/index.scss

@@ -1,15 +1,71 @@
-h3.version {
+.Changelog.DialogContent {
-  color: $blue;
+  gap: 0;
-  font-weight: $medium;
+  padding-bottom: $unit-4x;
-  font-size: $font-medium;
-  margin-bottom: $unit;
-}
 
-.notes {
+  & > div:not(.DialogHeader) {
+    padding: 0 $unit-4x;
+  }
+
+  .updates {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-4x;
+  }
+
+  .version {
+    &.content {
+      .top h3 {
+        color: var(--accent-yellow);
+      }
+
+      .update {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-2x;
+      }
+
+      .characters,
+      .weapons,
+      .summons {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        gap: $unit;
+      }
+
+      .items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: $unit-4x;
+      }
+    }
+
+    .top {
+      align-items: baseline;
+      display: flex;
+      gap: $unit-half;
+      margin-bottom: $unit-2x;
+
+      h3 {
+        color: var(--accent-blue);
+        font-weight: $medium;
+        font-size: $font-large;
+      }
+
+      time {
+        color: var(--text-secondary);
+        font-size: $font-small;
+        font-weight: $medium;
+      }
+    }
+  }
+
+  .notes {
     color: var(--text-primary);
     list-style-type: disc;
+    list-style-position: inside;
 
     li {
       margin-bottom: $unit-half;
     }
+  }
 }

components/ChangelogModal/index.tsx

@@ -1,6 +1,14 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import * as Dialog from '@radix-ui/react-dialog'
+
+import ChangelogUnit from '~components/ChangelogUnit'
+import {
+  Dialog,
+  DialogClose,
+  DialogTitle,
+  DialogTrigger,
+} from '~components/Dialog'
+import DialogContent from '~components/DialogContent'
 
 import CrossIcon from '~public/icons/Cross.svg'
 
@@ -10,45 +18,145 @@ const ChangelogModal = () => {
   const { t } = useTranslation('common')
 
   return (
-    <Dialog.Root>
+    <Dialog>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('modals.changelog.title')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent
-        <Dialog.Content
+        className="Changelog"
-          className="Dialog"
         onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={() => {}}
       >
         <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">
+          <DialogTitle className="DialogTitle">
             {t('menu.changelog')}
-            </Dialog.Title>
+          </DialogTitle>
-            <Dialog.Close className="DialogClose" asChild>
+          <DialogClose className="DialogClose" asChild>
             <span>
               <CrossIcon />
             </span>
-            </Dialog.Close>
+          </DialogClose>
         </div>
 
-          <section>
+        <div className="updates">
-            <Dialog.Description className="DialogDescription">
+          <section className="version" data-version="1.0">
-              <h3 className="version">1.0</h3>
+            <div className="top">
+              <h3>1.0.1</h3>
+              <time>2023/01/08</time>
+            </div>
+            <ul className="notes">
+              <li>Extra party fields: Full Auto, Clear Time, and more</li>
+              <li>Support for Youtube short URLs</li>
+              <li>Responsive grids and lots of other mobile fixes</li>
+              <li>Many other bug fixes</li>
+            </ul>
+          </section>
+          <section className="content version" data-version="2022-12L">
+            <div className="top">
+              <h3>2022-12 Legend Festival</h3>
+              <time>2022/12/26</time>
+            </div>
+            <div className="update">
+              <section className="characters">
+                <h4>New characters</h4>
+                <div className="items">
+                  <ChangelogUnit
+                    name="Michael (Grand)"
+                    id="3040440000"
+                    type="character"
+                  />
+                  <ChangelogUnit
+                    name="Makura"
+                    id="3040441000"
+                    type="character"
+                  />
+                  <ChangelogUnit
+                    name="Ultimate Friday"
+                    id="3040442000"
+                    type="character"
+                  />
+                </div>
+              </section>
+              <section className="weapons">
+                <h4>New weapons</h4>
+                <div className="items">
+                  <ChangelogUnit
+                    name="Crimson Scale"
+                    id="1040315900"
+                    type="weapon"
+                  />
+                  <ChangelogUnit
+                    name="Leporidius"
+                    id="1040914500"
+                    type="weapon"
+                  />
+                  <ChangelogUnit
+                    name="FRIED Spear"
+                    id="1040218200"
+                    type="weapon"
+                  />
+                </div>
+              </section>
+              <section className="summons">
+                <h4>New summons</h4>
+                <div className="items">
+                  <ChangelogUnit name="Yatima" id="2040417000" type="summon" />
+                </div>
+              </section>
+            </div>
+          </section>
+          <section className="content version" data-version="2022-12F2">
+            <div className="top">
+              <h3>2022-12 Flash Gala</h3>
+              <time>2022/12/26</time>
+            </div>
+            <div className="update">
+              <section className="characters">
+                <h4>New characters</h4>
+                <div className="items">
+                  <ChangelogUnit
+                    name="Charlotta (Grand)"
+                    id="3040438000"
+                    type="character"
+                  />
+                  <ChangelogUnit name="Erin" id="3040439000" type="character" />
+                </div>
+              </section>
+              <section className="weapons">
+                <h4>New weapons</h4>
+                <div className="items">
+                  <ChangelogUnit
+                    name="Claíomh Solais Díon"
+                    id="1040024200"
+                    type="weapon"
+                  />
+                  <ChangelogUnit
+                    name="Crystal Edge"
+                    id="1040116500"
+                    type="weapon"
+                  />
+                </div>
+              </section>
+            </div>
+          </section>
+          <section className="version" data-version="1.0">
+            <div className="top">
+              <h3>1.0.0</h3>
+              <time>2022/12/26</time>
+            </div>
             <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>
+        </div>
-        <Dialog.Overlay className="Overlay" />
+      </DialogContent>
-      </Dialog.Portal>
+    </Dialog>
-    </Dialog.Root>
   )
 }
 

components/ChangelogUnit/index.scss

@@ -0,0 +1,16 @@
+.ChangelogUnit {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-half;
+
+  img {
+    border-radius: $input-corner;
+    width: 100%;
+  }
+
+  h4 {
+    font-size: $font-small;
+    font-weight: $medium;
+    text-align: center;
+  }
+}

components/ChangelogUnit/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import './index.scss'
+
+interface Props {
+  id: string
+  name: string
+  type: 'character' | 'summon' | 'weapon'
+}
+
+const defaultProps = {
+  active: false,
+  blended: false,
+  contained: false,
+  buttonSize: 'medium' as const,
+}
+
+const ChangelogUnit = ({ id, type, name }: Props) => {
+  function generateImageUrl() {
+    let src = ''
+
+    switch (type) {
+      case 'character':
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_01.jpg`
+        break
+      case 'weapon':
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
+        break
+      case 'summon':
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
+        break
+    }
+
+    return src
+  }
+
+  return (
+    <div className="ChangelogUnit">
+      <img alt={name} src={generateImageUrl()} />
+      <h4>{name}</h4>
+    </div>
+  )
+}
+
+export default ChangelogUnit

components/Dialog/index.tsx

@@ -23,6 +23,9 @@ export const Dialog = ({ children, ...props }: PropsWithChildren<Props>) => {
 
   function handleOpenChange(open: boolean) {
     if (props.onOpenChange) props.onOpenChange(open)
+    if (props.open === undefined) {
+      toggleLocked(open)
+    }
   }
 
   return (

components/DialogContent/index.scss

@@ -28,6 +28,7 @@
     overflow-y: scroll;
     max-height: 80vh;
     min-width: 580px;
+    max-width: 42vw;
     // padding: $unit * $multiplier;
     position: relative;
 
@@ -54,11 +55,16 @@
       align-items: center;
       gap: $unit-2x;
       justify-content: space-between;
-      padding: $unit-3x ($unit * $multiplier);
+      padding: $unit-4x ($unit * $multiplier);
       position: sticky;
       top: 0;
       z-index: 10;
 
+      &.Short {
+        padding-top: $unit-3x;
+        padding-bottom: $unit-3x;
+      }
+
       .left {
         display: flex;
         flex-direction: column;

components/LoginModal/index.scss

@@ -2,10 +2,6 @@
   gap: $unit;
   min-width: $unit * 52;
 
-  .DialogHeader {
-    padding: $unit-4x $unit-3x;
-  }
-
   form {
     display: flex;
     flex-direction: column;

components/RoadmapModal/index.scss

@@ -1,15 +1,11 @@
-.Roadmap.Dialog {
+.Roadmap.DialogContent {
-  max-height: 60vh;
+  gap: 0;
-  overflow-y: scroll;
+  padding-bottom: $unit-2x;
-
-  .top {
-    display: flex;
-    flex-direction: column;
-    gap: $unit;
 
   h3.priority {
     font-weight: $medium;
     font-size: $font-large;
+    margin-bottom: $unit-4x;
 
     &.in_progress {
       color: $yellow;
@@ -28,6 +24,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 +87,6 @@
       }
     }
 
-  .Separator {
-    background: var(--separator-bg);
-    border-radius: 2px;
-    margin: $unit-3x 0;
-    height: 2px;
-  }
     p {
       color: var(--text-secondary);
 
@@ -92,7 +94,7 @@
       line-height: 1.3;
     }
 
-  .notes {
+    ul {
       color: var(--text-primary);
       list-style-type: none;
 
@@ -112,4 +114,5 @@
         }
       }
     }
+  }
 }

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>
-      <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()}
+        onEscapeKeyDown={() => {}}
       >
         <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>
               <CrossIcon />
             </span>
-            </Dialog.Close>
+          </DialogClose>
         </div>
 
-          <section>
+        <div>
-            <div className="top">
+          <section className="notes">
-              <h3 className="priority in_progress">{t('subtitle')}</h3>
             <p>{t('blurb')}</p>
             <p>{t('link.intro')}</p>
             <div className="LinkItem">
@@ -53,9 +58,11 @@ const RoadmapModal = () => {
                 </a>
               </Link>
             </div>
-            </div>
+          </section>
-            <div className="Separator" />
+
-            <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>
   )
 }
 

components/SignupModal/index.scss

@@ -2,10 +2,6 @@
   gap: $unit;
   min-width: $unit * 52;
 
-  .DialogHeader {
-    padding: $unit-4x $unit-3x;
-  }
-
   form {
     display: flex;
     flex-direction: column;

components/WeaponModal/index.tsx

@@ -93,8 +93,10 @@ const WeaponModal = ({
   const [ax2Open, setAx2Open] = useState(false)
   const [awakeningOpen, setAwakeningOpen] = useState(false)
 
+  // Hooks
   useEffect(() => {
     setOpen(modalOpen)
+    handleOpenChange(modalOpen)
   }, [modalOpen])
 
   useEffect(() => {
@@ -346,7 +348,6 @@ const WeaponModal = ({
   }
 
   return (
-    // TODO: Refactor into Dialog component
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent
@@ -354,7 +355,7 @@ const WeaponModal = ({
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={onEscapeKeyDown}
       >
-        <div className="DialogHeader">
+        <div className="DialogHeader Short">
           <img
             alt={gridWeapon.object.name[locale]}
             className="DialogImage"

styles/themes.scss

@@ -13,6 +13,9 @@
 
   --separator-bg: #{$separator--bg--light};
 
+  --accent-blue: #{$accent--blue--light};
+  --accent-yellow: #{$accent--yellow--light};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -137,6 +140,9 @@
 
   --separator-bg: #{$separator--bg--dark};
 
+  --accent-blue: #{$accent--blue--dark};
+  --accent-yellow: #{$accent--yellow--dark};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 

styles/variables.scss

@@ -76,6 +76,12 @@ $red: #ff6161;
 $yellow: #c89d39;
 $error: #d13a3a;
 
+$accent--blue--light: #275dc5;
+$accent--blue--dark: #6195f4;
+
+$accent--yellow--light: #c89d39;
+$accent--yellow--dark: #f9cc64;
+
 // Colors -- Elements
 $wind-text-00: #023e28;
 $wind-text-10: #006a43;