theme changes

2023-11-05 02:55:57 +00:00 · 2023-11-05 02:55:57 +00:00 · 87edf0e3e3
commit 87edf0e3e3
parent 27b4eb38ea
16 changed files with 162 additions and 113 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-separator": "^1.0.3",
        "@radix-ui/react-slider": "^1.1.2",
+        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-tooltip": "^1.0.7",
        "@sentry/nextjs": "^7.74.1",
        "bluebird": "^3.7.2",
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@sentry/nextjs": "^7.74.1",
    "bluebird": "^3.7.2",
--- a/src/app/analytics/page.tsx
+++ b/src/app/analytics/page.tsx
@ -57,7 +57,10 @@ export default async function Analytics() {
  return (
    <main>
      <Container>
-        <Card className="flex flex-col items-center justify-center">
+        <Card
+          outerClassName="mt-2"
+          className="flex flex-col items-center justify-center"
+        >
          <h1 className="text-center text-3xl font-bold">Analytics</h1>
          <p className="text-center">
            Scoresaber metrics and statistics over the last 30 days.
--- a/src/app/credits/page.tsx
+++ b/src/app/credits/page.tsx
@ -21,7 +21,7 @@ export default async function Analytics() {
  return (
    <main>
      <Container>
-        <Card>
+        <Card outerClassName="mt-2">
          <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:
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -5,64 +5,47 @@
@layer base {
  :root {
    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-
+    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-
+    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 224 71.4% 4.1%;
-
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 216 12.2% 83.9%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 262.1 83.3% 57.8%;
  }
 }

--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@ -25,7 +25,7 @@ export default async function Analytics() {
  return (
    <main>
      <Container>
-        <Card>
+        <Card outerClassName="mt-2">
          <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
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@ -13,7 +13,10 @@ export default function Home() {
  return (
    <main>
      <Container>
-        <Card className="flex flex-col items-center justify-center">
+        <Card
+          outerClassName="mt-2"
+          className="flex flex-col items-center justify-center"
+        >
          <UnknownAvatar />

          <p className="text-xl">Stranger</p>
--- a/src/components/Card.tsx
+++ b/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>
  );
 }
--- a/src/components/Footer.tsx
+++ b/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>
  );
 }
--- a/src/components/GlobalRanking.tsx
+++ b/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 />
--- a/src/components/Navbar.tsx
+++ b/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"
--- a/src/components/player/PlayerInfo.tsx
+++ b/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">
--- a/src/components/player/PlayerPage.tsx
+++ b/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(
--- a/src/components/player/Scores.tsx
+++ b/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 (
--- a/src/components/ui/button.tsx
+++ b/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 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -22,7 +22,7 @@ module.exports = {
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      backgroundColor: {
-        "pp-blue": "#5763c9",
+        "pp-blue": "hsl(var(--primary))",
      },
      textColor: {
        "pp-blue": "#9fa8f3",