Remove static modals
This commit is contained in:
parent
a7151d5035
commit
8f55069a02
6 changed files with 0 additions and 756 deletions
|
|
@ -1,98 +0,0 @@
|
||||||
.About.DialogContent {
|
|
||||||
gap: 0;
|
|
||||||
padding-bottom: $unit;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $unit-2x;
|
|
||||||
padding: 0 $unit-4x;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sections {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $unit-2x;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: $unit;
|
|
||||||
|
|
||||||
& > h2 {
|
|
||||||
font-size: $font-medium;
|
|
||||||
font-weight: $medium;
|
|
||||||
margin-bottom: $unit * 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: $font-regular;
|
|
||||||
line-height: 1.3;
|
|
||||||
margin-bottom: $unit;
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
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;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: 600;
|
|
||||||
max-width: 70%;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: var(--link-item-image-color);
|
|
||||||
width: $diameter;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
&.ShareIcon {
|
|
||||||
width: $unit-4x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: $bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,196 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
|
|
||||||
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'
|
|
||||||
import DiscordIcon from '~public/icons/discord.svg'
|
|
||||||
import GithubIcon from '~public/icons/github.svg'
|
|
||||||
|
|
||||||
import './index.scss'
|
|
||||||
|
|
||||||
const AboutModal = () => {
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
const headerRef = React.createRef<HTMLDivElement>()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<span>{t('modals.about.title')}</span>
|
|
||||||
</li>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent
|
|
||||||
className="About"
|
|
||||||
headerref={headerRef}
|
|
||||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
||||||
onEscapeKeyDown={() => {}}
|
|
||||||
>
|
|
||||||
<div className="DialogHeader" ref={headerRef}>
|
|
||||||
<DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
|
|
||||||
<DialogClose className="DialogClose" asChild>
|
|
||||||
<span>
|
|
||||||
<CrossIcon />
|
|
||||||
</span>
|
|
||||||
</DialogClose>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="content">
|
|
||||||
<section>
|
|
||||||
<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
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Feedback</h2>
|
|
||||||
<p>
|
|
||||||
This is an evolving project so feedback and suggestions are
|
|
||||||
greatly appreciated!
|
|
||||||
</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!
|
|
||||||
</p>
|
|
||||||
<div className="LinkItem">
|
|
||||||
<Link href="https://discord.gg/qyZ5hGdPC8">
|
|
||||||
<a
|
|
||||||
href="https://discord.gg/qyZ5hGdPC8"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<div className="Left">
|
|
||||||
<DiscordIcon />
|
|
||||||
<h3>granblue-tools</h3>
|
|
||||||
</div>
|
|
||||||
<ShareIcon className="ShareIcon" />
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Credits</h2>
|
|
||||||
<p>
|
|
||||||
Granblue.team was built by{' '}
|
|
||||||
<a
|
|
||||||
href="https://twitter.com/jedmund"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
@jedmund
|
|
||||||
</a>{' '}
|
|
||||||
with a lot of help from{' '}
|
|
||||||
<a
|
|
||||||
href="https://twitter.com/lalalalinna"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
@lalalalinna
|
|
||||||
</a>{' '}
|
|
||||||
and{' '}
|
|
||||||
<a
|
|
||||||
href="https://twitter.com/tarngerine"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
@tarngerine
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</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"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
Fireplace
|
|
||||||
</a>{' '}
|
|
||||||
that helped with bug testing and feature requests. (P.S.
|
|
||||||
We're recruiting!) And yoey, but he won't join our crew.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Contributing</h2>
|
|
||||||
<p>
|
|
||||||
This app is open source and licensed under{' '}
|
|
||||||
<a
|
|
||||||
href="https://choosealicense.com/licenses/agpl-3.0/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
<ul className="Links">
|
|
||||||
<li className="LinkItem">
|
|
||||||
<Link href="https://github.com/jedmund/hensei-api">
|
|
||||||
<a
|
|
||||||
href="https://github.com/jedmund/hensei-api"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<div className="Left">
|
|
||||||
<GithubIcon />
|
|
||||||
<h3>jedmund/hensei-web</h3>
|
|
||||||
</div>
|
|
||||||
<ShareIcon className="ShareIcon" />
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AboutModal
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
.Changelog.DialogContent {
|
|
||||||
gap: 0;
|
|
||||||
|
|
||||||
.updates {
|
|
||||||
padding: 0 $unit-4x;
|
|
||||||
}
|
|
||||||
|
|
||||||
.updates {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $unit-4x;
|
|
||||||
margin-bottom: $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;
|
|
||||||
|
|
||||||
& > h4 {
|
|
||||||
font-weight: $medium;
|
|
||||||
font-size: $font-regular;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
font-size: $font-regular;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
|
|
||||||
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'
|
|
||||||
|
|
||||||
import './index.scss'
|
|
||||||
|
|
||||||
const ChangelogModal = () => {
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
const headerRef = React.createRef<HTMLDivElement>()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<span>{t('modals.changelog.title')}</span>
|
|
||||||
</li>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent
|
|
||||||
className="Changelog"
|
|
||||||
title={t('menu.changelog')}
|
|
||||||
headerref={headerRef}
|
|
||||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
||||||
onEscapeKeyDown={() => {}}
|
|
||||||
>
|
|
||||||
<div className="DialogHeader" ref={headerRef}>
|
|
||||||
<DialogTitle className="DialogTitle">
|
|
||||||
{t('menu.changelog')}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogClose className="DialogClose" asChild>
|
|
||||||
<span>
|
|
||||||
<CrossIcon />
|
|
||||||
</span>
|
|
||||||
</DialogClose>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>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>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChangelogModal
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.high {
|
|
||||||
color: $red;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mid {
|
|
||||||
color: $orange-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.low {
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
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'
|
|
||||||
import GithubIcon from '~public/icons/github.svg'
|
|
||||||
|
|
||||||
import './index.scss'
|
|
||||||
|
|
||||||
const RoadmapModal = () => {
|
|
||||||
const { t } = useTranslation('roadmap')
|
|
||||||
const headerRef = React.createRef<HTMLDivElement>()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<span>{t('modals.roadmap.title')}</span>
|
|
||||||
</li>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent
|
|
||||||
className="Roadmap"
|
|
||||||
title={t('title')}
|
|
||||||
headerref={headerRef}
|
|
||||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
||||||
onEscapeKeyDown={() => {}}
|
|
||||||
>
|
|
||||||
<div className="DialogHeader" ref={headerRef}>
|
|
||||||
<DialogTitle className="DialogTitle">{t('title')}</DialogTitle>
|
|
||||||
<DialogClose className="DialogClose" asChild>
|
|
||||||
<span>
|
|
||||||
<CrossIcon />
|
|
||||||
</span>
|
|
||||||
</DialogClose>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="content">
|
|
||||||
<section className="notes">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RoadmapModal
|
|
||||||
Loading…
Reference in a new issue