From 268cce722ca71a9aa21024e9e5017d9c47e9e7d8 Mon Sep 17 00:00:00 2001
From: Graham Blair <graham@grahamarthurblair.com>
Date: Thu, 31 Oct 2024 13:14:39 -0700
Subject: [PATCH 1/3] Change collapse arrow to icon to prevent iOS from
 converting unicode arrow to emoji

---
 .../ticket-widget/SelectTickets/index.tsx     | 13 ++++++------
 frontend/src/styles/widget/default.scss       | 21 ++++++++++++++-----
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx b/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
index 2b188dd2..a5fb2df0 100644
--- a/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
+++ b/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
@@ -33,7 +33,7 @@ import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {Event} from "../../../../types.ts";
 import {eventsClientPublic} from "../../../../api/event.client.ts";
 import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconX} from "@tabler/icons-react"
+import {IconX, IconNavigationFilled} from "@tabler/icons-react"
 import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
 import {Constants} from "../../../../constants.ts";
 
@@ -297,7 +297,7 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                 .map((n) => n.toString());
                             quantityRange.unshift("0");
 
-                            const [ticketIsCollapsed, {toggle: collapseTicket}] = useDisclosure(!ticket.start_collapsed);
+                            const [ticketIsCollapsed, {toggle: collapseTicket}] = useDisclosure(ticket.start_collapsed);
 
                             return (
                                 <div key={ticket.id} className={'hi-ticket-row'}>
@@ -328,15 +328,14 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                                 {(!ticket.is_available && ticket.type === 'TIERED') && (
                                                     <TicketAvailabilityMessage ticket={ticket} event={event}/>
                                                 )}
-
-                                                <span className={'hi-ticket-collapse-arrow'}>
-                                                    {ticketIsCollapsed ? '\u25BC' : '\u25B6'}
-                                                </span>
                                             </div>
+                                            <span className={`hi-ticket-collapse-arrow`}>
+                                                <IconNavigationFilled className={ticketIsCollapsed ? "" : "open"} />
+                                            </span>
                                         </UnstyledButton>
                                     </div>
 
-                                    <Collapse in={ticketIsCollapsed} className={'hi-ticket-content'}>
+                                    <Collapse in={!ticketIsCollapsed} className={'hi-ticket-content'}>
                                         <div className={'hi-price-tiers-rows'}>
                                             <TieredPricing
                                                 ticketIndex={ticketIndex}
diff --git a/frontend/src/styles/widget/default.scss b/frontend/src/styles/widget/default.scss
index 09cc83d3..47683e73 100644
--- a/frontend/src/styles/widget/default.scss
+++ b/frontend/src/styles/widget/default.scss
@@ -40,6 +40,7 @@
           align-items: center;
 
           h3 {
+            flex: 1;
             margin: 10px 0;
 
             a {
@@ -48,14 +49,24 @@
           }
 
           .hi-ticket-title-metadata {
-            .hi-ticket-collapse-arrow {
-              color: var(--widget-secondary-color, var(--tk-primary));
-              margin-left: 10px;
-            }
-
             margin-left: 5px;
             font-weight: normal;
           }
+
+          .hi-ticket-collapse-arrow {
+            display: flex;
+            color: var(--widget-secondary-color, var(--tk-primary));
+            margin-left: 10px;
+
+            svg {
+              transform: rotate(90deg);
+              transition: all 0.1s linear;
+            }
+
+            svg.open {
+              transform: rotate(180deg);
+            }
+          }
         }
       }
 

From ca4ed77c808e6685f4ec7bf00c0851d199c1f92d Mon Sep 17 00:00:00 2001
From: Graham Blair <graham@grahamarthurblair.com>
Date: Thu, 31 Oct 2024 13:43:42 -0700
Subject: [PATCH 2/3] Do not wrap tier row group elements, ensure ticket
 counter is on right side

---
 .../routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx b/frontend/src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx
index 5289d961..f76c28ac 100644
--- a/frontend/src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx
+++ b/frontend/src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx
@@ -21,7 +21,7 @@ export const TieredPricing = ({ticket, event, form, ticketIndex}: TieredPricingP
             {ticket?.prices?.map((price, index) => {
                 return (
                     <div key={index} className={'hi-price-tier-row'}>
-                        <Group justify={'space-between'}>
+                        <Group justify={'space-between'} wrap={'nowrap'}>
                             <div className={'hi-price-tier'}>
                                 <div className={'hi-price-tier-label'}>{price.label}</div>
                                 <div className={'hi-price-tier-price'}>

From cb3cbd787928c7bc96f92e0437588d392e74770b Mon Sep 17 00:00:00 2001
From: Graham Blair <graham@grahamarthurblair.com>
Date: Mon, 4 Nov 2024 20:28:01 -0800
Subject: [PATCH 3/3] Change the collapse arrows to chevrons

---
 .../components/routes/ticket-widget/SelectTickets/index.tsx   | 4 ++--
 frontend/src/styles/widget/default.scss                       | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx b/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
index a5fb2df0..8bee1853 100644
--- a/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
+++ b/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
@@ -33,7 +33,7 @@ import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {Event} from "../../../../types.ts";
 import {eventsClientPublic} from "../../../../api/event.client.ts";
 import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconX, IconNavigationFilled} from "@tabler/icons-react"
+import {IconX, IconChevronRight} from "@tabler/icons-react"
 import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
 import {Constants} from "../../../../constants.ts";
 
@@ -330,7 +330,7 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                                 )}
                                             </div>
                                             <span className={`hi-ticket-collapse-arrow`}>
-                                                <IconNavigationFilled className={ticketIsCollapsed ? "" : "open"} />
+                                                <IconChevronRight className={ticketIsCollapsed ? "" : "open"} />
                                             </span>
                                         </UnstyledButton>
                                     </div>
diff --git a/frontend/src/styles/widget/default.scss b/frontend/src/styles/widget/default.scss
index 47683e73..09a4be72 100644
--- a/frontend/src/styles/widget/default.scss
+++ b/frontend/src/styles/widget/default.scss
@@ -59,12 +59,11 @@
             margin-left: 10px;
 
             svg {
-              transform: rotate(90deg);
               transition: all 0.1s linear;
             }
 
             svg.open {
-              transform: rotate(180deg);
+              transform: rotate(90deg);
             }
           }
         }