fix: blocked issues, style: issue details sidebar

This commit is contained in:
Aaryan Khandelwal 2022-12-20 20:20:45 +05:30
parent afcf1083ff
commit 8ae9c3f15a
15 changed files with 163 additions and 141 deletions

View file

@ -63,7 +63,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
return (
<>
<div className="bg-white p-3">
<div className="border bg-white p-3 rounded-md">
<div className="grid grid-cols-8 gap-2 divide-x">
<div className="col-span-3 space-y-3">
<div className="flex justify-between items-center gap-2">
@ -74,7 +74,15 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
</Link>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2">
<span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
<span
className={`text-xs border px-3 py-0.5 rounded-xl ${
today < startDate
? "text-orange-500 border-orange-500"
: today > endDate
? "text-red-500 border-red-500"
: "text-green-500 border-green-500"
}`}
>
{today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
</span>
</div>
@ -86,20 +94,19 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
<div className="grid grid-cols-3 gap-x-2 gap-y-3 text-xs">
<div className="flex items-center gap-2 text-gray-500">
<CalendarDaysIcon className="h-4 w-4" />
Cycle dates
</div>
<div>
<div className="col-span-2">
{renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
</div>
<div className="flex items-center gap-2 text-gray-500">
<UserIcon className="h-4 w-4" />
Created by
</div>
<div className="flex items-center gap-2">
<div className="col-span-2 flex items-center gap-2">
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<Image
src={cycle.owned_by.avatar}
@ -119,7 +126,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
<CalendarDaysIcon className="h-4 w-4" />
Active members
</div>
<div></div>
<div className="col-span-2"></div>
</div>
<div className="flex items-center gap-2">
<Button theme="secondary" className="flex items-center gap-2" disabled>