Add confirm prompt to control panel

[neil-ptr]

Closes: #38

Description

Add prompt to ControlPanel component warning user that redeploying account will reset account states instead of using the native browser confirm method

---

For contributor use:

• Targeted PR against correct branch (see CONTRIBUTING.md)
• Linked to Github issue with discussion and accepted design OR link to spec that describes this work.
• Code follows the standards mentioned here.
• Updated relevant documentation
• Re-reviewed Files changed in the Github PR explorer
• Added appropriate labels

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
flow-playground	✅ Ready (Inspect)	Visit Preview	May 10, 2022 at 4:22PM (UTC)

[neil-ptr]

[srinjoyc]

Looking good! One small note:

Would consider changing up the color scheme a bit to something like this for UX:

^ IE. A neutral outline on the cancel, and a red for destructive action ('Confirm'). The text could be red and the warning icon could be yellow.

Reference

[neil-ptr]

Updated the UI based on @srinjoyc 's recommendations

[MaxStalker]

Updated the UI based on @srinjoyc 's recommendations

Well done, @neilZon !
Personally, I would have put that text on top of the buttons (not to the left) - to make that panel slightly more compact.
But it's not a requirement 😅

[MaxStalker]

It's better to set color of this one here:

flow-playground/src/components/Arguments/styles.tsx

Lines 109 to 124 in d385f01

	export const ControlContainer = styled.div<ControlContainerProps>`
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: ${({ isOk, progress }) => {
	switch (true) {
	case progress:
	return '#a2a2a2';
	case isOk:
	return '#2bb169';
	default:
	return '#EE431E';
	}
	}};
	`;

[neil-ptr]

@MaxStalker how does this look?

[MaxStalker]

Again, personally I would do something like this (maybe even adjust line height on text block)

But (I think) you should tag @srinjoyc or @kerrywei - they are calling these shots :)

[neil-ptr]

@kerrywei @srinjoyc Thoughts on the above pics?

[kerrywei]

@kerrywei @srinjoyc Thoughts on the above pics?

@neilZon what's your thought on the pros and cons of these two designs?

[kerrywei]

I have a big +1 to not use green text and use red instead, to make the warning stand out

[neil-ptr]

@kerrywei @srinjoyc Thoughts on the above pics?

@neilZon what's your thought on the pros and cons of these two designs?

I think @MaxStalker 's recommendation is better since we are taking up less space with the prompt message so I'll probably go that way

[neil-ptr]

Heres what it should look like now @MaxStalker @kerrywei @srinjoyc