granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement Radix's Dialog component for the About modal.

Browse source 
Probably still want to spend some time making this look nice/wordsmithing the copy later.
This commit is contained in:
Justin Edmund 2022-02-04 22:50:13 -08:00
parent 679710efc3
commit 5f1be4679e
5 changed files with 91 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/AboutModal/index.scss
View file

@ -1,10 +1,22 @@
.AboutModal p {
font-size: $font-regular;
line-height: 1.24;
margin: 0;
margin-bottom: $unit * 2;
.About.Dialog {
width: $unit * 60;
&:last-of-type {
margin-bottom: 0;
section {
margin-bottom: $unit * 4;
h2 {
margin-bottom: $unit * 3;
}
}
.DialogDescription p {
font-size: $font-regular;
line-height: 1.24;
margin: 0;
margin-bottom: $unit * 2;
&:last-of-type {
margin-bottom: 0;
}
}
}

59
components/AboutModal/index.tsx
View file

@ -1,35 +1,42 @@
import React from 'react'
import { createPortal } from 'react-dom'
import api from '~utils/api'
import Modal from '~components/Modal'
import Overlay from '~components/Overlay'
import * as Dialog from '@radix-ui/react-dialog'
import CrossIcon from '~public/icons/Cross.svg'
import './index.scss'
interface Props {
close: () => void
}
const AboutModal = (props: Props) => {
const AboutModal = () => {
return (
createPortal(
<div>
<Modal
title="About"
styleName="AboutModal"
close={ () => {} }
>
<div>
<p>Siero is a tool to save and share parties for <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a></p>
<p>All you need to do to get started is start adding things. Siero will make a URL and you can share your party with the world.</p>
<p>If you want to save your parties for safe keeping or to edit them later, you can make a free account.</p>
<Dialog.Root>
<Dialog.Trigger asChild>
<li className="MenuItem">About</li>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Content className="About Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
<div className="DialogHeader">
<Dialog.Title className="DialogTitle">About</Dialog.Title>
<Dialog.Close className="DialogClose" asChild>
<span>
<CrossIcon />
</span>
</Dialog.Close>
</div>
</Modal>
<Overlay onClick={props.close} />
</div>,
document.body
)
<Dialog.Description className="DialogDescription">
<p>Granblue.team is a tool to save and share team compositions for <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a></p>
<p>Start adding things to a team and a URL will be created for you to share it wherever you like, no account needed.</p>
<p>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.</p>
</Dialog.Description>
<Dialog.Title className="DialogTitle">Credits</Dialog.Title>
<Dialog.Description className="DialogDescription">
<p>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>.</p>
</Dialog.Description>
<Dialog.Title className="DialogTitle">Open Source</Dialog.Title>
<Dialog.Description className="DialogDescription">
<p>This app is open source. You can contribute on Github.</p>
</Dialog.Description>
</Dialog.Content>
<Dialog.Overlay className="Overlay" />
</Dialog.Portal>
</Dialog.Root>
)
}

5
components/BottomHeader/index.tsx
View file

@ -30,11 +30,6 @@ const BottomHeader = () => {
}
}, [cookies, setUsername, setAuthenticated])
function closeModal() {
const escape = new KeyboardEvent('keydown', {'key': 'Escape'})
document.dispatchEvent(escape)
}
function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
// TODO: Implement deleting teams
console.log("Deleting team...")

10
components/HeaderMenu/index.tsx
View file

@ -46,10 +46,7 @@ const HeaderMenu = (props: Props) => {
</li>
</div>
<div className="MenuGroup">
<li className="MenuItem" onClick={openAboutModal}>About</li>
{aboutOpen ? (
<AboutModal close={closeAboutModal} />
) : null}
<AboutModal />
<li className="MenuItem">Settings</li>
<li className="MenuItem" onClick={props.logout}>Logout</li>
</div>
@ -62,10 +59,7 @@ const HeaderMenu = (props: Props) => {
return (
<ul className="Menu unauth">
<div className="MenuGroup">
<li className="MenuItem" onClick={openAboutModal}>About</li>
{aboutOpen ? (
<AboutModal close={closeAboutModal} />
) : null}
<AboutModal />
</div>
<div className="MenuGroup">
<li className="MenuItem">

38
styles/globals.scss
View file

@ -69,12 +69,13 @@ h1 {
}
.Dialog {
animation: 150ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running openModal;
background: white;
border-radius: $unit;
display: flex;
flex-direction: column;
gap: $unit * 3;
height: auto;
min-width: $unit * 48;
min-height: $unit * 12;
padding: $unit * 3;
@ -84,8 +85,31 @@ h1 {
transform: translate(-50%, -50%);
z-index: 21;
.DialogHeader {
display: flex;
}
.DialogClose {
background: transparent;
height: 21px;
width: 21px;
&:hover {
cursor: pointer;
svg {
fill: $grey-00;
}
}
svg {
fill: $grey-10;
}
}
.DialogTitle {
font-size: $font-large;
flex-grow: 1;
}
.DialogDescription {
@ -99,3 +123,15 @@ h1 {
}
}
@keyframes openModal {
0% {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
100% {
// opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}