Feat: onboarding data privacy #48
Conversation
messages/renderer/en.json
Outdated
There was a problem hiding this comment.
I didn't review any of the translation strings in this file or others. Let me know if that's wrong.
There was a problem hiding this comment.
I think that is fine!
| padding: '12px 32px', | ||
| }} | ||
| > | ||
| <BackArrow>←</BackArrow> |
There was a problem hiding this comment.
I'd love to give this an aria-label for screen readers. I don't think screen readers will do a great job with this.
| step === 1 | ||
| ? 'DataPrivacy' | ||
| : step === 2 | ||
| ? 'NextStep' | ||
| : 'PrivacyPolicyScreen' |
There was a problem hiding this comment.
Nit: might just be me, but I find nested ternary expressions hard to read. Maybe something like this, if you want to maintain this being a single expression?
| step === 1 | |
| ? 'DataPrivacy' | |
| : step === 2 | |
| ? 'NextStep' | |
| : 'PrivacyPolicyScreen' | |
| { | |
| 1: 'DataPrivacy', | |
| 2: 'NextStep', | |
| 3: 'PrivacyPolicyScreen', | |
| }[step] |
There was a problem hiding this comment.
Good point! I replaced it with an object but not exactly as you suggested because sorry I wasn't sure what you meant/ how to do that.
| setIsEnabled(newValue) | ||
| localStorage.setItem('MetricDiagnosticsPermission', String(newValue)) | ||
|
|
||
| console.log('Permission updated:', newValue) |
There was a problem hiding this comment.
Nit: maybe add a TODO to indicate that this code is going to be replaced?
| {isSvg && icon ? ( | ||
| React.createElement(icon, { width: 18, height: 18 }) | ||
| ) : ( | ||
| <img src={icon as string} alt="" width={18} height={18} /> |
There was a problem hiding this comment.
Nit: I think TypeScript is smart enough to know that icon is a string, so we don't need this cast.
| <img src={icon as string} alt="" width={18} height={18} /> | |
| <img src={icon} alt="" width={18} height={18} /> |
src/renderer/src/images/RedDot.svg
Outdated
There was a problem hiding this comment.
The gradient on this dot looks a little weird. Not sure if that's intentional...feel free to ignore if so.
There was a problem hiding this comment.
I see what you mean. I found a new one to use.
This is the two screens that follow the first screen when onboarding.
related to #42
They are mentioned in that Issue but the UI isn't described.
It can be found in Figma:
https://www.figma.com/design/UIA00RSP8Sz24V0vXvQHeL/(Desktop)-CoMapeo?node-id=0-1&node-type=canvas&t=4esd3jysAvxz8VlD-0
I had to add a bunch of images, some of which are SVG. If I could, I used pngs.
Right now I am just mocking the metrics toggle because the Logic from metrics that exists in mobile is not in the desktop app [yet?].
If you click on Get Started, you get to this screen:
And then if you click on Learn More, you get to this screen:
That is a very, very long scrollable screen.
**The Go back button will take you back to the previous screen. This is all Step 1 and that stays highlighted throughout **