Make border and click same on blog post as project (#380)

NTNU-SmallSatLab · Apr 29, 2024 · c604a28 · c604a28
1 parent abf700f
commit c604a28
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 48 deletions.
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
@@ -88,7 +88,7 @@ export default async function ProjectsPage() {
                             key={project.id}
                             data-testid="projectCard"
                         >
-                            <Card className="h-full w-full hover:border-blue-500">
+                            <Card className="h-full w-full hover:border-primary">
                                 <CardHeader></CardHeader>
                                 <CardContent>
                                     <div className="w-full">

diff --git a/frontend/src/components/fullBlogCard.tsx b/frontend/src/components/fullBlogCard.tsx
@@ -1,7 +1,6 @@
 import {
     BlogCard,
     BlogCardContent,
-    BlogCardFooter,
     BlogCardHeader,
     BlogCardTitle,
 } from "@/components/ui/blogCard";
@@ -47,52 +46,45 @@ export default function FullBlogCard({
     }
 
     return (
-        <BlogCard className={cn(className)}>
-            <BlogCardHeader>
-                {article.coverImage ? (
-                    <Image
-                        src={article.coverImage}
-                        alt={article.coverImage}
-                        width={500}
-                        height={0}
-                        className="aspect-video max-h-[250px] w-full object-cover"
-                    />
-                ) : (
-                    <div className="flex aspect-video max-h-[250px] w-full items-center justify-center">
-                        <PlaceholderImage />
+        <Link
+            href={"/blog/" + article.slug}
+            data-testid="blogCardLink"
+            className="flex flex-col border bg-background p-5 text-card-foreground hover:border-primary"
+        >
+            <BlogCard className={cn(className, "")}>
+                <BlogCardHeader>
+                    {article.coverImage ? (
+                        <Image
+                            src={article.coverImage}
+                            alt={article.coverImage}
+                            width={500}
+                            height={0}
+                            className="aspect-video max-h-[250px] w-full object-cover"
+                        />
+                    ) : (
+                        <div className="flex aspect-video max-h-[250px] w-full items-center justify-center">
+                            <PlaceholderImage />
+                        </div>
+                    )}
+                    <div className="flex gap-2">
+                        <p
+                            className="flex items-center rounded-md bg-primary p-2 text-center text-xs text-white"
+                            data-testid="articleTag"
+                        >
+                            {article.tag ? article.tag : "General"}
+                        </p>
+                        <p className="flex w-fit items-center text-center text-xs text-white">
+                            {formatDate(article.datePublished)}
+                        </p>
                     </div>
-                )}
-                <div className="flex gap-2">
-                    <p
-                        className="flex items-center rounded-md bg-primary p-2 text-center text-xs text-white"
-                        data-testid="articleTag"
-                    >
-                        {article.tag ? article.tag : "General"}
-                    </p>
-                    <p className="flex w-fit items-center text-center text-xs text-white">
-                        {formatDate(article.datePublished)}
+                    <BlogCardTitle>{article.title}</BlogCardTitle>
+                </BlogCardHeader>
+                <BlogCardContent>
+                    <p className="break-words">
+                        {SlicePreviewText(article.content)}
                     </p>
-                </div>
-                <BlogCardTitle>
-                    <Link
-                        className="hover:underline"
-                        href={"/blog/" + article.slug}
-                        data-testid="blogCardLink"
-                    >
-                        {article.title}
-                    </Link>
-                </BlogCardTitle>
-            </BlogCardHeader>
-            <BlogCardContent>
-                <p className="break-words">
-                    {SlicePreviewText(article.content)}
-                </p>
-            </BlogCardContent>
-            <BlogCardFooter>
-                <Link href={"/blog/" + article.slug} className="text-primary">
-                    Read more →
-                </Link>
-            </BlogCardFooter>
-        </BlogCard>
+                </BlogCardContent>
+            </BlogCard>
+        </Link>
     );
 }
diff --git a/frontend/src/components/ui/blogCard.tsx b/frontend/src/components/ui/blogCard.tsx
@@ -9,7 +9,7 @@ const BlogCard = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "flex flex-col border bg-background p-5 text-card-foreground",
+            "flex flex-col bg-background text-card-foreground",
             className,
         )}
         {...props}