color changes and added a navbar

next.config.js

@@ -1,7 +1,12 @@
+const nextBuildId = require("next-build-id");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   generateEtags: true,
   compress: true,
+  env: {
+    NEXT_PUBLIC_BUILD_ID: nextBuildId.sync({ dir: __dirname }),
+  },
   images: {
     remotePatterns: [
       {

package-lock.json

@@ -14,6 +14,7 @@
         "encoding": "^0.1.13",
         "moment": "^2.29.4",
         "next": "13.5.6",
+        "next-build-id": "^3.0.0",
         "node-fetch-cache": "^3.1.3",
         "react": "^18",
         "react-country-flag": "^3.1.0",
@@ -3411,6 +3412,14 @@
         }
       }
     },
+    "node_modules/next-build-id": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/next-build-id/-/next-build-id-3.0.0.tgz",
+      "integrity": "sha512-B3JCsL/9Z/wkmo3EySukQHCgx89Aw0i4LPi2MEhCboQBJ6wpkYTIu1z6hOYKuw/S1Wy8ZRqCEq0dVY/ST6jGqg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/node-abi": {
       "version": "3.51.0",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "encoding": "^0.1.13",
     "moment": "^2.29.4",
     "next": "13.5.6",
+    "next-build-id": "^3.0.0",
     "node-fetch-cache": "^3.1.3",
     "react": "^18",
     "react-country-flag": "^3.1.0",

src/app/player/[id]/page.tsx

@@ -96,7 +96,7 @@ export default function Player({ params }: { params: { id: string } }) {
     return (
       <main>
         <Container>
-          <div className="mt-2 flex w-full flex-col justify-center rounded-sm bg-neutral-800">
+          <div className="mt-2 flex w-full flex-col justify-center rounded-md bg-gray-800">
             <div className="p-3 text-center">
               <div role="status">
                 {player.loading && <Spinner />}
@@ -127,7 +127,7 @@ export default function Player({ params }: { params: { id: string } }) {
     <main>
       <Container>
         {/* Player Info */}
-        <div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
+        <div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
           <div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
             <Avatar url={playerData.profilePicture} label="Avatar" />
             <div className="flex flex-col items-center gap-2 xs:items-start">
@@ -184,7 +184,7 @@ export default function Player({ params }: { params: { id: string } }) {
         </div>
 
         {/* Scores */}
-        <div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
+        <div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
           <div className="p-3">
             {scores.loading ? (
               <div className="flex justify-center">
@@ -249,7 +249,7 @@ export default function Player({ params }: { params: { id: string } }) {
           </div>
 
           {/* Pagination */}
-          <div className="flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
+          <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
             <div className="p-3">
               <Pagination
                 currentPage={scores.page}

src/app/search/page.tsx

@@ -12,7 +12,7 @@ export default function Home() {
   return (
     <main>
       <Container>
-        <div className="mt-2 flex w-full flex-col items-center justify-center rounded-sm bg-neutral-800">
+        <div className="mt-2 flex w-full flex-col items-center justify-center rounded-md bg-gray-800">
           <Avatar
             className="m-6"
             label="Player Avatar"

src/components/Container.tsx

@@ -1,11 +1,14 @@
+import Footer from "./Footer";
 import Navbar from "./Navbar";
 
 export default function Container({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="m-auto flex flex-col items-center justify-center opacity-90 md:max-w-[1200px]">
+      <div className="m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
-        <Navbar></Navbar>
+        <Navbar />
-        {children}
+        <div className="w-full flex-1">{children}</div>
+
+        <Footer />
       </div>
     </>
   );

src/components/Footer.tsx

@@ -0,0 +1,44 @@
+import { isProduction } from "@/utils/utils";
+
+const buttons = [
+  {
+    name: "Privacy",
+    url: "/privacy",
+  },
+];
+
+const buildId = process.env.NEXT_PUBLIC_BUILD_ID
+  ? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7) +
+    (isProduction() ? "" : "-dev")
+  : "";
+
+export default function Footer() {
+  return (
+    <footer className="m-3 rounded-md bg-gray-800 text-gray-300">
+      <div className="m-3 flex flex-col items-center justify-center gap-1">
+        <div className="flex flex-row gap-3">
+          <p>Scoresaber Reloaded</p>
+
+          {buttons.map((button, index) => {
+            return (
+              <div
+                key={index}
+                className="flex flex-row items-center justify-center gap-3"
+              >
+                <div className="h-4 w-[1px] bg-neutral-100"></div>
+                <a
+                  href={button.url}
+                  className="transform-gpu transition-all hover:text-blue-500"
+                >
+                  {button.name}
+                </a>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="text-sm text-gray-400">Build ID: {buildId}</div>
+      </div>
+    </footer>
+  );
+}

src/components/Navbar.tsx

@@ -17,7 +17,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
   return (
     <div className="group">
       <a
-        className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-sm p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
+        className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
         href={href}
       >
         <>
@@ -27,7 +27,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
       </a>
 
       {children && (
-        <div className="absolute z-20 hidden divide-y rounded-sm bg-neutral-600 shadow-sm group-hover:flex">
+        <div className="absolute z-20 hidden divide-y rounded-md bg-neutral-600 shadow-sm group-hover:flex">
           <div className="p-2">{children}</div>
         </div>
       )}
@@ -38,7 +38,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
 export default function Navbar() {
   return (
     <>
-      <div className="flex h-fit w-full rounded-sm bg-neutral-800">
+      <div className="flex h-fit w-full rounded-md bg-gray-800">
         <NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
           <p className="text-sm font-bold">No friends, add someone!</p>
 

src/components/SearchPlayer.tsx

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

src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function isProduction() {
+  return process.env.NODE_ENV === "production";
+}