Add border radius in tags (#1116)

Author: CarolinaCobo

app/(app)/articles/_client.tsx

@@ -158,10 +158,10 @@ const ArticlesPage = () => {
             </section>
           </div>
           <section className="col-span-4 hidden lg:block">
-            <div className="mb-8 mt-2 border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
+            <div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
               <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
                 <Image
-                  className="w-full"
+                  className="w-full rounded-t"
                   src={challenge}
                   alt={`"Codú Writing Challenge" text on white background`}
                 />
@@ -191,7 +191,7 @@ const ArticlesPage = () => {
                     key={title}
                     // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
                     href={`/articles?tag=${title.toLowerCase()}`}
-                    className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
+                    className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
                   >
                     {getCamelCaseFromLower(title)}
                   </Link>

app/(app)/page.tsx

@@ -52,10 +52,10 @@ const Home = async () => {
             <TrendingPosts session={session} />
           </Suspense>
           <section className="col-span-5 hidden lg:block">
-            <div className="mb-8 mt-2 border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
+            <div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
               <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
                 <Image
-                  className="w-full"
+                  className="w-full rounded-t"
                   src={challenge}
                   alt={`"Codú Writing Challenge" text on white background`}
                 />

components/ArticlePreview/ArticlePreview.tsx

@@ -96,7 +96,8 @@ const ArticlePreview: NextPage<Props> = ({
   };
 
   return (
-    <article className="my-2 rounded-r border border-l-4 border-neutral-300 border-l-pink-600 bg-white p-4 dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
+    <article className="relative my-2 rounded-r border border-l-0 border-neutral-300 bg-white p-4 pl-6 dark:border-neutral-600 dark:bg-neutral-900">
+      <div className="absolute bottom-[-1px] left-0 top-[-1px] flex w-2 justify-between bg-pink-600" />
       <div className="flex justify-between">
         <div className="mb-4 flex items-center">
           <span className="sr-only">{name}</span>

components/PopularTags/PopularTags.tsx

@@ -21,7 +21,7 @@ export default async function PopularTags() {
           // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
           href={`/articles?tag=${tag.title.toLowerCase()}`}
           key={tag.title}
-          className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
+          className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
         >
           {getCamelCaseFromLower(tag.title)}
         </Link>