Style updates

Author: daveearley

frontend/src/components/common/AttendeeTable/AttendeeTable.module.scss

@@ -115,6 +115,32 @@
   }
 }
 
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+
+  &[data-status="ACTIVE"] {
+    background: var(--mantine-color-green-1);
+    color: var(--mantine-color-green-9);
+  }
+
+  &[data-status="AWAITING_PAYMENT"] {
+    background: var(--mantine-color-yellow-1);
+    color: var(--mantine-color-yellow-9);
+  }
+
+  &[data-status="CANCELLED"] {
+    background: var(--mantine-color-red-1);
+    color: var(--mantine-color-red-9);
+  }
+}
+
 .actionsMenu {
   display: flex;
   align-items: center;

frontend/src/components/common/AttendeeTable/index.tsx

@@ -2,14 +2,16 @@ import {ActionIcon, Anchor, Avatar, Button, Group, Popover, Tooltip} from '@mant
 import {Attendee, IdParam, MessageType} from "../../../types.ts";
 import {
     IconCheck,
+    IconClock,
     IconClipboardList,
     IconCopy,
     IconMailForward,
     IconNote,
     IconPlus,
     IconSend,
     IconTrash,
-    IconUserCog
+    IconUserCog,
+    IconX
 } from "@tabler/icons-react";
 import {getInitials, getProductFromEvent} from "../../../utilites/helpers.ts";
 import {useClipboard, useDisclosure} from "@mantine/hooks";
@@ -29,7 +31,6 @@ import {useResendAttendeeTicket} from "../../../mutations/useResendAttendeeTicke
 import {ManageAttendeeModal} from "../../modals/ManageAttendeeModal";
 import {ManageOrderModal} from "../../modals/ManageOrderModal";
 import {ActionMenu} from '../ActionMenu';
-import {AttendeeStatusBadge} from "../AttendeeStatusBadge";
 import {CheckInStatusModal} from "../CheckInStatusModal";
 import {prettyDate} from "../../../utilites/dates.ts";
 import {TanStackTable, TanStackTableColumn} from "../TanStackTable";
@@ -292,7 +293,31 @@ export const AttendeeTable = ({attendees, openCreateModal}: AttendeeTableProps)
                     id: 'status',
                     header: t`Status`,
                     enableHiding: true,
-                    cell: (info: CellContext<Attendee, unknown>) => <AttendeeStatusBadge attendee={info.row.original}/>,
+                    cell: (info: CellContext<Attendee, unknown>) => {
+                        const attendee = info.row.original;
+                        return (
+                            <div className={classes.statusBadge} data-status={attendee.status}>
+                                {attendee.status === 'ACTIVE' && (
+                                    <>
+                                        <IconCheck size={14}/>
+                                        {t`Active`}
+                                    </>
+                                )}
+                                {attendee.status === 'AWAITING_PAYMENT' && (
+                                    <>
+                                        <IconClock size={14}/>
+                                        {t`Awaiting Payment`}
+                                    </>
+                                )}
+                                {attendee.status === 'CANCELLED' && (
+                                    <>
+                                        <IconX size={14}/>
+                                        {t`Cancelled`}
+                                    </>
+                                )}
+                            </div>
+                        );
+                    },
                     meta: {
                         headerStyle: {minWidth: 120},
                     },

frontend/src/components/common/TanStackTable/TanStackTable.module.scss

@@ -66,28 +66,18 @@
     bottom: 0;
     width: 1px;
     background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0)
+                    to right,
+                    rgba(255, 255, 255, 0.1),
+                    rgba(255, 255, 255, 0)
     );
     pointer-events: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    &::after {
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0.1),
-        rgba(255, 255, 255, 0)
-      );
-    }
-  }
 }
 
 .stickyRight {
   position: sticky;
   right: 0;
-  z-index: 9;
+  z-index: 2;
   background: var(--mantine-color-body);
 
   &::before {
@@ -98,29 +88,15 @@
     bottom: 0;
     width: 1px;
     background: linear-gradient(
-      to left,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0)
+                    to left,
+                    rgba(255, 255, 255, 0.1),
+                    rgba(255, 255, 255, 0)
     );
     pointer-events: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    &::before {
-      background: linear-gradient(
-        to left,
-        rgba(255, 255, 255, 0.1),
-        rgba(255, 255, 255, 0)
-      );
-    }
-  }
 }
 
 .tableHead .stickyLeft,
 .tableHead .stickyRight {
-  background-color: #462e7812;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: #f2f0f5;
-  }
+  background-color: #f2f0f5;
 }