Skip to content

Commit b72662f

Browse files
mhenriettemhenriette
committed
fix: adjust bounty card
1 parent 90ecfa0 commit b72662f

File tree

1 file changed

+70
-43
lines changed

1 file changed

+70
-43
lines changed

‎src/components/cards/Bounty.tsx‎

Lines changed: 70 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -57,52 +57,79 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
5757
const Component = link.startsWith("http") ? "a" : Link;
5858

5959
return (
60-
<div className="p-5 flex md:flex-row-reverse md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-secondary relative">
61-
<div className="bg-theme-accent flex-col w-full h-full justify-between md:-space-y-1 pl-3 pr-5 mt-7 mb-5">
62-
<Component className="relative w-full block" href={link}>
63-
<div className="font-medium text-md md:pt-1.5">{bounty.course ? bounty.course.name : bounty.name}</div>
64-
</Component>
65-
<Component className="inline-flex md:flex h-2/3 md:flex-row flex-col-reverse justify-between" href={link}>
66-
<div className="text-sm pt-8 md:pt-2 md:pb-4 text-gray-600">{type()}</div>
67-
<div>
68-
<Reward type="gray" reward={bounty.reward}></Reward>
69-
</div>
60+
<div className="p-5 flex md:flex-row-reverse= flex-col md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-secondary relative">
61+
<div className="flex md:flex-row-reverse">
62+
<div className="bg-theme-accent flex-col w-full h-full justify-between md:-space-y-1 pl-3 pr-5 mt-7 mb-5">
63+
<Component className="relative w-full block" href={link}>
64+
<div className="font-medium text-md md:pt-1.5">{bounty.course ? bounty.course.name : bounty.name}</div>
65+
</Component>
66+
<Component className="inline-flex md:flex h-2/3 md:flex-row flex-col-reverse justify-between" href={link}>
67+
<div className="text-sm pt-8- md:pt-2 md:pb-4 text-gray-600">{type()}</div>
68+
<div>
69+
<Reward type="gray" reward={bounty.reward}></Reward>
70+
</div>
71+
</Component>
72+
</div>
73+
<Component className="self-start relative mt-15 md:mt-7" href={link}>
74+
<Avatar
75+
icon={bounty.icon}
76+
image={bounty.image}
77+
color={bounty.colors?.cover?.background || bounty.colors?.primary}
78+
size="medium-fixed"
79+
shape="rounded"
80+
className="w-15 h-15 rounded-xl overflow-hidden"
81+
user={null}
82+
useLink={false}
83+
/>
84+
{bounty?.submissions && (
85+
<Badge
86+
customStyle={{
87+
bottom: "-4px",
88+
right: "-4px",
89+
fontSize: 14,
90+
backgroundColor: bounty.colors.accent,
91+
}}
92+
size="medium"
93+
value={bounty?.unreviewedSubmissionsCount}
94+
className="bottom-0 -right-1 absolute p-4"
95+
/>
96+
)}
7097
</Component>
71-
{bounty.submissions?.length ? (
72-
<div className="mt-4 space-y-0 divide-y divide-gray-200 border-t border-t-solid border-gray-200">
73-
{bounty.submissions.map((submission) => (
74-
<div className="flex space-x-1 relative text-sm font-medium py-3" key={submission.id}>
75-
<div className="flex justify-between w-full pr-0 gap-1 sm:gap-0">
76-
<div className="flex space-x-1">
77-
<Avatar user={submission.user} size="mini" />
78-
<Link
79-
className="text-ellipsis overflow-hidden w-17 sm:w-auto whitespace-nowrap"
80-
href={navigation.community.submissionPath(submission.id, bounty.challenge, bounty?.slug)}
81-
>
82-
{submission.user.displayName}
83-
</Link>
84-
<div className="flex align-middle text-gray-500 text-middle bg-gray-200 px-2 text-xxs rounded-xl m-0 h-5">
85-
{submission.metadata && submission.metadata.feedbacks ? submission.metadata.feedbacks : 0}
86-
</div>
87-
</div>
88-
<div className="text-gray-500 text-base font-normal whitespace-nowrap">
89-
{submission.reviewable ? (
90-
<span>
91-
{t("bounties.prefix.closes")} {convertDate(submission.reviewDeadline)}
92-
</span>
93-
) : (
94-
<span>{t("bounties.closes-soon")}</span>
95-
)}
98+
</div>
99+
{bounty.submissions?.length ? (
100+
<div className="mt-4 space-y-0 divide-y divide-gray-200 border-t border-t-solid border-gray-200 md:w-10/12 md:self-center">
101+
{bounty.submissions.map((submission) => (
102+
<div className="flex space-x-1 relative text-sm font-medium py-3" key={submission.id}>
103+
<div className="flex justify-between w-full pr-0 gap-1 sm:gap-0">
104+
<div className="flex space-x-1">
105+
<Avatar user={submission.user} size="mini" />
106+
<Link
107+
className="text-ellipsis overflow-hidden w-17 sm:w-auto whitespace-nowrap"
108+
href={navigation.community.submissionPath(submission.id, bounty.challenge, bounty?.slug)}
109+
>
110+
{submission.user.displayName}
111+
</Link>
112+
<div className="flex align-middle text-gray-500 text-middle bg-gray-200 px-2 text-xxs rounded-xl m-0 h-5">
113+
{submission.metadata && submission.metadata.feedbacks ? submission.metadata.feedbacks : 0}
96114
</div>
97115
</div>
116+
<div className="text-gray-500 text-base font-normal whitespace-nowrap">
117+
{submission.reviewable ? (
118+
<span>
119+
{t("bounties.prefix.closes")} {convertDate(submission.reviewDeadline)}
120+
</span>
121+
) : (
122+
<span>{t("bounties.closes-soon")}</span>
123+
)}
124+
</div>
98125
</div>
99-
))}
100-
</div>
101-
) : (
102-
<></>
103-
)}
104-
</div>
105-
<Component className="self-start relative mt-15 md:mt-7" href={link}>
126+
</div>
127+
))}
128+
</div>
129+
) : (
130+
<></>
131+
)}
132+
{/* <Component className="self-start relative mt-15 md:mt-7" href={link}>
106133
<Avatar
107134
icon={bounty.icon}
108135
image={bounty.image}
@@ -126,7 +153,7 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
126153
className="bottom-0 -right-1 absolute p-4"
127154
/>
128155
)}
129-
</Component>
156+
</Component> */}
130157
</div>
131158
);
132159
}

0 commit comments

Comments
 (0)