Change card Style

This commit is contained in:
sosokker 2023-11-28 11:58:08 +07:00
parent 36958d5256
commit 145f19f49b

View File

@ -25,6 +25,10 @@ export function TaskCard({ task, deleteTask, updateTask }) {
// ---- DESC AND TAG ---- */ // ---- DESC AND TAG ---- */
if (task.tags === undefined) {
task.tags = [];
}
// Tags // Tags
const tags = const tags =
task.tags.length > 0 ? ( task.tags.length > 0 ? (
@ -32,8 +36,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
{task.tags.map((tag, index) => ( {task.tags.map((tag, index) => (
<div <div
key={index} key={index}
className={`text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 bg-${tag.color}-200 text-${tag.color}-700 rounded-full`}> className={`inline-flex items-center font-bold leading-sm uppercase w-1/3 h-3 p-2 mr-1 bg-${tag.color}-200 text-${tag.color}-700 rounded`}>
{tag.label} <p className="text-[9px] truncate">{tag}</p>
</div> </div>
))} ))}
</div> </div>
@ -42,7 +46,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
// difficulty? // difficulty?
const difficultyTag = task.difficulty ? ( const difficultyTag = task.difficulty ? (
<span <span
className={`text-[10px] inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-full ${ className={`text-[9px] inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-full ${
task.difficulty === 1 task.difficulty === 1
? "bg-blue-200 text-blue-700" ? "bg-blue-200 text-blue-700"
: task.difficulty === 2 : task.difficulty === 2
@ -50,8 +54,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
: task.difficulty === 3 : task.difficulty === 3
? "bg-yellow-200 text-yellow-700" ? "bg-yellow-200 text-yellow-700"
: task.difficulty === 4 : task.difficulty === 4
? "bg-purple-200 text-purple-700" ? "bg-red-200 text-red-700"
: "bg-red-200 text-red-700" : "bg-purple-200 text-purple-700"
}`}> }`}>
difficulty difficulty
</span> </span>
@ -93,7 +97,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
// Subtask count // Subtask count
const subtaskCountTag = task.subtaskCount ? ( const subtaskCountTag = task.subtaskCount ? (
<span className="bg-green-200 text-green-600 text-[10px] font-xl font-bold me-2 px-2.5 py-0.5 rounded"> <span className="flex flex-row items-center bg-green-200 text-green-600 text-[10px] font-xl font-bold me-2 px-2.5 py-0.5 rounded">
<GoChecklist /> {task.subtaskCount} <GoChecklist /> {task.subtaskCount}
</span> </span>
) : null; ) : null;
@ -124,6 +128,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
challenge={task.challenge} challenge={task.challenge}
importance={task.importance} importance={task.importance}
updateTask={updateTask} updateTask={updateTask}
completed={task.completed}
/> />
{/* -------- Task Card -------- */} {/* -------- Task Card -------- */}
@ -138,7 +143,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
}} }}
onMouseLeave={() => { onMouseLeave={() => {
setMouseIsOver(false); setMouseIsOver(false);
}}> }}
onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
{/* -------- Task Content -------- */} {/* -------- Task Content -------- */}
{/* Tags */} {/* Tags */}
{tags} {tags}