Merge pull request #277 from grablair/fix/prevent-unicode-emoji-conversion-collapse-arrow

Author: daveearley

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'}>

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, IconChevronRight} 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`}>
+                                                <IconChevronRight 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}

frontend/src/styles/widget/default.scss

@@ -40,6 +40,7 @@
           align-items: center;
 
           h3 {
+            flex: 1;
             margin: 10px 0;
 
             a {
@@ -48,14 +49,23 @@
           }
 
           .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 {
+              transition: all 0.1s linear;
+            }
+
+            svg.open {
+              transform: rotate(90deg);
+            }
+          }
         }
       }