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

Mark text-gray-500 as important for prev/next days in Dayview #25

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

matthijs110
Copy link

Currently, the datepicker does not make a distinction between days from previous and next months:
image

As you can see, the 29 and 30 from the previous month and the 1, 2, etc. from the next month have the same color as the days of the current month.

The expected result is:
image

I have solved this by simply adding ! in front of the text-gray-500 class which makes the distinction for previous and next month days.

@martdegraaf
Copy link

@zoltanszogyenyi can u review and/or merge?

@samal-rasmussen
Copy link

samal-rasmussen commented Mar 18, 2024

A more complete solution is to remove the classes we don't want before adding the classes we want:

if (current < this.first) {
	classList.remove('text-gray-900', 'dark:text-white');
	classList.add('prev', 'text-gray-500', 'dark:text-gray-400');
} else if (current > this.last) {
	classList.remove('text-gray-900', 'dark:text-white');
	classList.add('next', 'text-gray-500', 'dark:text-gray-400');
}

Also we should probably also gray the text on dark mode too. I haven't personally tested how dark:text-gray-400 looks,but it seems to be used elsewhere in combination with text-gray-500 for disabled styling, so it should be the right color.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants