fix: avoid border fading in the corner

Author: mhenriette

src/components/cards/challenge/Challenge.tsx

@@ -27,17 +27,17 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
   const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
-  const learningMaterialsCount = data?.learningModules?.length + data?.courses?.length || 0;
+  const learningMaterialsCount = data?.learningModules?.length + data?.courses?.length
 
   return (
     <div className="w-full flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
-      <div className="border-solid border-b border-r-0 sm:border-b-0 sm:border-r md:border-b md:border-r-0 lg:border-r lg:border-b-0 border-gray-300 bg-white rounded-3xl sm:p-8 sm:pb-6 p-6 lg:w-2/3">
+      <div className="border-solid border -m-px border-gray-200 bg-white rounded-3xl sm:p-8 sm:pb-6 p-6 lg:w-2/3">
         <div className="flex flex-col mb-1">
           <div className="lg:pr-20">
             {expiresAt && (
               <div className="text-gray-400 lg:w-2/3 text-sm font-normal mb-4">
-                  <span>{t("communities.overview.challenge.deadline")}</span>
-                  <span className="font-medium pl-1">{expiresAt}</span>
+                <span>{t("communities.overview.challenge.deadline")}</span>
+                <span className="font-medium pl-1">{expiresAt}</span>
               </div>
             )}
             <div className="text-lg text-gray-900 font-medium leading-normal mb-4">{data.name}</div>
@@ -59,7 +59,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
         </div>
       </div>
       <div className="p-6">
-        <div className={"mx-auto relative rounded-full mb-5 w-[147px] h-[184px]"}>
+        <div className="mx-auto relative rounded-full mb-5 w-[147px] h-[184px]">
           <Image src={data?.certificateData?.icon} alt="achievement" fill priority />
         </div>
         <div className="">