Merge pull request #148 from jedmund/fix-dialogs
Fix About, Changelog, Roadmap dialogs
This commit is contained in:
GitHub
commit
af8b94e91a
15 changed files with 629 additions and 404 deletions
|
|
@ -1,42 +1,28 @@
|
|||
.DialogWrapper {
|
||||
position: fixed;
|
||||
background: none;
|
||||
border: 0;
|
||||
inset: 0;
|
||||
top: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
overflow-y: auto;
|
||||
color: inherit;
|
||||
}
|
||||
.About.DialogContent {
|
||||
gap: 0;
|
||||
padding-bottom: $unit;
|
||||
|
||||
.About.Dialog {
|
||||
top: 0;
|
||||
animation: none;
|
||||
transform: translate(-50%, 0);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-top: $unit-10x;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
border-radius: 0;
|
||||
transform: none;
|
||||
margin: 0;
|
||||
& > div:not(.DialogHeader) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
padding: 0 $unit-4x;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.Trigger asChild>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('modals.about.title')}</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="ScrollingOverlay">
|
||||
<div className="DialogWrapper">
|
||||
<Dialog.Content
|
||||
className="About Dialog"
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="About"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
onEscapeKeyDown={() => {}}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<Dialog.Title className="DialogTitle">
|
||||
{t('menu.about')}
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
|
||||
<DialogClose 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">
|
||||
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">
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Start adding to a team and a URL will be created for you to share
|
||||
wherever you like, no account needed.
|
||||
</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
|
||||
in one place.
|
||||
</Dialog.Description>
|
||||
find for future reference and keep all of your teams together in
|
||||
one place.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
|
||||
<Dialog.Description className="DialogDescription">
|
||||
<h2>Feedback</h2>
|
||||
<p>
|
||||
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
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</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>
|
||||
<Dialog.Description className="DialogDescription">
|
||||
<h2>Credits</h2>
|
||||
<p>
|
||||
Granblue.team was built by{' '}
|
||||
<a
|
||||
href="https://twitter.com/jedmund"
|
||||
|
|
@ -116,10 +121,10 @@ const AboutModal = () => {
|
|||
@tarngerine
|
||||
</a>
|
||||
.
|
||||
</Dialog.Description>
|
||||
<Dialog.Description className="DialogDescription">
|
||||
Many thanks also go to Disinfect, Slipper, Jif, Bless,
|
||||
9highwind, and everyone else in{' '}
|
||||
</p>
|
||||
<p>
|
||||
Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind,
|
||||
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're recruiting!) And yoey, but he won't join our
|
||||
crew.
|
||||
</Dialog.Description>
|
||||
We're recruiting!) And yoey, but he won't join our crew.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Dialog.Title className="DialogTitle">
|
||||
Contributing
|
||||
</Dialog.Title>
|
||||
<Dialog.Description className="DialogDescription">
|
||||
<h2>Contributing</h2>
|
||||
<p>
|
||||
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,
|
||||
and redistribute it if you attribute this project, use the
|
||||
same license, and keep it open source. You can contribute on
|
||||
Github.
|
||||
</Dialog.Description>
|
||||
. 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.
|
||||
</p>
|
||||
<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>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,71 @@
|
|||
h3.version {
|
||||
color: $blue;
|
||||
font-weight: $medium;
|
||||
font-size: $font-medium;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
.Changelog.DialogContent {
|
||||
gap: 0;
|
||||
padding-bottom: $unit-4x;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.Trigger asChild>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('modals.changelog.title')}</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content
|
||||
className="Dialog"
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Changelog"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
onEscapeKeyDown={() => {}}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<Dialog.Title className="DialogTitle">
|
||||
<DialogTitle className="DialogTitle">
|
||||
{t('menu.changelog')}
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
</DialogTitle>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</Dialog.Close>
|
||||
</DialogClose>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<Dialog.Description className="DialogDescription">
|
||||
<h3 className="version">1.0</h3>
|
||||
<div className="updates">
|
||||
<section className="version" data-version="1.0">
|
||||
<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>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
16
components/ChangelogUnit/index.scss
Normal file
16
components/ChangelogUnit/index.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
45
components/ChangelogUnit/index.tsx
Normal file
45
components/ChangelogUnit/index.tsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
gap: $unit;
|
||||
min-width: $unit * 52;
|
||||
|
||||
.DialogHeader {
|
||||
padding: $unit-4x $unit-3x;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
.Roadmap.Dialog {
|
||||
max-height: 60vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit;
|
||||
.Roadmap.DialogContent {
|
||||
gap: 0;
|
||||
padding-bottom: $unit-2x;
|
||||
|
||||
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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
gap: $unit;
|
||||
min-width: $unit * 52;
|
||||
|
||||
.DialogHeader {
|
||||
padding: $unit-4x $unit-3x;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue