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

Fix AboutModal styling and element nesting

Browse source
This commit is contained in:
Justin Edmund 2022-02-23 14:14:03 -08:00
parent 214f3cf398
commit 1ece2d89f8
2 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/AboutModal/index.scss
View file

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

39
components/AboutModal/index.tsx
View file

@ -20,19 +20,32 @@ const AboutModal = () => {
</span> </span>
</Dialog.Close> </Dialog.Close>
</div> </div>
<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> <section>
<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> <Dialog.Description className="DialogDescription">
<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> 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>
<Dialog.Title className="DialogTitle">Credits</Dialog.Title> <Dialog.Description className="DialogDescription">
<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.
<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.Description> <Dialog.Description className="DialogDescription">
<Dialog.Title className="DialogTitle">Open Source</Dialog.Title> 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 className="DialogDescription"> </Dialog.Description>
<p>This app is open source. You can contribute on Github.</p> </section>
</Dialog.Description>
<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.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />
</Dialog.Portal> </Dialog.Portal>