caprine icon indicating copy to clipboard operation
caprine copied to clipboard

Vote button wrong color in dark mode

Open dusansimic opened this issue 2 years ago • 15 comments

Vote button in chat has light background in dark mode.

dusansimic avatar Oct 15 '22 11:10 dusansimic

Hi. @dusansimic i I want to fix this.

Anuran12 avatar Oct 15 '22 12:10 Anuran12

Feel free to work on this :). Send a pull request once you've made a working version. Take a look at some of past pull requests (#1933 and #1931 for example) as an inspiration how to fix the issue.

dusansimic avatar Oct 15 '22 14:10 dusansimic

@dusansimic Okay thanks

Anuran12 avatar Oct 15 '22 14:10 Anuran12

@dusansimic hey.. please help. where can i find the class name of the vote button ?

Anuran12 avatar Oct 15 '22 16:10 Anuran12

@Anuran12 you can find it in the dev tools (open them by pressing F12). You can use the inspect element tool to easily find the element you're looking for in the html tree and from there you can look for the specific style which is causing the issue. Once you find the style, just check which class applies that style and you found the class name you need to patch.

dusansimic avatar Oct 15 '22 20:10 dusansimic

@dusansimic Is it looking good ?

image

Anuran12 avatar Oct 16 '22 05:10 Anuran12

On light mode, the light color is used which in case of light mode is a secondary color. Blue is the primary color. I think in this cases it would be better to use a dark color. There is one available in the variable --secondary-button-background. You can use that css variable for the background of this button.

Also, feel free to open a pull request so I can see the progress and changes in the stylesheets :)

dusansimic avatar Oct 16 '22 09:10 dusansimic

@dusansimic Hey.. --secondary-button-background is not working.

Anuran12 avatar Oct 16 '22 11:10 Anuran12

@dusansimic

image

The variable is not mentioned there.

Anuran12 avatar Oct 16 '22 11:10 Anuran12

So Only rgba() is working..

image

image

Anuran12 avatar Oct 16 '22 11:10 Anuran12

The variable is not mentioned there.

The variable is defined by Messenger website in __fb-dark-mode class.

If it doesn't work when color is specified with a variable, but it does when it's specified manually, it might be that it is overwritten somewhere in the element tree. A similar thing happened in another pull request (https://github.com/sindresorhus/caprine/pull/1938#issuecomment-1279829765). Check it out and try to fix it, we should avoid hardcoding colors when possible.

dusansimic avatar Oct 16 '22 12:10 dusansimic

@dusansimic It's confuting for me :(

I am making a draft PR. then please tell me there what should i do and what should not. Please help

Anuran12 avatar Oct 16 '22 13:10 Anuran12

To open a draft PR, you just create a PR and check the box where it says that you want that PR to be a draft, not a regular one. That way when you're done working, make it a regular PR and I'll check if everything is fine so it can be merged. On the Hacktoberfest website you can find various resources on working with GitHub.

If that is a bit confusing, feel free to just open a regular PR and we will discuss the progress there. I want you to open a PR so I can clearly see what is the current state of the code and what might be causing any issues. That way it would be easier for both you and me to work any problems out :)

dusansimic avatar Oct 16 '22 13:10 dusansimic

@dusansimic I created the PR.

by the way the join room button still not fixed

image

Anuran12 avatar Oct 16 '22 13:10 Anuran12

by the way the join room button still not fixed

It is in my case, however it's not perfect.

image

Check the main branch. If there are some other cases where the issue is still present, feel free to open an issue, describe that case and work on it.

dusansimic avatar Oct 16 '22 13:10 dusansimic