update card

package-lock.json

@@ -11,6 +11,7 @@
         "@boiseitguru/cookie-cutter": "^0.2.1",
         "@heroicons/react": "^2.0.18",
         "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@sentry/nextjs": "^7.74.1",
@@ -832,6 +833,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "@boiseitguru/cookie-cutter": "^0.2.1",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.74.1",

src/app/credits/page.tsx

@@ -21,10 +21,7 @@ export default async function Analytics() {
   return (
     <main>
       <Container>
-        <Card
+        <Card>
-          className="mt-2 w-full rounded-md bg-gray-800"
-          innerClassName="flex flex-col items-center justify-center text-center"
-        >
           <h1 className="mb-1 text-3xl font-bold">Credits</h1>
           <p className="mb-8 text-gray-300">
             This website is made possible because of the following:

src/app/privacy/page.tsx

@@ -25,10 +25,7 @@ export default async function Analytics() {
   return (
     <main>
       <Container>
-        <Card
+        <Card>
-          className="mt-2 w-full rounded-md bg-gray-800"
-          innerClassName="flex flex-col items-center justify-center text-center"
-        >
           <h1 className="mb-1 text-3xl font-bold">Privacy</h1>
           <p className="mb-8 text-gray-300">
             This site does not collect personal data. All of the data stored is

src/app/search/page.tsx

@@ -13,18 +13,13 @@ export default function Home() {
   return (
     <main>
       <Container>
-        <Card
+        <Card className="flex flex-col items-center justify-center">
-          className="mt-2 w-full rounded-md bg-gray-800"
-          innerClassName="flex flex-col items-center justify-center"
-        >
           <UnknownAvatar />
 
           <p className="text-xl">Stranger</p>
           <p className="text mt-2">Find a player profile</p>
 
           <SearchPlayer />
-
-          <div className="mb-6"></div>
         </Card>
       </Container>
     </main>

src/components/Card.tsx

@@ -1,26 +1,15 @@
+import { Card as CardBase, CardContent } from "@/components/ui/card";
 import clsx from "clsx";
 
 type CardProps = {
   className?: string;
-  innerClassName?: string;
   children: React.ReactNode;
 };
 
-export default function Card({
+export default function Card({ className, children }: CardProps) {
-  className,
-  innerClassName,
-  children,
-}: CardProps) {
   return (
-    <div className={className}>
+    <CardBase className="mt-2">
-      <div
+      <CardContent className={clsx(className, "mt-2")}>{children}</CardContent>
-        className={clsx(
+    </CardBase>
-          "w-full rounded-md bg-gray-800 p-3 opacity-90",
-          innerClassName,
-        )}
-      >
-        {children}
-      </div>
-    </div>
   );
 }

src/components/Footer.tsx

@@ -20,7 +20,7 @@ const buildId = process.env.NEXT_PUBLIC_BUILD_ID
 export default function Footer() {
   return (
     <footer>
-      <div className="m-3 flex flex-col items-center justify-center gap-1 rounded-md bg-gray-800 p-3">
+      <div className="bg-background m-3 flex flex-col items-center justify-center gap-1 rounded-md p-3">
         <div className="flex flex-row gap-3">
           <a
             className="transform-gpu transition-all hover:text-blue-500"

src/components/GlobalRanking.tsx

@@ -14,6 +14,7 @@ import Pagination from "./Pagination";
 import Spinner from "./Spinner";
 import PlayerRanking from "./player/PlayerRanking";
 import PlayerRankingMobile from "./player/PlayerRankingMobile";
+import { Separator } from "./ui/separator";
 
 const Error = dynamic(() => import("@/components/Error"));
 
@@ -117,7 +118,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
             </div>
           ) : (
             <div className="flex flex-col gap-2">
-              <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
+              <div className="flex items-center gap-2 p-2">
                 {country && (
                   <CountyFlag countryCode={country} className="!h-8 !w-8" />
                 )}
@@ -129,6 +130,8 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                 </p>
               </div>
 
+              <Separator />
+
               {!isMobile && (
                 <table className="table w-full table-auto border-spacing-2 border-none text-left">
                   <thead>
@@ -145,7 +148,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                     {players.map((player) => (
                       <tr
                         key={player.rank}
-                        className="border-b border-gray-700"
+                        className="border-b border-gray-800"
                       >
                         <PlayerRanking
                           showCountryFlag={country ? false : true}
@@ -173,8 +176,8 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
               )}
 
               {/* Pagination */}
-              <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
+              <div className="flex w-full flex-row justify-center">
-                <div className="p-3">
+                <div className="pt-3">
                   <Pagination
                     currentPage={pageInfo.page}
                     totalPages={pageInfo.totalPages}

src/components/Navbar.tsx

@@ -48,7 +48,7 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="flex h-fit w-full rounded-md bg-gray-800">
+      <div className="bg-background flex h-fit w-full rounded-md">
         {settingsStore !== undefined && settingsStore.player && (
           <NavbarButton
             ariaLabel="Your profile"

src/components/leaderboard/Leaderboard.tsx

@@ -127,7 +127,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
           </div>
         </Card>
         <Card className="mt-2 h-fit">
-          <div className="flex justify-center gap-2">
+          <div className="mb-2 mt-2 flex justify-center gap-2">
             {difficulties.map((diff) => {
               return (
                 <div
@@ -161,7 +161,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
 
           {/* Pagination */}
           <div>
-            <div className="p-3">
+            <div className="pt-3">
               <Pagination
                 currentPage={leaderboardScoredsData.page}
                 totalPages={leaderboardScoredsData.totalPages}

src/components/player/Scores.tsx

@@ -99,7 +99,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   return (
     <Card className="mt-2 w-full items-center md:flex-col">
       {/* Sort */}
-      <div className="m-2 w-full text-sm">
+      <div className="m-4 w-full text-sm">
         <div className="flex justify-center gap-2">
           {Object.values(SortTypes).map((sortType) => {
             return (
@@ -128,7 +128,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="grid grid-cols-1 divide-y divide-gray-500">
+          <div className="grid grid-cols-1 divide-y divide-gray-800">
             {!scores.loading && scores.scores.length == 0 ? (
               <p className="text-red-400">{errorMessage}</p>
             ) : (
@@ -152,7 +152,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
 
       {/* Pagination */}
       <div>
-        <div className="p-3">
+        <div className="pt-3">
           <Pagination
             currentPage={scores.page}
             totalPages={scores.totalPages}

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/utils/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/utils/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }