New Editor layout Improvements ☂️

Describe the Issue

This is an umbrella issue to discuss the improvement to the editor layout: Here is the mockup for your reference. https://www.figma.com/file/BINkSLYG2VzT9GGEajhoiH/Untitled?node-id=0%3A1

General:

• Make the reset step contextual (show it along with the help button at the button of the lower jaw after a few attempts) #46272
• Add Sign up to save progress button above all elements in the lower jaw for un-auth #46401
• Add the modal progress bar to the button of the lower jaw. #46811
• Add a share button below the progress bar at the end of each project. (Custom twitter cards)
• Confetti at the end of each project.
• Add a quote to the lower jaw when tests pass. #46429
• Disable button and show loading bar on challenge submission
• Debounce the challenge submission from the epic not the component

Mobile:

• Remove editor side by side display #46276
• Remove double scroll in the editor tab
• Reduce the area to the left of the line count to save space. #46309
• Remove Ctrl + Enter on CTA #46239

Project:

• Minimize tests when they are not run.

Needs further discussion:

• Is having multiple stacking options feasible?
• Making tests challenge completion state more visible when editable region is not visible.
• For mobile, is the lower jaw redundant or the lower buttons row.
• What is the best way to nest tabs and simplify the navigation for Mobile.

Issues

• Toggling the editor tab clears the lower jaw state.
• The focus should be on the editable region of the editor when starting a challenge.

ref: #45997 #46059

[bbsmooth]

I think this might be more of a UI/UX issue than an accessibility issue. I suppose you could make an argument that only using a check mark icon to signal success might be confusing/inaccessible to some people. But since our users will learn what it means relatively quickly (since they are doing this over and over again) I don’t think this is a showstopper. I think it might be more of a question of whether you want to congratulate them or if you are satisfied with just the check mark.

[Ismailtlem]

Hi @ahmadabdolsaheb ,

I am interested in going for this one first : Add the modal progress bar to the button of the lower jaw. I will start on that asap