feat: add login page #24
Conversation
|
✔️ Deploy Preview for kcd-react ready! 🔨 Explore the source changes: ae287d3 🔍 Inspect the deploy log: https://app.netlify.com/sites/kcd-react/deploys/60de1aa8d227410007e955e5 😎 Browse the preview: https://deploy-preview-24--kcd-react.netlify.app |
|
Looks super! I'll look at the code soon, but I had a few thoughts on the visuals. Can you figure out why autofill makes it look so bad (both on light and dark mode):
I'm not 100% certain I prefer this over the gray (teamless) Alex profile. What do you think?
Rather thank making the entire form disappear, I think I'd rather render this message in the same place we put the error message:
I especially like including the ✨ because the magic link email includes it so it helps create cohesion. What do you think? |
|
One other note about the teamless Alex profile photo. When a user is logged in, if they don't have a photo then we fallback to Alex in their team color, so I think that creates cohesion. |
|
True, but it can also be confusing. It might give the user the impression they're logged in when they're not. Let's roll back Alex, and see if we get messages from confused users? Regarding the autofill thing, I'll try fix it, but it will be hacky. Browsers don't really support customizing the autofill style. Which sucks. |
|
Regarding Alex again, desktop resolution labels that button as
|
|
I think that design was made before we had avatars |
|
| @@ -1,3 +1,30 @@ | |||
| :focus:not(:focus-visible) { | |||
| outline: none; | |||
| } | |||
|
|
|||
There was a problem hiding this comment.
lol, what a mess we have to deal with here 😆
Thanks!
styles/app.css
Outdated
| input:-webkit-autofill:focus, | ||
| input:-webkit-autofill:active { | ||
| -webkit-text-fill-color: black !important; | ||
| -webkit-box-shadow: 0 0 0 999px #e6e9ee inset !important; /* gray-200 */ |
There was a problem hiding this comment.
Maybe we should create a css variable so this and gray-200 can use the same thing (also allows us to change it for light/dark mode as needed).
There was a problem hiding this comment.
Somewhat done with ae287d3. I think we can build upon that to improve things futher. Think of slimming down the gray-pallete, and assign colors like. I need to research a bit, but I think we can reduce our current 8 gray colors, to 4 (per theme) by doing so.
<div className="bg-gray-dark" />instead of:
<div className="bg-gray-200 dark:bg-gray-800" />
tailwind.config.js
Outdated
| @@ -44,6 +44,10 @@ module.exports = { | |||
| 500: '#4B96FF', | |||
| 100: '#E8F2FF', | |||
| }, | |||
| red: { | |||
| // TODO: decide if this is a good color, I just took team-red | |||
| 500: '#FF4545', | |||
There was a problem hiding this comment.
Seems legit to me. I'd like to hear what Gil has to say though 👍
|
Sorry about the conflict. I resolved it for you. |
Polished the login page 😎