bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(TaskCard): refine date picker UI and adjust styling for better usability

Browse Source 
- Reduced dimensions and padding of the date picker for a more compact design.
- Updated button sizes and text styles for improved readability and interaction.
- Adjusted layout spacing to enhance overall visual consistency and user experience.
This commit is contained in:
shancds
2025-07-04 12:22:01 +05:30
parent 31891fae6e
commit 7fe35d646a
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
View File

@@ -253,7 +253,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
{showDatePicker && dropdownPosition && ( {showDatePicker && dropdownPosition && (
<Portal> <Portal>
<div <div
className="w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-[9999] p-3" className="w-52 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-[9999] p-1"
style={{ style={{
position: 'absolute', position: 'absolute',
top: dropdownPosition.top, top: dropdownPosition.top,
@@ -262,26 +262,26 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
ref={datePickerRef} ref={datePickerRef}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-0.5">
<button <button
className="px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-700" className="px-0.5 py-0.5 text-[10px] rounded hover:bg-gray-100 dark:hover:bg-gray-700"
onClick={() => setCalendarMonth(new Date(year, month - 1, 1))} onClick={() => setCalendarMonth(new Date(year, month - 1, 1))}
type="button" type="button"
> >
&lt; &lt;
</button> </button>
<span className="font-semibold text-base text-gray-800 dark:text-gray-100"> <span className="font-semibold text-xs text-gray-800 dark:text-gray-100">
{calendarMonth.toLocaleString('default', { month: 'long' })} {year} {calendarMonth.toLocaleString('default', { month: 'long' })} {year}
</span> </span>
<button <button
className="px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-700" className="px-0.5 py-0.5 text-[10px] rounded hover:bg-gray-100 dark:hover:bg-gray-700"
onClick={() => setCalendarMonth(new Date(year, month + 1, 1))} onClick={() => setCalendarMonth(new Date(year, month + 1, 1))}
type="button" type="button"
> >
&gt; &gt;
</button> </button>
</div> </div>
<div className="grid grid-cols-7 gap-1 mb-2 text-xs text-center"> <div className="grid grid-cols-7 gap-0.5 mb-0.5 text-[10px] text-center">
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(d => ( {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(d => (
<div key={d} className="font-medium text-gray-500 dark:text-gray-400">{d}</div> <div key={d} className="font-medium text-gray-500 dark:text-gray-400">{d}</div>
))} ))}
@@ -294,7 +294,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
<button <button
key={j} key={j}
className={ className={
'w-8 h-8 rounded-full flex items-center justify-center ' + 'w-5 h-5 rounded-full flex items-center justify-center text-[10px] ' +
(isSelected (isSelected
? 'bg-blue-600 text-white' ? 'bg-blue-600 text-white'
: isToday : isToday
@@ -313,33 +313,33 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
</React.Fragment> </React.Fragment>
))} ))}
</div> </div>
<div className="flex gap-2 mt-3"> <div className="flex gap-0.5 mt-1">
<button <button
type="button" type="button"
className="flex-1 px-2 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" className="flex-1 px-0.5 py-0.5 text-[10px] bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
onClick={handleToday} onClick={handleToday}
> >
{t('today')} {t('today')}
</button> </button>
<button <button
type="button" type="button"
className="px-2 py-1 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors" className="px-1 py-0.5 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
onClick={handleClearDate} onClick={handleClearDate}
> >
{t('clear')} {t('clear')}
</button> </button>
</div> </div>
<div className="flex gap-2 mt-2"> <div className="flex gap-1 mt-1">
<button <button
type="button" type="button"
className="flex-1 px-2 py-1 text-sm bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" className="flex-1 px-1 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
onClick={handleTomorrow} onClick={handleTomorrow}
> >
{t('tomorrow')} {t('tomorrow')}
</button> </button>
<button <button
type="button" type="button"
className="flex-1 px-2 py-1 text-sm bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" className="flex-1 px-1 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
onClick={handleNextWeek} onClick={handleNextWeek}
> >
{t('nextWeek')} {t('nextWeek')}