Update some styles and hide block button

heisbrot · heisbrot · commit db077452548c · 2025-09-01T14:06:22.000+02:00
diff --git a/src/app/(dashboard)/team/user/page.tsx b/src/app/(dashboard)/team/user/page.tsx
@@ -289,6 +289,7 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
   const neverLoggedIn = dayjs(user.last_login).isBefore(
     dayjs().subtract(1000, "years"),
   );
+  const isPendingApproval = user?.pending_approval;
 
   return (
     <Card>
@@ -328,18 +329,20 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
 
         {!isServiceUser && (
           <>
-            {!user.is_current && user.role != Role.Owner && (
-              <Card.ListItem
-                tooltip={false}
-                label={
-                  <>
-                    <Ban size={16} />
-                    Block User
-                  </>
-                }
-                value={<UserBlockCell user={user} isUserPage={true} />}
-              />
-            )}
+            {!user.is_current &&
+              user.role != Role.Owner &&
+              !isPendingApproval && (
+                <Card.ListItem
+                  tooltip={false}
+                  label={
+                    <>
+                      <Ban size={16} />
+                      Block User
+                    </>
+                  }
+                  value={<UserBlockCell user={user} isUserPage={true} />}
+                />
+              )}
 
             <Card.ListItem
               label={
diff --git a/src/app/error/page.tsx b/src/app/error/page.tsx
@@ -51,8 +51,11 @@ export default function ErrorPage() {
     return null;
   }
 
-  const isBlockedUser = error?.code === 403 && error?.message?.toLowerCase().includes("blocked");
-  const isPendingApproval = error?.code === 403 && error?.message?.toLowerCase().includes("pending approval");
+  const isBlockedUser =
+    error?.code === 403 && error?.message?.toLowerCase().includes("blocked");
+  const isPendingApproval =
+    error?.code === 403 &&
+    error?.message?.toLowerCase().includes("pending approval");
 
   const getTitle = () => {
     if (isBlockedUser) return "User Account Blocked";
@@ -71,21 +74,21 @@ export default function ErrorPage() {
   };
 
   return (
-    <div className="flex items-center justify-center flex-col h-screen max-w-lg mx-auto">
+    <div className="flex items-center justify-center flex-col h-screen max-w-xl mx-auto">
       <div className="bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center">
         <NetBirdIcon size={23} />
       </div>
-      
+
       <h1 className="text-center mt-2">{getTitle()}</h1>
 
       <Paragraph className="text-center mt-2 block">
         {getDescription()}
       </Paragraph>
 
       {error && (
-        <div className="bg-black border border-nb-gray-800 rounded-md p-4 mt-4 max-w-md font-mono">
-          <div className="text-center text-sm text-green-400">
-              <div>response_message: {error.message}</div>
+        <div className="bg-nb-gray-930 border border-nb-gray-800 rounded-md p-4 mt-4 max-w-md font-mono mb-2">
+          <div className="text-center text-sm text-netbird">
+            <div>response_message: {error.message}</div>
           </div>
         </div>
       )}
@@ -96,25 +99,17 @@ export default function ErrorPage() {
 
       <div className="mt-5 space-y-3">
         {!isBlockedUser && !isPendingApproval && (
-          <Button 
-            variant="default-outline"
-            size="sm"
-            onClick={handleRetry}
-          >
+          <Button variant="default-outline" size="sm" onClick={handleRetry}>
             <RefreshCw size={16} className="mr-2" />
             Try Again
           </Button>
         )}
-        
-        <Button 
-          variant="primary"
-          size="sm"
-          onClick={handleLogout}
-        >
+
+        <Button variant="primary" size="sm" onClick={handleLogout}>
           {isBlockedUser || isPendingApproval ? "Sign Out" : "Logout"}
           <ArrowRightIcon size={16} />
         </Button>
       </div>
     </div>
   );
-}
+}
diff --git a/src/modules/users/table-cells/UserActionCell.tsx b/src/modules/users/table-cells/UserActionCell.tsx
@@ -2,7 +2,7 @@ import Button from "@components/Button";
 import { notify } from "@components/Notification";
 import { useApiCall } from "@utils/api";
 import { isNetBirdHosted } from "@utils/netbird";
-import { CheckCircle, Trash2, XCircle } from "lucide-react";
+import { Trash2, XCircle } from "lucide-react";
 import * as React from "react";
 import { useMemo } from "react";
 import { useSWRConfig } from "swr";
@@ -57,15 +57,17 @@ export default function UserActionCell({
       confirmText: "Reject",
       cancelText: "Cancel",
       type: "danger",
+      maxWidthClass: "max-w-md",
     });
     if (!choice) return;
-    
+
     notify({
       title: `'${name}' rejected`,
       description: "User was successfully rejected and removed.",
       promise: userRequest.del("", `/${user.id}/reject`).then(() => {
         mutate(`/users?service_user=${serviceUser}`);
       }),
+
       loadingMessage: "Rejecting the user...",
     });
   };
@@ -78,6 +80,7 @@ export default function UserActionCell({
         "Deleting this user will remove their devices and remove dashboard access. This action cannot be undone.",
       confirmText: "Delete",
       cancelText: "Cancel",
+      maxWidthClass: "max-w-md",
       type: "danger",
     });
     if (!choice) return;
@@ -97,30 +100,30 @@ export default function UserActionCell({
       {!serviceUser && isNetBirdHosted() && !isPendingApproval && (
         <UserResendInviteButton user={user} />
       )}
-      
+
       {isPendingApproval && canManageUsers && (
         <>
           <Button
             variant={"secondary"}
             size={"xs"}
-            className={"h-[32px]"}
             onClick={approveUser}
             data-cy={"approve-user"}
           >
             Approve
           </Button>
           <Button
             variant={"danger-outline"}
-            size={"sm"}
+            size={"xs"}
+            className={"!px-3"}
             onClick={rejectUser}
             data-cy={"reject-user"}
           >
-            <XCircle size={16} />
+            <XCircle size={14} />
             Reject
           </Button>
         </>
       )}
-      
+
       {!isPendingApproval && (
         <Button
           variant={"danger-outline"}
diff --git a/src/modules/users/table-cells/UserBlockCell.tsx b/src/modules/users/table-cells/UserBlockCell.tsx
@@ -61,6 +61,8 @@ export default function UserBlockCell({ user, isUserPage = false }: Props) {
     });
   };
 
+  if (user?.pending_approval) return;
+
   return !disabled ? (
     <div className={"flex"}>
       <ToggleSwitch
diff --git a/src/modules/users/table-cells/UserNameCell.tsx b/src/modules/users/table-cells/UserNameCell.tsx
@@ -10,6 +10,27 @@ export default function UserNameCell({ user }: Readonly<Props>) {
   const status = user.status;
   const isCurrent = user.is_current;
 
+  const getStatusIcon = () => {
+    if (user?.pending_approval) {
+      return {
+        color: "bg-netbird text-netbird-950",
+        icon: <Clock size={12} />,
+      };
+    }
+    if (status === "blocked") {
+      return { color: "bg-red-500 text-red-100", icon: <Ban size={12} /> };
+    }
+    if (status === "invited") {
+      return {
+        color: "bg-yellow-400 text-yellow-900",
+        icon: <Clock size={12} />,
+      };
+    }
+    return { color: "bg-gray-400", icon: <Clock size={12} /> };
+  };
+
+  const { color, icon } = getStatusIcon();
+
   return (
     <div
       className={cn("flex gap-4 px-2 py-1 items-center")}
@@ -29,12 +50,10 @@ export default function UserNameCell({ user }: Readonly<Props>) {
           <div
             className={cn(
               "w-5 h-5 absolute -right-1 -bottom-1 bg-nb-gray-930 rounded-full flex items-center justify-center border-2 border-nb-gray-950",
-              status == "invited" && "bg-yellow-400 text-yellow-900",
-              status == "blocked" && "bg-red-500 text-red-100",
+              color,
             )}
           >
-            {status == "invited" && <Clock size={12} />}
-            {status == "blocked" && <Ban size={12} />}
+            {icon}
           </div>
         )}
       </div>
diff --git a/src/modules/users/table-cells/UserStatusCell.tsx b/src/modules/users/table-cells/UserStatusCell.tsx
@@ -1,6 +1,7 @@
 import FullTooltip from "@components/FullTooltip";
+import InlineLink from "@components/InlineLink";
 import { cn } from "@utils/helpers";
-import { HelpCircle } from "lucide-react";
+import { ExternalLinkIcon, HelpCircle } from "lucide-react";
 import React from "react";
 import { User } from "@/interfaces/User";
 
@@ -14,7 +15,7 @@ export default function UserStatusCell({ user }: Readonly<Props>) {
 
   const getStatusDisplay = () => {
     if (isPendingApproval) {
-      return { text: "Pending Approval", color: "bg-orange-400" };
+      return { text: "Pending Approval", color: "bg-netbird" };
     }
     if (status === "blocked") {
       return { text: "Blocked", color: "bg-red-500" };
@@ -31,32 +32,54 @@ export default function UserStatusCell({ user }: Readonly<Props>) {
   const { text, color } = getStatusDisplay();
 
   return (
-    <div
-      className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}
-      data-cy={"user-status-cell"}
-    >
-      <span className={cn("h-2 w-2 rounded-full", color)}></span>
-      {text}
-      {isPendingApproval && (
-        <FullTooltip
-          content={
-            <div className={"max-w-xs text-xs"}>
-              <p>This user requires approval from an administrator.</p>
-              <p className="mt-2">
-                To disable user approval requirements for new users, go to the account{" "}
-                <span className="text-nb-gray-200 inline-flex gap-1 items-center max-h-[22px] font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]">
-                  Settings
-                </span>{" "}
-                and disable "User Approval Required".
-              </p>
+    <div onClick={(e) => e.stopPropagation()}>
+      <FullTooltip
+        content={
+          <div className={"max-w-xs text-xs flex flex-col gap-2"}>
+            <div>
+              This user needs to be approved by an administrator before it can
+              join your organization.
             </div>
-          }
-          interactive={true}
-          side="right"
+
+            <div>
+              If you want to disable approval for new users, go to{" "}
+              <InlineLink href={"/settings?tab=authentication"}>
+                Settings
+              </InlineLink>{" "}
+              and disable{" "}
+              <span className={"font-medium text-white"}>
+                {"'User Approval Required'"}
+              </span>
+              .
+            </div>
+            <div>
+              Learn more about{" "}
+              <InlineLink
+                href={
+                  "https://docs.netbird.io/how-to/add-users-to-your-network#user-approval"
+                }
+                target={"_blank"}
+              >
+                User Approval <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </div>
+          </div>
+        }
+        interactive={true}
+        side="right"
+        disabled={!isPendingApproval}
+      >
+        <div
+          className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}
+          data-cy={"user-status-cell"}
         >
-          <HelpCircle size={14} className="text-orange-400 cursor-help" />
-        </FullTooltip>
-      )}
+          <span className={cn("h-2 w-2 rounded-full", color)}></span>
+          {text}
+          {isPendingApproval && (
+            <HelpCircle size={14} className="text-netbird cursor-help" />
+          )}
+        </div>
+      </FullTooltip>
     </div>
   );
 }
