From 43eec03edd2e6330362cc5605a48a91387eb49d3 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Sun, 20 Jul 2025 19:15:26 +0100
Subject: [PATCH] style: remove rounded borders on cards

---
 src/containers/PostListing.tsx |  86 +++++++-------
 src/pages/home.tsx             |   2 +-
 src/pages/posts.tsx            | 210 ++++++++++++++++-----------------
 3 files changed, 149 insertions(+), 149 deletions(-)

diff --git a/src/containers/PostListing.tsx b/src/containers/PostListing.tsx
index 8514341..4071ed2 100644
--- a/src/containers/PostListing.tsx
+++ b/src/containers/PostListing.tsx
@@ -1,9 +1,9 @@
 // @ts-nocheck
 import {
-	Card,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Link } from "react-router"
@@ -11,45 +11,45 @@ import { Link } from "react-router"
 import { convertDate } from "@/utils/convertDate"
 
 const PostListing = ({ posts, title, showAllButton }) => {
-	return (
-		<>
-			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
-					{title}
-				</h2>
-			</div>
-			<div className="grid grid-cols-1 md:grid-cols-1 gap-3">
-				{posts.map((post) => (
-					<Link
-						to={`/posts/${post.slug}`}
-						key={post.slug}
-						className="block no-underline"
-					>
-						<Card
-							key={post.slug}
-							className="flex flex-col h-full  hover:bg-primary/5 py-4 px-0"
-						>
-							<CardHeader className="px-4 md:px-6">
-								<CardTitle className="leading-snug font-semibold ">
-									{post.title}
-								</CardTitle>
-								<CardDescription className="text-sm text-muted-foreground">
-									<div className="flex justify-between gap-2">
-										<span className="text-sm">{convertDate(post.date)}</span>
-									</div>
-								</CardDescription>
-							</CardHeader>
-						</Card>
-					</Link>
-				))}
-			</div>
-			{showAllButton && (
-				<Button asChild variant="" className="w-full mt-4">
-					<Link to="/posts/page/1">View all</Link>
-				</Button>
-			)}
-		</>
-	)
+  return (
+    <>
+      <div className="mb-5 ">
+        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+          {title}
+        </h2>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-1 gap-3">
+        {posts.map((post) => (
+          <Link
+            to={`/posts/${post.slug}`}
+            key={post.slug}
+            className="block no-underline"
+          >
+            <Card
+              key={post.slug}
+              className="flex flex-col h-full hover:bg-primary/5 py-4 rounded-none"
+            >
+              <CardHeader className="">
+                <CardTitle className="leading-snug font-semibold ">
+                  {post.title}
+                </CardTitle>
+                <CardDescription className="text-sm text-muted-foreground">
+                  <div className="flex justify-between gap-2">
+                    <span className="text-sm">{convertDate(post.date)}</span>
+                  </div>
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+      {showAllButton && (
+        <Button asChild variant="" className="w-full mt-4">
+          <Link to="/posts/page/1">View all</Link>
+        </Button>
+      )}
+    </>
+  )
 }
 
 export default PostListing
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index a2996a1..5c2550d 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -9,7 +9,7 @@ const HomePage = () => {
   const { posts } = usePosts()
   return (
     <MainTemplate>
-      <Card className="mb-8">
+      <Card className="mb-8 rounded-none">
         <CardHeader>
           <h1 className="scroll-m-20 text-left text-3xl font-semibold">
             Another software engineer with a blog
diff --git a/src/pages/posts.tsx b/src/pages/posts.tsx
index 11efc5b..13fc7a4 100644
--- a/src/pages/posts.tsx
+++ b/src/pages/posts.tsx
@@ -4,128 +4,128 @@ import MainTemplate from "@/templates/MainTemplate"
 import { useParams, useNavigate } from "react-router"
 import { convertDate } from "@/utils/convertDate"
 import {
-	Pagination,
-	PaginationContent,
-	PaginationItem,
-	PaginationNext,
-	PaginationPrevious,
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
 } from "@/components/ui/pagination"
 import {
-	Card,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Link } from "react-router"
 import { usePosts } from "@/hooks/usePosts"
 
 const PostsPage = () => {
-	const { page } = useParams()
+  const { page } = useParams()
 
-	const navigate = useNavigate()
+  const navigate = useNavigate()
 
-	const { posts } = usePosts()
-	const postsPerPage = 10
+  const { posts } = usePosts()
+  const postsPerPage = 10
 
-	const currentPage = Number(page) || 1
-	const totalPages = Math.ceil(posts.length / postsPerPage)
+  const currentPage = Number(page) || 1
+  const totalPages = Math.ceil(posts.length / postsPerPage)
 
-	useEffect(() => {
-		if (currentPage < 1 || currentPage > totalPages) {
-			navigate(`/posts/page/1`, { replace: true })
-		}
-	}, [currentPage, totalPages, navigate])
+  useEffect(() => {
+    if (currentPage < 1 || currentPage > totalPages) {
+      navigate(`/posts/page/1`, { replace: true })
+    }
+  }, [currentPage, totalPages, navigate])
 
-	const currentPosts = useMemo(() => {
-		const startIndex = (currentPage - 1) * postsPerPage
-		const endIndex = startIndex + postsPerPage
-		return posts.slice(startIndex, endIndex)
-	}, [posts, currentPage, postsPerPage])
+  const currentPosts = useMemo(() => {
+    const startIndex = (currentPage - 1) * postsPerPage
+    const endIndex = startIndex + postsPerPage
+    return posts.slice(startIndex, endIndex)
+  }, [posts, currentPage, postsPerPage])
 
-	const hasNextPage = currentPage < totalPages
-	const hasPrevPage = currentPage > 1
+  const hasNextPage = currentPage < totalPages
+  const hasPrevPage = currentPage > 1
 
-	const goToNextPage = () => {
-		if (hasNextPage) {
-			navigate(`/posts/page/${currentPage + 1}`)
-		}
-	}
+  const goToNextPage = () => {
+    if (hasNextPage) {
+      navigate(`/posts/page/${currentPage + 1}`)
+    }
+  }
 
-	const goToPrevPage = () => {
-		if (hasPrevPage) {
-			navigate(`/posts/page/${currentPage - 1}`)
-		}
-	}
+  const goToPrevPage = () => {
+    if (hasPrevPage) {
+      navigate(`/posts/page/${currentPage - 1}`)
+    }
+  }
 
-	return (
-		<MainTemplate>
-			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
-					All posts
-				</h2>
-			</div>
-			<div className="min-h-[calc(100vh-200px)] flex flex-col">
-				<div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
-					{currentPosts.map((post) => (
-						<Link
-							to={`/posts/${post.slug}`}
-							key={post.slug}
-							className="block no-underline"
-						>
-							<Card
-								key={post.slug}
-								className="flex flex-col h-full hover:bg-primary/5 py-4 px-0"
-							>
-								<CardHeader>
-									<CardTitle className="leading-snug font-semibold">
-										{post.title}
-									</CardTitle>
-									<CardDescription className="text-sm text-muted-foreground">
-										<div className="flex justify-between gap-2">
-											<span className="text-sm">{convertDate(post.date)}</span>
-											<div className="hidden md:block">
-												{post.tags.map((tag, i) => (
-													<Badge
-														className="ml-2 cursor-pointer"
-														key={i}
-														variant="secondary"
-														onClick={(e) => {
-															e.preventDefault()
-															e.stopPropagation()
-															navigate(`/tags/${tag}`)
-														}}
-													>
-														{tag}
-													</Badge>
-												))}
-											</div>
-										</div>
-									</CardDescription>
-								</CardHeader>
-							</Card>
-						</Link>
-					))}
-				</div>
-				<Pagination className="mt-4">
-					<PaginationContent>
-						<PaginationItem>
-							<PaginationPrevious
-								className={`select-none ${hasPrevPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
-								onClick={goToPrevPage}
-							/>
-						</PaginationItem>
-						<PaginationItem>
-							<PaginationNext
-								className={`select-none ${hasNextPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
-								onClick={goToNextPage}
-							/>
-						</PaginationItem>
-					</PaginationContent>
-				</Pagination>
-			</div>
-		</MainTemplate>
-	)
+  return (
+    <MainTemplate>
+      <div className="mb-5 ">
+        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+          All posts
+        </h2>
+      </div>
+      <div className="min-h-[calc(100vh-200px)] flex flex-col">
+        <div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
+          {currentPosts.map((post) => (
+            <Link
+              to={`/posts/${post.slug}`}
+              key={post.slug}
+              className="block no-underline"
+            >
+              <Card
+                key={post.slug}
+                className="flex flex-col h-full hover:bg-primary/5 py-4 px-0 rounded-none"
+              >
+                <CardHeader>
+                  <CardTitle className="leading-snug font-semibold">
+                    {post.title}
+                  </CardTitle>
+                  <CardDescription className="text-sm text-muted-foreground">
+                    <div className="flex justify-between gap-2">
+                      <span className="text-sm">{convertDate(post.date)}</span>
+                      <div className="hidden md:block">
+                        {post.tags.map((tag, i) => (
+                          <Badge
+                            className="ml-2 cursor-pointer"
+                            key={i}
+                            variant="secondary"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              navigate(`/tags/${tag}`)
+                            }}
+                          >
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </Link>
+          ))}
+        </div>
+        <Pagination className="mt-4">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                className={`select-none ${hasPrevPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
+                onClick={goToPrevPage}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                className={`select-none ${hasNextPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
+                onClick={goToNextPage}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </MainTemplate>
+  )
 }
 
 export { PostsPage }