feat(Support): minor ui improvements

LibreTexts · Aug 21, 2024 · d5923b7 · d5923b7
1 parent 676b82a
commit d5923b7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/client/src/components/support/StaffDashboard.tsx b/client/src/components/support/StaffDashboard.tsx
@@ -14,6 +14,7 @@ import { capitalizeFirstLetter } from "../util/HelperFunctions";
 import { getPrettySupportTicketCategory } from "../../utils/supportHelpers";
 import { useNotifications } from "../../context/NotificationContext";
 import CopyButton from "../util/CopyButton";
+import { Link } from "react-router-dom";
 const AssignTicketModal = lazy(() => import("./AssignTicketModal"));
 const SupportCenterSettingsModal = lazy(
   () => import("./SupportCenterSettingsModal")
@@ -190,10 +191,6 @@ const StaffDashboard = () => {
     }
   }
 
-  function openTicket(uuid: string) {
-    window.open(`/support/ticket/${uuid}`, "_blank");
-  }
-
   function openAssignModal(ticketId: string) {
     setSelectedTicketId(ticketId);
     setShowAssignModal(true);
@@ -435,7 +432,9 @@ const StaffDashboard = () => {
                     <Button
                       color="blue"
                       size="tiny"
-                      onClick={() => openTicket(ticket.uuid)}
+                      to={`/support/ticket/${ticket.uuid}`}
+                      target="_blank"
+                      as={Link}
                     >
                       <Icon name="eye" />
                       View

diff --git a/client/src/components/support/TicketDetails.tsx b/client/src/components/support/TicketDetails.tsx
@@ -1,4 +1,4 @@
-import { Button } from "semantic-ui-react";
+import { Button, Label } from "semantic-ui-react";
 import { SupportTicket } from "../../types";
 import { format, parseISO } from "date-fns";
 import { getPrettySupportTicketCategory } from "../../utils/supportHelpers";
@@ -46,8 +46,19 @@ const TicketDetails: React.FC<TicketDetailsProps> = ({ ticket }) => {
             </Button>
           </>
         )}
-        {ticket.guest &&
-          `${ticket.guest.firstName} ${ticket.guest.lastName} (${ticket.guest.email})`}
+        {ticket.guest && (
+          <div className="flex flex-row justify-center ml-1 text-xl">
+            {ticket.guest.firstName} {ticket.guest.lastName} ({ticket.guest.email})
+
+            <Label
+              className="!ml-2 !p-2 !cursor-default"
+              basic
+              color="yellow"
+              size="mini"
+            >
+              Guest
+            </Label>
+          </div>)}
       </div>
       <p className="2xl:text-xl">
         <span className="font-semibold">Category:</span>{" "}