HiEventsDev · daveearley · May 28, 2026 · May 28, 2026
diff --git a/frontend/src/components/common/Callout/index.tsx b/frontend/src/components/common/Callout/index.tsx
@@ -1,4 +1,4 @@
-import {ReactNode} from "react";
+import {CSSProperties, ReactNode} from "react";
 import {t} from "@lingui/macro";
 import {
     IconAlertTriangle,
@@ -14,10 +14,11 @@ export type CalloutVariant = "info" | "tip" | "warning" | "success";
 interface CalloutProps {
     variant?: CalloutVariant;
     title?: ReactNode;
-    children: ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
     onDismiss?: () => void;
     className?: string;
+    style?: CSSProperties;
 }
 
 const defaultIcon: Record<CalloutVariant, ReactNode> = {
@@ -39,15 +40,16 @@ export const Callout = ({
                             icon,
                             onDismiss,
                             className,
+                            style,
                         }: CalloutProps) => {
     return (
-        <aside className={`${classes.callout} ${classes[variant]} ${className ?? ""}`}>
+        <aside className={`${classes.callout} ${classes[variant]} ${className ?? ""}`} style={style}>
             <div className={`${classes.iconWrap} ${classes[`iconWrap_${variant}`]}`} aria-hidden="true">
                 {icon ?? defaultIcon[variant]}
             </div>
             <div className={classes.body}>
                 {title && <div className={classes.title}>{title}</div>}
-                <div className={classes.text}>{children}</div>
+                {children && <div className={classes.text}>{children}</div>}
             </div>
             {onDismiss && (
                 <button

diff --git a/frontend/src/components/common/CheckIn/CheckInOptionsModal.tsx b/frontend/src/components/common/CheckIn/CheckInOptionsModal.tsx
@@ -1,7 +1,8 @@
-import {Alert, Button, Modal, Stack} from "@mantine/core";
-import {IconAlertCircle, IconCreditCard, IconUserCheck} from "@tabler/icons-react";
+import {Button, Modal, Stack} from "@mantine/core";
+import {IconCreditCard, IconUserCheck} from "@tabler/icons-react";
 import {t, Trans} from "@lingui/macro";
 import {Attendee} from "../../../types.ts";
+import {Callout} from "../Callout";
 
 interface CheckInOptionsModalProps {
     isOpen: boolean;
@@ -28,12 +29,9 @@ export const CheckInOptionsModal = ({
             size="md"
         >
             <Stack>
-                <Alert
-                    icon={<IconAlertCircle size={20}/>}
-                    variant={'light'}
-                    title={t`Unpaid Order`}>
+                <Callout variant="tip" title={t`Unpaid Order`}>
                     {t`This attendee has an unpaid order.`}
-                </Alert>
+                </Callout>
                 <Button
                     leftSection={<IconUserCheck size={20}/>}
                     onClick={() => onCheckIn('check-in')}

diff --git a/frontend/src/components/common/EmailTemplateSettings/EmailTemplateSettingsBase.tsx b/frontend/src/components/common/EmailTemplateSettings/EmailTemplateSettingsBase.tsx
@@ -1,6 +1,7 @@
 import {useState} from 'react';
-import {ActionIcon, Alert, Badge, Button, Group, LoadingOverlay, Modal, Paper, Stack, Text} from '@mantine/core';
-import {IconAlertCircle, IconBrandStripe, IconEdit, IconInfoCircle, IconMail, IconPlus, IconTrash} from '@tabler/icons-react';
+import {ActionIcon, Badge, Button, Group, LoadingOverlay, Modal, Paper, Stack, Text} from '@mantine/core';
+import {IconBrandStripe, IconEdit, IconMail, IconPlus, IconTrash} from '@tabler/icons-react';
+import {Callout} from '../Callout';
 import {t, Trans} from '@lingui/macro';
 import {useDisclosure} from '@mantine/hooks';
 import {EmailTemplateEditor} from '../EmailTemplateEditor';
@@ -349,18 +350,14 @@ export const EmailTemplateSettingsBase = ({
             />
 
             {(!isAccountVerified && isAccountFetched) && (
-                <Alert icon={<IconAlertCircle size={16}/>} variant="light" mb="lg" color="orange">
-                    <Text size="sm">
-                        {t`You need to verify your account email before you can modify email templates.`}
-                    </Text>
-                </Alert>
+                <Callout variant="tip">
+                    {t`You need to verify your account email before you can modify email templates.`}
+                </Callout>
             )}
 
             {accountRequiresManualVerification && (
-                <Alert icon={<IconAlertCircle size={16}/>} variant="light" mb="lg" color="orange" title={t`Connect Stripe to enable email template editing`}>
-                    <Text size="sm">
-                        {t`Due to the high risk of spam, you must connect a Stripe account before you can modify email templates. This is to ensure that all event organizers are verified and accountable.`}
-                    </Text>
+                <Callout variant="tip" title={t`Connect Stripe to enable email template editing`}>
+                    {t`Due to the high risk of spam, you must connect a Stripe account before you can modify email templates. This is to ensure that all event organizers are verified and accountable.`}
                     {stripeOrganizerId && (
                         <div style={{marginTop: '0.75rem'}}>
                             <Button
@@ -373,14 +370,12 @@ export const EmailTemplateSettingsBase = ({
                             </Button>
                         </div>
                     )}
-                </Alert>
+                </Callout>
             )}
 
-            <Alert icon={<IconInfoCircle size={16}/>} variant="light" mb="lg">
-                <Text size="sm">
-                    {getAlertMessage()}
-                </Text>
-            </Alert>
+            <Callout variant="info">
+                {getAlertMessage()}
+            </Callout>
 
             <div style={{position: 'relative'}}>
                 <LoadingOverlay visible={isLoading}/>

diff --git a/frontend/src/components/forms/ProductForm/index.tsx b/frontend/src/components/forms/ProductForm/index.tsx
@@ -31,7 +31,6 @@ import {
     IconEye,
     IconFlame,
     IconHeartDollar,
-    IconInfoCircle,
     IconPlus,
     IconReceipt,
     IconShirt,
@@ -40,6 +39,7 @@ import {
     IconTrash,
     IconTrashOff,
 } from "@tabler/icons-react";
+import {Callout} from "../../common/Callout";
 import {useDisclosure} from "@mantine/hooks";
 import {NavLink, useParams} from "react-router";
 import {useEffect} from "react";
@@ -233,9 +233,9 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
     return (
         <>
             {Number(product?.quantity_sold) > 0 && (
-                <Alert icon={<IconInfoCircle/>} mb={20} color={'blue'}>
+                <Callout variant="info">
                     {t`You cannot change the product type as there are attendees associated with this product.`}
-                </Alert>
+                </Callout>
             )}
 
             <CustomSelect
@@ -269,13 +269,13 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
             )}
 
             {form.values.type === ProductPriceType.Tiered && (
-                <Alert variant="light" title={t`What are Tiered Products?`} mb={20} icon={<IconInfoCircle size={18}/>}>
+                <Callout variant="info" title={t`What are Tiered Products?`}>
                     <Trans>
                         Tiered products allow you to offer multiple price options for the same product.
                         This is perfect for early bird products, or offering different price
                         options for different groups of people.
                     </Trans>
-                </Alert>
+                </Callout>
             )}
 
             <TextInput
@@ -362,12 +362,12 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
             {form.values.type === ProductPriceType.Tiered && (
                 <Fieldset legend={t`Price Tiers`} mt={20} mb={20}>
                     {isRecurring && (
-                        <Alert variant="light" icon={<IconInfoCircle size={16}/>} mb={10}>
+                        <Callout variant="info" style={{marginBottom: 10}}>
                             <Trans>These are the default prices and quantities across all dates. Sale dates on tiers
                                 apply globally. You can override prices and quantities for individual dates on
                                 the <NavLink to={`/manage/event/${eventId}/occurrences`}>Occurrence Schedule
                                     page</NavLink>.</Trans>
-                        </Alert>
+                        </Callout>
                     )}
                     <div className={classes.priceTiers}>
                         <ProductPriceTierForm product={product} form={form} event={event}/>
@@ -449,12 +449,12 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
                         </Button>
 
                         {(form.values.type === ProductPriceType.Free && !!form.values.tax_and_fee_ids?.length) && (
-                            <Alert mt={15}>
+                            <Callout variant="info" style={{marginTop: 15}}>
                                 <p>
                                     {t`You have taxes and fees added to a Free Product. Would you like to remove them?`}
                                 </p>
                                 <Button onClick={removeTaxesAndFees} size={'xs'}>{t`Yes, remove them`}</Button>
-                            </Alert>
+                            </Callout>
                         )}
                     </Fieldset>
 
@@ -479,11 +479,11 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
                         </span>
                     }>
                         {isRecurring && (
-                            <Alert variant="light" icon={<IconInfoCircle size={16}/>} mb={10}>
+                            <Callout variant="info" style={{marginBottom: 10}}>
                                 <Trans>Sale period dates apply across all dates in your schedule. To control pricing and
                                     availability for individual dates, use the overrides on the <NavLink
                                         to={`/manage/event/${eventId}/occurrences`}>Occurrence Schedule page</NavLink>.</Trans>
-                            </Alert>
+                            </Callout>
                         )}
                         <InputGroup>
                             <TextInput type={'datetime-local'} {...form.getInputProps('sale_start_date')}

diff --git a/frontend/src/components/modals/CancelOrderModal/index.tsx b/frontend/src/components/modals/CancelOrderModal/index.tsx
@@ -3,9 +3,9 @@ import {useParams} from "react-router";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetOrder} from "../../../queries/useGetOrder.ts";
 import {Modal} from "../../common/Modal";
-import {Alert, Button, Checkbox, LoadingOverlay} from "@mantine/core";
-import {IconInfoCircle} from "@tabler/icons-react";
+import {Button, Checkbox, LoadingOverlay} from "@mantine/core";
 import classes from './CancelOrderModal.module.scss';
+import {Callout} from "../../common/Callout";
 import {OrderDetails} from "../../common/OrderDetails";
 import {AttendeeList} from "../../common/AttendeeList";
 import {t} from "@lingui/macro";
@@ -62,10 +62,9 @@ export const CancelOrderModal = ({onClose, orderId}: RefundOrderModalProps) => {
 
             {products && <AttendeeList order={order} products={products}/>}
 
-            <Alert className={classes.alert} variant="light" color="blue" title={t`Please Note`}
-                   icon={<IconInfoCircle/>}>
+            <Callout variant="info" className={classes.alert} title={t`Please Note`}>
                 {t`Canceling will cancel all attendees associated with this order, and release the tickets back into the available pool.`}
-            </Alert>
+            </Callout>
 
             {isRefundable && (
                 <Checkbox

diff --git a/frontend/src/components/modals/CreateAttendeeModal/index.tsx b/frontend/src/components/modals/CreateAttendeeModal/index.tsx
@@ -4,8 +4,8 @@ import {Button} from "../../common/Button";
 import {useNavigate, useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useForm} from "@mantine/form";
-import {Alert, LoadingOverlay, NumberInput, Select, Switch, TextInput} from "@mantine/core";
-import {IconAlertTriangle} from "@tabler/icons-react";
+import {LoadingOverlay, NumberInput, Select, Switch, TextInput} from "@mantine/core";
+import {Callout} from "../../common/Callout";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {CreateAttendeeRequest} from "../../../api/attendee.client.ts";
 import {useCreateAttendee} from "../../../mutations/useCreateAttendee.ts";
@@ -267,10 +267,9 @@ export const CreateAttendeeModal = ({onClose}: GenericModalProps) => {
                 )}
 
                 {occurrenceIsFull && (
-                    <Alert
-                        mt="md"
-                        color="orange"
-                        icon={<IconAlertTriangle size={16}/>}
+                    <Callout
+                        variant="tip"
+                        style={{marginTop: 16}}
                         title={t`This occurrence is at capacity`}
                     >
                         <Stack gap="xs">
@@ -285,7 +284,7 @@ export const CreateAttendeeModal = ({onClose}: GenericModalProps) => {
                                 {...form.getInputProps('override_capacity', {type: 'checkbox'})}
                             />
                         </Stack>
-                    </Alert>
+                    </Callout>
                 )}
 
                 <NumberInput

diff --git a/frontend/src/components/modals/CreateOrganizerWebhookModal/index.tsx b/frontend/src/components/modals/CreateOrganizerWebhookModal/index.tsx
@@ -4,14 +4,14 @@ import { Modal } from "../../common/Modal";
 import { t, Trans } from "@lingui/macro";
 import { WebhookForm } from "../../forms/WebhookForm";
 import { useForm } from "@mantine/form";
-import { Alert, Button, Group, TextInput } from "@mantine/core";
+import { Button, TextInput } from "@mantine/core";
 import { useCreateOrganizerWebhook } from "../../../mutations/useCreateOrganizerWebhook";
 import { showSuccess } from "../../../utilites/notifications";
 import { useParams } from "react-router";
 import { useFormErrorResponseHandler } from "../../../hooks/useFormErrorResponseHandler";
 import { OrganizerWebhookRequest } from "../../../api/organizer-webhook.client.ts";
 import { CopyButton } from "../../common/CopyButton";
-import { IconInfoCircle } from "@tabler/icons-react";
+import { Callout } from "../../common/Callout";
 
 export const CreateOrganizerWebhookModal = ({ onClose }: GenericModalProps) => {
     const { organizerId } = useParams();
@@ -60,9 +60,9 @@ export const CreateOrganizerWebhookModal = ({ onClose }: GenericModalProps) => {
                 onClose={onClose}
                 heading={t`Webhook Signing Secret`}
             >
-                <Alert icon={<IconInfoCircle/>} color="yellow" mb="md">
+                <Callout variant="tip">
                     <Trans>This is the only time the signing secret will be shown. Please copy it now and store it securely.</Trans>
-                </Alert>
+                </Callout>
                 <TextInput
                     value={secret}
                     readOnly

diff --git a/frontend/src/components/modals/CreateProductCategoryModal/index.tsx b/frontend/src/components/modals/CreateProductCategoryModal/index.tsx
@@ -1,14 +1,14 @@
 import {GenericModalProps, ProductCategory} from "../../../types.ts";
 import {Modal} from "../../common/Modal";
 import {t} from "@lingui/macro";
-import {Alert, Button} from "@mantine/core";
+import {Button} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {useCreateProductCategory} from "../../../mutations/useCreateProductCategory.ts";
 import {ProductCategoryForm} from "../../forms/ProductCategoryForm";
 import {showSuccess} from "../../../utilites/notifications.tsx";
 import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
-import {IconInfoCircle} from "@tabler/icons-react";
+import {Callout} from "../../common/Callout";
 
 export const CreateProductCategoryModal = ({onClose}: GenericModalProps) => {
     const errorHandler = useFormErrorResponseHandler();
@@ -48,13 +48,9 @@ export const CreateProductCategoryModal = ({onClose}: GenericModalProps) => {
             withCloseButton
         >
             <form onSubmit={form.onSubmit((values) => handleCreate(values))}>
-                <Alert
-                    icon={<IconInfoCircle/>}
-                    title={t`What is a Category?`}
-                    mb={20}
-                >
+                <Callout variant="info" title={t`What is a Category?`}>
                     {t`Categories allow you to group products together. For example, you might have a category for "Tickets" and another for "Merchandise".`}
-                </Alert>
+                </Callout>
                 <ProductCategoryForm form={form}/>
                 <Button type="submit" fullWidth disabled={mutation.isPending}>
                     {mutation.isPending ? t`Working...` : t`Create Category`}

diff --git a/frontend/src/components/modals/CreateWebhookModal/index.tsx b/frontend/src/components/modals/CreateWebhookModal/index.tsx
@@ -4,14 +4,14 @@ import {Modal} from "../../common/Modal";
 import {t, Trans} from "@lingui/macro";
 import {WebhookForm} from "../../forms/WebhookForm";
 import {useForm} from "@mantine/form";
-import {Alert, Button, Group, TextInput} from "@mantine/core";
+import {Button, TextInput} from "@mantine/core";
 import {useCreateWebhook} from "../../../mutations/useCreateWebhook";
 import {showSuccess} from "../../../utilites/notifications";
 import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler";
 import {WebhookRequest} from "../../../api/webhook.client.ts";
 import {CopyButton} from "../../common/CopyButton";
-import {IconInfoCircle} from "@tabler/icons-react";
+import {Callout} from "../../common/Callout";
 
 export const CreateWebhookModal = ({onClose}: GenericModalProps) => {
     const {eventId} = useParams();
@@ -60,9 +60,9 @@ export const CreateWebhookModal = ({onClose}: GenericModalProps) => {
                 onClose={onClose}
                 heading={t`Webhook Signing Secret`}
             >
-                <Alert icon={<IconInfoCircle/>} color="yellow" mb="md">
+                <Callout variant="tip">
                     <Trans>This is the only time the signing secret will be shown. Please copy it now and store it securely.</Trans>
-                </Alert>
+                </Callout>
                 <TextInput
                     value={secret}
                     readOnly

diff --git a/frontend/src/components/modals/EditUserModal/index.tsx b/frontend/src/components/modals/EditUserModal/index.tsx
@@ -1,7 +1,8 @@
 import {useForm} from "@mantine/form";
 import {GenericModalProps, User,} from "../../../types.ts";
 import {Modal} from "../../common/Modal";
-import {Alert, Button, Select, TextInput} from "@mantine/core";
+import {Button, Select, TextInput} from "@mantine/core";
+import {Callout} from "../../common/Callout";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {t, Trans} from "@lingui/macro";
 import {CustomSelect, ItemProps} from "../../common/CustomSelect";
@@ -61,9 +62,9 @@ export const EditUserModal = ({onClose, user}: EditUserModalProps) => {
     return (
         <Modal heading={t`Edit User`} onClose={onClose} opened>
             {user.status === 'INVITED' && (
-                <Alert mb={20}>
+                <Callout variant="info">
                     <Trans>This user is not active, as they have not accepted their invitation.</Trans>
-                </Alert>
+                </Callout>
             )}
             <form onSubmit={form.onSubmit(values => handleCreate(values))}>
                 <fieldset disabled={ediMutation.isPending}>
@@ -84,9 +85,9 @@ export const EditUserModal = ({onClose, user}: EditUserModalProps) => {
                     />
 
                     {user.is_account_owner && (
-                        <Alert mb={20}>
+                        <Callout variant="info">
                             {t`You cannot edit the role or status of the account owner.`}
-                        </Alert>
+                        </Callout>
                     )}
 
                     <CustomSelect