more for the overhaul

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -1,10 +1,10 @@
-import ListButton from "@/components/list-button"
 import Sheet from "@/components/sheet/sheet"
 import { useSheet } from "@/hooks/use-sheet"
 import { ListIcon } from "@phosphor-icons/react"
 import { useTournament } from "../../queries"
 import { Button, Flex, Loader, Stack } from "@mantine/core"
 import { lazy, Suspense } from "react"
+import { NavTile } from "../started-tournament/sections/nav-grid"
 
 const RulesContent = lazy(() => import("./rules-content"));
 
@@ -18,11 +18,7 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
 
   return (
     <>
-      <ListButton
-        label={`View Rules`}
-        Icon={ListIcon}
-        onClick={open}
-      />
+      <NavTile label="Rules" Icon={ListIcon} onClick={open} />
 
       <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
         <Stack gap="xs">