Rough onboarding flow part 1

[voltrevo]

What is this PR doing?

Adds a rough version of the onboarding ui with very little styling:

How can these changes be manually tested?

Click the Get Started → button on the popup to view the screens above (click the numbers).

Does this PR resolve or contribute to any issues?

Contributes to #90.

Checklist

• I have manually tested these changes
• Post a link to the PR in the group chat

Guidelines

• If your PR is not ready, mark it as a draft
• The resolve conversation button is for reviewers, not authors
  • (But add a 'done' comment or similar)

[kautukkundan]

Looks Good overall 👍🏼

[kautukkundan]

Suggested change

	<div className="show-box">
	<div style={{ display: 'inline-block' }}>
	<Button
	onPress={() => setExpanded(true)}
	highlight={false}
	icon={{
	src: browser.runtime.getURL('assets/eye.svg'),
	px: 19,
	}}
	>
	Show secret phrase
	</Button>
	</div>
	</div>
	<QuickRow>
	<div style={{ display: 'inline-block' }}>
	<Button
	onPress={() => setExpanded(!expanded)}
	highlight={false}
	icon={{
	src: browser.runtime.getURL('assets/eye.svg'),
	px: 19,
	}}
	>
	{expanded ? "Hide secret phrase" : "Show secret phrase"}
	</Button>
	</div>
	{expanded && <Button
	onPress={() => {}}
	highlight={true}
	icon={{
	src: browser.runtime.getURL('assets/arrow-small.svg'),
	px: 19,
	}}
	>
	Review secret phrase
	</Button>}
	</QuickRow>

Can use a single button for showing/hiding the box. Might need to change the CSS as well.
display:none in CSS still renders an invisible component

[voltrevo]

display:none in CSS still renders an invisible component

I don't think that's true.

Does this change your view? Either way I feel these are premature optimizations and it's probably better to move forward than iron them out.

[kautukkundan]

Does this change your view?

No, Not really. Also the discussion is from 2012.
The element must atleast be present in the DOM for CSS to be applied on it. If there is no element then there cant be any style.

Either way I feel these are premature optimizations

Yeah I do agree. However what i feel that once the code base grows big, these things will be hard to find. Better to take action on smaller things than leave them for later.

eg - this was a big enough change which could be delayed for later.

[voltrevo]

Ah I see you were using the word 'render' differently 👍.

I'm not convinced it matters but I also don't mind either way. Fixed.

[voltrevo]

.

(I thought I had pending comments and was trying to troubleshoot it. Not sure what happened and now I can't delete this 🤷‍♂️.)

[kautukkundan]

Hey this block is unnecessarily too long
This suggestion handles the same thing in much less lines of code, happy to discuss.
#93 (comment)

[kautukkundan]

the hyperlink doesn't seem to work. Here's the code snippet -
(button need fixing though)

    <QuickRow>
        <div style={{ display: 'inline-block' }}>
          <Button
            onPress={() => setExpanded(!expanded)}
            highlight={false}
            icon={{
              src: browser.runtime.getURL('assets/eye.svg'),
              px: 19,
            }}
          >
            {expanded ? "Hide secret phrase" : "Show secret phrase"}
          </Button>
        </div>
        {expanded && <Button
            onPress={() => {}}
            highlight={true}
            icon={{
              src: browser.runtime.getURL('assets/arrow-small.svg'),
              px: 19,
            }}
          >
            Review secret phrase
          </Button>}
     </QuickRow>

[voltrevo]

Not sure what you mean by the hyperlink? If you mean the Review secret phrase button, that's added in the next PR.

[voltrevo]

Hey this block is unnecessarily too long

I've implemented this because I don't mind the combined button approach but I don't think there was anything wrong there. Less code doesn't mean better code. Reviews on the other hand benefit greatly if they can be made shorter.