feat: implement profile page #28
Conversation
|
✔️ Deploy Preview for kcd-react ready! 🔨 Explore the source changes: 2cdbb42 🔍 Inspect the deploy log: https://app.netlify.com/sites/kcd-react/deploys/60e359a327e6fa0008692589 😎 Browse the preview: https://deploy-preview-28--kcd-react.netlify.app |
|
|
||
| function LogoutIcon() { | ||
| return ( | ||
| <svg width="24" height="24" fill="none" viewBox="0 0 24 24"> |
There was a problem hiding this comment.
TIL that the icons are coming from https://iconic.app. Note to self, replace the other icons as well, as those were copied from figma.
| <div className="col-span-full mb-12 lg:col-span-5 lg:col-start-8 lg:mb-0"> | ||
| <H2 className="mb-2">Need to login somewhere else?</H2> | ||
| <H2 variant="secondary" as="p"> | ||
| Scan this QR code on the other device. |
There was a problem hiding this comment.
Still waiting, but added something creative in the mean while.
There was a problem hiding this comment.
I like the way it looks. Technically it's challenging though because I don't want the QR code to show up without the user clicking it for two reasons:
- I want the QR code to expire after a short period
- I don't want someone else to be able to scan it over the person's shoulder
So it should be hidden until the user clicks something and when they do we'll make a request to generate it.
There was a problem hiding this comment.
Makes sense. How about adding an overlay mentioning "click to reveal", exactly where the image is right now. And then when clicked, we fade that overlay out, and the QR in?
There was a problem hiding this comment.
Oh yeah, good idea. And maybe we could put a little 60 second countdown timer in the middle of the QR code. Once the time is up it fades back out and you have to generate a new one. We'll also want a button to hide it earlier. This is all the "fun" and "extra" stuff so if you have other things you want to get done sooner go ahead and just keep this bit out for now.
There was a problem hiding this comment.
Actually, I'll just merge this as-is. We can come back to this later.
|
I think this one is ready to get merged. I've marked the email input as being read-only, and Gil has let me know that he's okay with the way I've implemented the QR code. He did mention that it can become a bit large. At the same time, I think that's a good thing, as not all phones have super awesome cameras, and the QR code is one of high density. That being said, I have created a note on the project board so we can think about it for a moment, and maybe come back to it (and make it smaller). https://github.com/kentcdodds/remix-kentcdodds/projects/1#card-64414167 |
| <div className="col-span-full mb-12 lg:col-span-5 lg:col-start-8 lg:mb-0"> | ||
| <H2 className="mb-2">Need to login somewhere else?</H2> | ||
| <H2 variant="secondary" as="p"> | ||
| Scan this QR code on the other device. |
There was a problem hiding this comment.
I like the way it looks. Technically it's challenging though because I don't want the QR code to show up without the user clicking it for two reasons:
- I want the QR code to expire after a short period
- I don't want someone else to be able to scan it over the person's shoulder
So it should be hidden until the user clicks something and when they do we'll make a request to generate it.
I've added some colors and content to the profile page, but I'm waiting for response from Gil for the QR code implementation.