Merge branch 'master' of https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2

src/components/Footer.tsx

@@ -22,7 +22,7 @@ export default function Footer() {
   return (
     <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">
+        <div className="flex flex-col items-center gap-1 md:flex-row md:items-start md:gap-3">
           <a
             className="transform-gpu transition-all hover:text-blue-500"
             href="https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2"
@@ -30,13 +30,13 @@ export default function Footer() {
             {ssrSettings.siteName}
           </a>
 
+          <div className="flex divide-x divide-solid divide-neutral-500">
             {buttons.map((button, index) => {
               return (
                 <div
                   key={index}
-                className="flex flex-row items-center justify-center gap-3"
+                  className="flex flex-row items-center justify-center gap-3 pl-2 pr-2"
                 >
-                <div className="h-4 w-[1px] bg-neutral-100"></div>
                   <a
                     href={button.url}
                     className="transform-gpu transition-all hover:text-blue-500"
@@ -47,6 +47,7 @@ export default function Footer() {
               );
             })}
           </div>
+        </div>
 
         <div className="text-sm text-gray-400">Build ID: {buildId}</div>
       </Card>

src/components/GlobalRanking.tsx

@@ -91,7 +91,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
     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">

src/components/Navbar.tsx

@@ -11,7 +11,7 @@ import {
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import Avatar from "./Avatar";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
+import { Button } from "./ui/button";
 import { Card } from "./ui/card";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
@@ -51,7 +51,20 @@ function FriendsButton() {
       </PopoverTrigger>
       <PopoverContent className="p-2">
         {settingsStore?.friends.length == 0 ? (
-          <p className="text-sm font-bold">No friends, add someone!</p>
+          <div className="flex flex-col gap-2">
+            <div>
+              <p className="text-md font-bold">No friends</p>
+              <p className="text-sm text-gray-400">
+                Add new friends by clicking below
+              </p>
+            </div>
+
+            <Link href={"/search"}>
+              <Button className="w-full" size={"sm"}>
+                Search
+              </Button>
+            </Link>
+          </div>
         ) : (
           settingsStore?.friends.map((friend) => {
             return (
@@ -94,19 +107,21 @@ export default function Navbar() {
               <Avatar
                 url={settingsStore.player.profilePicture}
                 label="Your avatar"
-                size={32}
+                size={20}
               />
             }
             href={`/player/${settingsStore.player.id}/top/1`}
           />
         )}
 
-        <Tooltip>
+        <FriendsButton />
+        {/* TODO: fix hydration error? */}
+        {/* <Tooltip>
           <TooltipTrigger>
             <FriendsButton />
           </TooltipTrigger>
           <TooltipContent>Click to view your friends</TooltipContent>
-        </Tooltip>
+        </Tooltip> */}
 
         <NavbarButton
           ariaLabel="View the global ranking"

src/components/SearchPlayer.tsx

@@ -67,14 +67,14 @@ export default function SearchPlayer() {
 
       <div
         className={clsx(
-          "absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-gray-700 shadow-sm md:max-h-[300px]",
+          "absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-popover shadow-sm md:max-h-[300px]",
           players.length > 0 ? "flex" : "hidden",
         )}
       >
         {players.map((player: ScoresaberPlayer) => (
           <a
             key={player.id}
-            className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
+            className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
             href={`/player/${player.id}/top/1`}
           >
             <Avatar label="Account" size={40} url={player.profilePicture} />

src/components/player/PlayerInfo.tsx

@@ -137,6 +137,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                     onClick={addFriend}
                     tooltip={<p>Add as Friend</p>}
                     icon={<UserIcon width={24} height={24} />}
+                    color="bg-green-500"
                   />
                 )}
 
@@ -145,6 +146,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                     onClick={removeFriend}
                     tooltip={<p>Remove Friend</p>}
                     icon={<XMarkIcon width={24} height={24} />}
+                    color="bg-red-500"
                   />
                 )}
               </>

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import { Slot } from "@radix-ui/react-slot";
-import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
 
-import { cn } from "@/utils/utils"
+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",
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
-  }
+  },
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

tailwind.config.ts

@@ -25,6 +25,7 @@ module.exports = {
         "pp-blue": "hsl(var(--primary))",
       },
       textColor: {
+        primary: "hsl(var(--primary))",
         "pp-blue": "#9fa8f3",
       },
       colors: {