Create New Modal Component

[mewtaylor]

We currently use react-modal to handle some of our modal elements, however it would be nice to have our own modal that can be a bit more customizable to the use cases we need it for. See #979 for a specific, new modal use case. The design for this modal needs to include the following elements:

• An "x" in the top right corner to close the modal (or top left, for rtl)
• Use onclickoutside so that clicking the opaque background closes the modal
• Rounded corners
• A blue opacity for the page behind

Needs a mobile design as well

[carljbowman]

[kaschm]

Global content for modal:

Tutorial: Find out how to make this project using a step-by-step tutorial in Scratch.

Activity Cards: Explore new coding ideas using this set of illustrated cards you can print out.

Educator Guide: Use this educator guide to plan and lead a one-hour Scratch workshop.

[ntlrsk]

(Note: we updated the text above.)

[carljbowman]

@ntlrsk - What do you think of the banner images?

Animate Your Name

Make it Fly

Make Music

Race to the Finish

Hide and Seek

Create a Story

Fashion Game

Pong Game

Let's Dance

Catch Game

Virtual Pet

[ntlrsk]

Those look great! The two I had questions about are Let's Dance and the Story one. (1) For dance I wonder if it would be good to show different poses of the same dancers (like how Pong has animation)? (2) And for story either totally different characters each time, or more of a story progression? I can provide if that's helpful!

[carljbowman]

@ntlrsk - Thanks for the notes.

1) Let's Dance - Did you have particular dance poses or sequence in mind? 2) Create a Story - Awesome! Would you mind providing the 3 frames?

Super easy to update!

[ntlrsk]

Here's a possibility for dance as one big image - Champ99 in four dance positions across (right now one is hidden in this project): https://scratch.mit.edu/projects/129601771/#editor Similar to this:

[ntlrsk]

Or if we want the Dance project to look more like the sample project, a similar idea but with our other character ( like this https://scratch.mit.edu/projects/129516330/#editor )

[ntlrsk]

For Story how about these three (which we use on the cards):

Or are they too different?

[carljbowman]

@ntlrsk - I updated my previous comment

1) Let's Dance - There are two versions V1 with Champ & V2 with Jo. Let me know if you have a preference. 2) Create a Story - We tried to avoid using text in the images for translation purposes, so I did not include the speech bubble. 3) Animate Your Name - As we discussed yesterday, I changed the name from 'Scratch' back to 'Ana'.

[ntlrsk]

@carljbowman Let's go with Jouvi for the dancer They all look good!

[ntlrsk]

One more minor question -was wondering whether to have the medium haircut for the Fashion Game. Excited to see these on the site!

[mewtaylor]

Implemented in https://github.com/LLK/scratch-www/pull/1008