-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
Add an 'x' button to close the error messages box #1403 #1508
Add an 'x' button to close the error messages box #1403 #1508
Conversation
@AnnMarieW this works great! Re: styling, I'm thinking we can use a much lighter button right in the corner, something like this: Which I got from applying the following styling in the devtools, along with replacing the SVG icon with just a unicode
Also to make And the close button will want some |
That looks so much better, Thanks! The following commit includes your suggestions and adds a hover effect that makes the x darker. I think it looks nice :-) |
|
||
.dash-fe-error__icon-x:hover | ||
{ | ||
color:black; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's probably a stronger effect than we want - really we just need enough to be able to see a change in the X. Closest analog I see is the grey debug menu buttons, which starts out about the same as #ccc
(just a tiny bit tilted toward blue)
background-color: #B9C2CE; |
And on hover it gets just a bit darker
background-color: #a1a9b5; |
I'm not sure where those exact colors came from, but we may be able to just copy them both.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see, I'll make the change. Thanks!
className='dash-fe-error__icon-x' | ||
onClick={() => clickHandler()} | ||
> | ||
x |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
x | |
× |
This is the ×
character, which makes a nicer button than the letter x.
@@ -1,3 +1,3 @@ | |||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 24"> | |||
<path d="M18 2l18 18m0-18l-18 18" stroke-width="4" stroke="#fff"></path> | |||
<path d="M18 2l18 18m0-18l-18 18" stroke-width="6" stroke="#fff"></path> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<path d="M18 2l18 18m0-18l-18 18" stroke-width="6" stroke="#fff"></path> | |
<path d="M18 2l18 18m0-18l-18 18" stroke-width="4" stroke="#fff"></path> |
Not used in this PR anymore so let's put the original back.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just two minor final edits then this is ready to go! 💃
This is a potential solution for #1403
It works in my local environment, but needs better css for the x button