From 11d2e298e8cc5cac07aa2c60e194bf4460cefb21 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Fri, 26 Jan 2024 16:11:51 -0500
Subject: [PATCH] Improve recent groups design

---
 src/app/groups/recent-group-list-card.tsx | 6 +++++-
 src/app/groups/recent-group-list.tsx      | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/groups/recent-group-list-card.tsx b/src/app/groups/recent-group-list-card.tsx
index 7809566..0218fb8 100644
--- a/src/app/groups/recent-group-list-card.tsx
+++ b/src/app/groups/recent-group-list-card.tsx
@@ -58,7 +58,11 @@ export function RecentGroupListCard({
 
   return (
     <li key={group.id}>
-      <Button variant="outline" className="h-fit w-full py-3" asChild>
+      <Button
+        variant="secondary"
+        className="h-fit w-full py-3 rounded-lg border bg-card shadow-sm"
+        asChild
+      >
         <div
           className="text-base"
           onClick={() => router.push(`/groups/${group.id}`)}
diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx
index 9ad6f56..b646997 100644
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -155,7 +155,7 @@ function GroupList({
   setState: (state: SetStateAction<RecentGroupsState>) => void
 }) {
   return (
-    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+    <ul className="grid gap-2 sm:grid-cols-2">
       {groups.map((group) => (
         <RecentGroupListCard
           key={group.id}