Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #996 - Stop alias name from flickering #1000

Merged
merged 1 commit into from
Aug 11, 2021
Merged

Fix #996 - Stop alias name from flickering #1000

merged 1 commit into from
Aug 11, 2021

Conversation

codemist
Copy link
Collaborator

@codemist codemist commented Aug 6, 2021

Flickering on hover has stopped, check demo:

Screen.Recording.2021-08-06.at.3.43.27.PM.mov

@codemist codemist requested a review from maxxcrawford August 6, 2021 22:46
Copy link
Collaborator Author

@codemist codemist left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Started a self review for clarification

.relay-email-address-label:placeholder-shown {
color: $color-grey-50;
opacity: 1;
width: 192px;
Copy link
Collaborator Author

@codemist codemist Aug 6, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Magic Number 192px specifically for the placeholder.

opacity: 1;
width: 192px;
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved this into dashboard.scss for clarity

@@ -849,8 +838,7 @@ input:focus::placeholder {
}

.relay-email-address-label:hover {
background: $color-grey-20;
width: 192px;
background: $color-grey-10;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opted for a lighter grey, it looks closer to the input field on Figma (lemme know if you agree!)

Copy link
Contributor

@maxxcrawford maxxcrawford left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this solution may be over-engineered. When testing, I tried adding a specific max-width to the additional-notes class. Please let me know your thoughts!

@codemist codemist added the 🚧 WIP Work in Progress label Aug 11, 2021
@codemist codemist requested a review from maxxcrawford August 11, 2021 20:28
@maxxcrawford maxxcrawford merged commit 97077f0 into main Aug 11, 2021
@maxxcrawford maxxcrawford deleted the name-flicker branch August 11, 2021 21:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚧 WIP Work in Progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants