[#556]: Fix text visibility in Dark mode on 404 page #557
Conversation
frontend/src/pages/404/index.jsx
Outdated
|
|
||
| function NotFound() { | ||
| const { t: tPNF } = useTranslation('translation', { | ||
| keyPrefix: 'pageNotFound', | ||
| }); | ||
| const { isDarkMode } = useTernaryDarkMode(); | ||
| const paragraphClass = `fs-5 mb-3 text-${isDarkMode ? 'white' : 'black'}`; |
There was a problem hiding this comment.
@sergiozeppo do we have bootstrap themes? I think we can use bootstrap css variables/classes that changes color depends on theme
…raph color changing
Hi, @fey ! Check now, please. As I can say, code has become more concise and convenient, thanks! Also, I don't know where to define the new class, so created the file. If it's not a good practice for Hexlet, let me know, where I should have defined it, and I'll fix it. |
| @@ -19,11 +22,11 @@ function NotFound() { | |||
| </div> | |||
| <div className="col"> | |||
| <h1 className="mb-4">{tPNF('title')}</h1> | |||
| <p className="fs-5 text-black mb-3">{tPNF('whatHappened.title')}</p> | |||
There was a problem hiding this comment.
@sergiozeppo i watched code and current behavior and consider that we can just remove text-black color classes and do not add another. It will work well on dark and white theme.
BTW bootstrap has class for default color https://getbootstrap.com/docs/5.3/utilities/colors/ .text-body
There was a problem hiding this comment.
i watched code and current behavior and consider that we can just remove
text-blackcolor classes and do not add another. It will work well on dark and white theme.
Hi there, @fey ! You was totally right, deleted all of this unnecessary stuff. Works as intended.
BTW bootstrap has class for default color https://getbootstrap.com/docs/5.3/utilities/colors/
.text-body
Thanks for remark!
…cordance with @fey remarks
|
@HelenOne deploy pls |
Hi there, Hexlet team!
I found the issue and I'm fixing it by myself
Fixes #556
The page is looking better now:
