shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: light mode tweaks

Browse Source
This commit is contained in:
Henry
2025-12-05 20:47:14 +00:00
parent f71fb63203
commit 6d2ca9e250
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/DateSelector.tsx
View File

@@ -75,11 +75,11 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
return ( return (
<div className="w-[250px] p-4"> <div className="w-[250px] p-4">
<div className="flex items-center text-gray-900 dark:text-white"> <div className="flex items-center text-light-1000 dark:text-dark-1000">
<button <button
type="button" type="button"
onClick={handlePreviousMonth} onClick={handlePreviousMonth}
className="flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-white" className="flex flex-none items-center justify-center p-1.5 text-light-700 hover:text-light-900 dark:text-dark-700 dark:hover:text-dark-1000"
> >
<span className="sr-only">Previous month</span> <span className="sr-only">Previous month</span>
<HiChevronLeft aria-hidden="true" className="h-4 w-4" /> <HiChevronLeft aria-hidden="true" className="h-4 w-4" />
@@ -90,7 +90,7 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
<button <button
type="button" type="button"
onClick={handleNextMonth} onClick={handleNextMonth}
className="flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-white" className="flex flex-none items-center justify-center p-1.5 text-light-700 hover:text-light-900 dark:text-dark-700 dark:hover:text-dark-1000"
> >
<span className="sr-only">Next month</span> <span className="sr-only">Next month</span>
<HiChevronRight aria-hidden="true" className="h-4 w-4" /> <HiChevronRight aria-hidden="true" className="h-4 w-4" />
@@ -110,8 +110,8 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
className={twMerge( className={twMerge(
"flex aspect-square items-center justify-center rounded-lg focus:z-10", "flex aspect-square items-center justify-center rounded-lg focus:z-10",
day.isSelected day.isSelected
? "bg-dark-1000 hover:bg-dark-1000 dark:bg-dark-1000 dark:hover:bg-dark-1000" ? "bg-light-1000 hover:bg-light-1000 dark:bg-dark-1000 dark:hover:bg-dark-1000"
: "bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200", : "bg-transparent hover:bg-light-200 dark:bg-transparent dark:hover:bg-dark-200",
)} )}
> >
<time <time
@@ -121,7 +121,7 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
day.isCurrentMonth day.isCurrentMonth
? "text-light-900 dark:text-dark-900" ? "text-light-900 dark:text-dark-900"
: "text-light-700 dark:text-dark-600", : "text-light-700 dark:text-dark-600",
day.isSelected && "text-light-1000 dark:text-dark-50", day.isSelected && "text-light-50 dark:text-dark-50",
)} )}
> >
{day.date.split("-").pop()?.replace(/^0/, "")} {day.date.split("-").pop()?.replace(/^0/, "")}