Improve recent groups design

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}`)}

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}