From c1b3446309c8bc2dedb23e900c745efcaf724a92 Mon Sep 17 00:00:00 2001
From: Jonathan Giardino <j.giardino@me.com>
Date: Sun, 15 Oct 2023 21:03:16 +0200
Subject: [PATCH] Add admin button

---
 package-lock.json              |  9 +++++++++
 package.json                   |  1 +
 src/app/globals.css            | 11 ++++++-----
 src/components/AdminButton.tsx | 36 ++++++++++++++++++++++++++++++++++
 src/components/AdminTag.tsx    |  7 -------
 src/components/UserRow.tsx     | 16 ++++++++-------
 src/lib/getUsers.ts            |  2 +-
 tailwind.config.ts             |  2 +-
 8 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 src/components/AdminButton.tsx
 delete mode 100644 src/components/AdminTag.tsx

diff --git a/package-lock.json b/package-lock.json
index 6a44015..a37d8be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "raytabs",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-tabs": "^1.0.4",
         "clsx": "^2.0.0",
         "next": "13.5.4",
@@ -464,6 +465,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
diff --git a/package.json b/package.json
index fca0db4..30581a6 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "clsx": "^2.0.0",
     "next": "13.5.4",
diff --git a/src/app/globals.css b/src/app/globals.css
index 2e0f2ff..71fdc2d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,19 +5,20 @@
 :root {
   --foreground: #fafafa;
   --foreground-alt: #757575;
-  --background: #0D0D0D;
+  --background: #0d0d0d;
   --box-bg: #191919;
   --box-border: #474747;
   --box-w: 480px;
   --box-min-w: 360px;
-  --tab-selected: #302F2F;
+  --tab-selected: #302f2f;
   --tab-font-size: 13px;
   --tab-text-color: #757575;
   --tab-selected-text: #fafafa;
-  --row-hover: #1E1E1E;
+  --row-hover: #1e1e1e;
   --admin-label-bg: #382525;
-  --admin-label-text: #ED6D68;
+  --admin-label-text: #ed6d68;
   --admin-empty-box: #212020;
+  --admin-set-btn: #282828;
 
   background: var(--background);
 }
@@ -28,4 +29,4 @@ body {
 
 main {
   min-height: 100svh;
-}
\ No newline at end of file
+}
diff --git a/src/components/AdminButton.tsx b/src/components/AdminButton.tsx
new file mode 100644
index 0000000..e01b326
--- /dev/null
+++ b/src/components/AdminButton.tsx
@@ -0,0 +1,36 @@
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
+
+export default function AdminButton({
+  handleCheckboxChange,
+  isAdmin,
+}: {
+  handleCheckboxChange: () => void;
+  isAdmin: boolean;
+}) {
+  return isAdmin ? (
+    <button
+      tabIndex={-1}
+      onClick={handleCheckboxChange}
+      className="ml-auto flex gap-1 items-center bg-[var(--admin-label-bg)] md:hover:opacity-80 text-[11px] text-[var(--admin-label-text)] px-2 py-1 rounded-[2px] animate-fade-in"
+    >
+      Admin <Cross2Icon height={13} width={13} />
+    </button>
+  ) : (
+    <>
+      <button
+        tabIndex={-1}
+        onClick={handleCheckboxChange}
+        className="hidden group-focus-visible:hidden md:group-hover:flex items-center md:group-hover:gap-1 ml-auto bg-[var(--admin-set-btn)] md:hover:opacity-80 text-[11px] px-2 py-1 rounded-[2px] animate-fade-in"
+      >
+        Set admin <PlusIcon height={13} width={13} />
+      </button>
+      <button
+        tabIndex={-1}
+        onClick={handleCheckboxChange}
+        className="hidden md:group-hover:hidden group-focus-visible:gap-1 group-focus-visible:flex items-center ml-auto bg-[var(--admin-set-btn)] text-[11px] md:hover:opacity-80 px-2 py-1 rounded-[2px] animate-fade-in"
+      >
+        Set admin <PlusIcon height={13} width={13} />
+      </button>
+    </>
+  );
+}
diff --git a/src/components/AdminTag.tsx b/src/components/AdminTag.tsx
deleted file mode 100644
index b9ab74b..0000000
--- a/src/components/AdminTag.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function AdminTag() {
-  return (
-    <span className="ml-auto bg-[var(--admin-label-bg)] text-xs text-[var(--admin-label-text)] px-2 py-1 rounded-[2px]">
-      Admin
-    </span>
-  );
-} 
diff --git a/src/components/UserRow.tsx b/src/components/UserRow.tsx
index 52f938c..3fd37f2 100644
--- a/src/components/UserRow.tsx
+++ b/src/components/UserRow.tsx
@@ -7,12 +7,11 @@ import { useRef, useState } from "react";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import clsx from "clsx";
-
-// Components
-import AdminTag from "./AdminTag";
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
 
 // Components
 import { useAdminStore } from "@/adminStore";
+import AdminButton from "./AdminButton";
 
 export default function UserRow({ user }: { user: User }) {
   const rowRef = useRef<HTMLDivElement>(null);
@@ -43,7 +42,7 @@ export default function UserRow({ user }: { user: User }) {
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-    if (event.key === "Enter") {
+    if (event.key === "Enter" || event.key === " ") {
       toggleAdmin();
     }
   }
@@ -69,9 +68,8 @@ export default function UserRow({ user }: { user: User }) {
   return (
     <div
       ref={rowRef}
-      className="w-full flex gap-3 items-center px-2 py-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--tab-selected)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--box-bg)] rounded-[4px] focus-visible:rounded-[2px] focus-visible:bg-[var(--row-hover)] hover:bg-[var(--row-hover)] cursor-pointer"
+      className="w-full flex gap-3 items-center px-2 py-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--tab-selected)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--box-bg)] rounded-[4px] focus-visible:rounded-[2px] focus-visible:bg-[var(--row-hover)] hover:bg-[var(--row-hover)] group"
       tabIndex={0}
-      onClick={handleCheckboxChange}
       onKeyDown={handleKeyDown}
       role="checkbox"
       aria-checked={values.adminIds.includes(user.id)}
@@ -106,7 +104,11 @@ export default function UserRow({ user }: { user: User }) {
           {user.role}
         </span>
       </div>
-      {values.adminIds.includes(user.id) ? <AdminTag /> : null}
+
+      <AdminButton
+        handleCheckboxChange={handleCheckboxChange}
+        isAdmin={values.adminIds.includes(user.id)}
+      />
     </div>
   );
 }
diff --git a/src/lib/getUsers.ts b/src/lib/getUsers.ts
index f38cbd0..ad62990 100644
--- a/src/lib/getUsers.ts
+++ b/src/lib/getUsers.ts
@@ -7,7 +7,7 @@ export default async function getUsers() {
   }
 
   // Artificial delay of 2.5 seconds
-  await new Promise((resolve) => setTimeout(resolve, 2500));
+  // await new Promise((resolve) => setTimeout(resolve, 2500));
 
   const result = await res.json();
   const data = Object.keys(result.users).map((key) => ({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d5d6920..26aab1e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ const config: Config = {
       },
       animation: {
         "slide-right": "slideRightAndBack 0.3s ease-in-out",
-        "fade-in": "fadeIn 0.3s ease-in-out",
+        "fade-in": "fadeIn 0.15s ease-in-out",
       },
       keyframes: {
         slideRightAndBack: {