theme changes

src/components/Card.tsx

@@ -3,13 +3,20 @@ import clsx from "clsx";
 
 type CardProps = {
   className?: string;
+  outerClassName?: string;
   children: React.ReactNode;
 };
 
-export default function Card({ className, children }: CardProps) {
+export default function Card({
+  className,
+  outerClassName,
+  children,
+}: CardProps) {
   return (
-    <CardBase className="mt-2">
-      <CardContent className={clsx(className, "mt-2")}>{children}</CardContent>
+    <CardBase className={outerClassName}>
+      <CardContent className={clsx(className, "pb-4 pt-2")}>
+        {children}
+      </CardContent>
     </CardBase>
   );
 }

src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import { ssrSettings } from "@/ssrSettings";
 import { isProduction } from "@/utils/utils";
+import Card from "./Card";
 
 const buttons = [
   {
@@ -19,8 +20,8 @@ const buildId = process.env.NEXT_PUBLIC_BUILD_ID
 
 export default function Footer() {
   return (
-    <footer>
-      <div className="bg-background m-3 flex flex-col items-center justify-center gap-1 rounded-md p-3">
+    <footer className="p-3">
+      <Card className="mb-2 mt-2 flex flex-col items-center justify-center gap-1 !pb-1 !pt-0">
         <div className="flex flex-row gap-3">
           <a
             className="transform-gpu transition-all hover:text-blue-500"
@@ -48,7 +49,7 @@ export default function Footer() {
         </div>
 
         <div className="text-sm text-gray-400">Build ID: {buildId}</div>
-      </div>
+      </Card>
     </footer>
   );
 }

src/components/GlobalRanking.tsx

@@ -111,7 +111,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
   return (
     <main>
       <Container>
-        <Card className="mt-2">
+        <Card outerClassName="mt-2" className="mt-2">
           {pageInfo.loading ? (
             <div className="flex justify-center">
               <Spinner />

src/components/Navbar.tsx

@@ -9,24 +9,24 @@ import {
   UserIcon,
 } from "@heroicons/react/20/solid";
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
 import Avatar from "./Avatar";
-import Button from "./Button";
 import { Card } from "./ui/card";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 interface ButtonProps {
   text: string;
   icon?: JSX.Element;
   href?: string;
   ariaLabel: string;
-  children?: React.ReactNode;
 }
 
-function NavbarButton({ text, icon, href, ariaLabel, children }: ButtonProps) {
+function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
   return (
     <div className="group">
       <a
         aria-label={ariaLabel}
-        className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
+        className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[10px] transition-all hover:cursor-pointer hover:bg-blue-500"
         href={href}
       >
         <>
@@ -34,12 +34,6 @@ function NavbarButton({ text, icon, href, ariaLabel, children }: ButtonProps) {
           <p className="hidden md:block">{text}</p>
         </>
       </a>
-
-      {children && (
-        <div className="absolute z-20 hidden divide-y rounded-md bg-gray-600 opacity-[0.98] shadow-sm group-hover:flex">
-          <div className="p-2">{children}</div>
-        </div>
-      )}
     </div>
   );
 }
@@ -65,42 +59,42 @@ export default function Navbar() {
           />
         )}
 
-        <NavbarButton
-          ariaLabel="View your friends"
-          text="Friends"
-          icon={<UserIcon height={20} width={20} />}
-          href="/search"
-        >
-          {settingsStore?.friends.length == 0 ? (
-            <p className="text-sm font-bold">No friends, add someone!</p>
-          ) : (
-            settingsStore?.friends.map((friend) => {
-              return (
-                <Button
-                  key={friend.id}
-                  className="mt-2"
-                  color="bg-gray-500"
-                  text={friend.name}
-                  url={`/player/${friend.id}/top/1`}
-                  icon={
-                    <Avatar
-                      url={friend.profilePicture}
-                      label={`${friend.name}'s avatar`}
-                      size={20}
-                    />
-                  }
-                />
-              );
-            })
-          )}
-
-          <Button
-            className="mt-2"
-            text="Search"
-            url="/search"
-            icon={<MagnifyingGlassIcon height={20} width={20} />}
-          />
-        </NavbarButton>
+        <Popover>
+          <PopoverTrigger>
+            <NavbarButton
+              ariaLabel="View your friends"
+              text="Friends"
+              icon={<UserIcon height={20} width={20} />}
+            />
+          </PopoverTrigger>
+          <PopoverContent className="p-2">
+            {settingsStore?.friends.length == 0 ? (
+              <p className="text-sm font-bold">No friends, add someone!</p>
+            ) : (
+              settingsStore?.friends.map((friend) => {
+                return (
+                  <Link
+                    key={friend.id}
+                    href={`/player/${friend.id}/top/1`}
+                    className="w-full"
+                  >
+                    <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
+                      <Avatar
+                        url={friend.profilePicture}
+                        label="Friend avatar"
+                        size={48}
+                      />
+                      <div>
+                        <p className="text-sm text-gray-400">#{friend.rank}</p>
+                        <p>{friend.name}</p>
+                      </div>
+                    </div>
+                  </Link>
+                );
+              })
+            )}
+          </PopoverContent>
+        </Popover>
         <NavbarButton
           ariaLabel="View the global ranking"
           text="Ranking"

src/components/player/PlayerInfo.tsx

@@ -111,7 +111,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
   const scoreStats = playerData.scoreStats;
 
   return (
-    <Card className="mt-2">
+    <Card outerClassName="mt-2" className="mt-2">
       {/* Player Info */}
       <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
         <div className="min-w-fit">

src/components/player/PlayerPage.tsx

@@ -67,7 +67,7 @@ export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
     return (
       <main>
         <Container>
-          <Card className="mt-2">
+          <Card outerClassName="mt-2" className="mt-2">
             <div className="p-3 text-center">
               <div role="status">
                 <div className="flex flex-col items-center justify-center gap-2">
@@ -90,7 +90,7 @@ export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
       <Container>
         <PlayerInfo playerData={playerData} />
         {/* Chart */}
-        <Card className="mt-2">
+        <Card outerClassName="mt-2">
           {/* Badges */}
           <div
             className={clsx(

src/components/player/Scores.tsx

@@ -97,9 +97,9 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   }
 
   return (
-    <Card className="mt-2 w-full items-center md:flex-col">
+    <Card outerClassName="mt-2" className="w-full items-center md:flex-col">
       {/* Sort */}
-      <div className="m-4 w-full text-sm">
+      <div className="mb-2 mt-1 w-full text-sm">
         <div className="flex justify-center gap-2">
           {Object.values(SortTypes).map((sortType) => {
             return (

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/utils/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }