@rpg-engine/long-bow 0.8.223 → 0.8.225

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.223",
+  "version": "0.8.225",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Store/CartView.tsx

@@ -1,6 +1,10 @@
 import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
+import { Cancel } from 'pixelarticons/react/Cancel';
+import { Delete } from 'pixelarticons/react/Delete';
+import { InfoBox } from 'pixelarticons/react/InfoBox';
+import { Box } from 'pixelarticons/react/Box';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useState } from 'react';
-import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 import characterAtlasJSON from '../../mocks/atlas/entities/entities.json';
 import characterAtlasIMG from '../../mocks/atlas/entities/entities.png';
@@ -46,7 +50,7 @@ const MetadataDisplay: React.FC<{
       return (
         <MetadataInfo>
           <MetadataLabel>
-            <FaInfoCircle />
+            <InfoBox />
             <span>Skin:</span>
           </MetadataLabel>
           <MetadataValue>{metadata.selectedSkinName || 'Custom skin'}</MetadataValue>
@@ -139,16 +143,19 @@ export const CartView: React.FC<ICartViewProps> = ({
       <Header>
         <Title>Shopping Cart ({cartItems.reduce((s, ci) => s + ci.quantity, 0)})</Title>
         <CloseButton onPointerDown={onClose}>
-          <FaTimes />
+          <Cancel />
         </CloseButton>
       </Header>
 
       <MainContent>
-        <CartItems>
-          {cartItems.length === 0 ? (
-            <EmptyCart>Your cart is empty</EmptyCart>
-          ) : (
-            cartItems.map(cartItem => {
+        {cartItems.length === 0 ? (
+          <EmptyCart>
+            <Box />
+            Your cart is empty
+          </EmptyCart>
+        ) : (
+          <CartItems>
+            {cartItems.map(cartItem => {
               const getSpriteKey = (textureKey: string) => {
                 return textureKey + '/down/standing/0.png';
               };
@@ -190,7 +197,7 @@ export const CartView: React.FC<ICartViewProps> = ({
                   </ItemDetails>
 
                   <CTAButton
-                    icon={<FaTrash />}
+                    icon={<Delete />}
                     onClick={e => {
                       e.stopPropagation();
                       onRemoveFromCart(cartItem.item.key);
@@ -198,9 +205,9 @@ export const CartView: React.FC<ICartViewProps> = ({
                   />
                 </CartItemRow>
               );
-            })
-          )}
-        </CartItems>
+            })}
+          </CartItems>
+        )}
 
         {cartItems.length > 0 && (
           <OrderSummaryPanel>
@@ -233,7 +240,7 @@ export const CartView: React.FC<ICartViewProps> = ({
         <TrustBar signals={trustSignals} />
         {error && <ErrorMessage>{error}</ErrorMessage>}
         <CTAButton
-          icon={<FaShoppingBag />}
+          icon={<ShoppingBag />}
           label={isLoading ? 'Processing...' : `Pay ${currencySymbol}${formatPrice(total)}`}
           onClick={handlePurchase}
           fullWidth
@@ -286,19 +293,13 @@ const CloseButton = styled.div`
 
 const MainContent = styled.div`
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 260px;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
   gap: 1rem;
   flex: 1;
   min-height: 0;
   margin: 1rem 0;
 
-  @media (max-width: 700px) {
-    grid-template-columns: minmax(0, 1fr) 180px;
-    gap: 0.75rem;
-  }
-
   @media (max-width: 480px) {
-    grid-template-columns: minmax(0, 1fr) 130px;
     gap: 0.5rem;
     margin: 0.5rem 0;
   }
@@ -351,14 +352,22 @@ const OrderSummaryPanel = styled.div`
 `;
 
 const EmptyCart = styled.div`
+  grid-column: 1 / -1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
   height: 100%;
   color: #ffffff;
   font-family: 'Press Start 2P', cursive;
   font-size: 0.875rem;
   opacity: 0.7;
+
+  svg {
+    width: 48px;
+    height: 48px;
+  }
 `;
 
 const CartItemRow = styled.div`
@@ -455,10 +464,14 @@ const TotalRow = styled.div<{ $isTotal?: boolean }>`
     color: #fef08a;
   }
 
-  @media (max-width: 480px) {
-    font-size: ${p => p.$isTotal ? '0.7rem' : '0.55rem'};
+  @media (max-width: 700px) {
+    font-size: ${p => p.$isTotal ? '0.75rem' : '0.6rem'};
     gap: 0.5rem;
   }
+
+  @media (max-width: 480px) {
+    font-size: ${p => p.$isTotal ? '0.65rem' : '0.5rem'};
+  }
 `;
 
 const PaymentMethodRow = styled.div`

package/src/components/Store/FeaturedBanner.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FaBolt } from 'react-icons/fa';
+import { Zap } from 'pixelarticons/react/Zap';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
@@ -53,7 +53,7 @@ export const FeaturedBanner: React.FC<IFeaturedBannerProps> = ({
   return (
     <BannerWrapper>
       <BannerHeader>
-        <FaBolt />
+        <Zap />
         <span>FEATURED OFFERS</span>
       </BannerHeader>
       <CardsRow>
@@ -114,7 +114,7 @@ export const FeaturedBanner: React.FC<IFeaturedBannerProps> = ({
               <CardActions onClick={e => e.stopPropagation()}>
                 {onQuickBuy && (
                   <CTAButton
-                    icon={<FaBolt />}
+                    icon={<Zap />}
                     label="Buy Now"
                     onClick={() => onQuickBuy(item)}
                   />

package/src/components/Store/PaymentMethodModal.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { FaTimes } from 'react-icons/fa';
+import { Cancel } from 'pixelarticons/react/Cancel';
 import styled from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
 import { Button, ButtonTypes } from '../Button';
@@ -77,7 +77,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           <Header>
             <Title>How would you like to pay?</Title>
             <CloseButton onPointerDown={onClose} aria-label="Close">
-              <FaTimes />
+              <Cancel />
             </CloseButton>
           </Header>
 

package/src/components/Store/PurchaseSuccess.tsx

@@ -1,6 +1,8 @@
 import { MetadataType } from '@rpg-engine/shared';
 import React from 'react';
-import { FaShoppingBag, FaStar, FaTimes } from 'react-icons/fa';
+import { Cancel } from 'pixelarticons/react/Cancel';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import { Sparkle } from 'pixelarticons/react/Sparkle';
 import styled, { keyframes } from 'styled-components';
 import characterAtlasJSON from '../../mocks/atlas/entities/entities.json';
 import characterAtlasIMG from '../../mocks/atlas/entities/entities.png';
@@ -41,7 +43,7 @@ export const PurchaseSuccess: React.FC<IPurchaseSuccessProps> = ({
       <Header>
         <TrophyArea>
           <TrophyIcon>
-            <FaStar />
+            <Sparkle />
           </TrophyIcon>
         </TrophyArea>
         <Title>PURCHASE COMPLETE!</Title>
@@ -81,13 +83,13 @@ export const PurchaseSuccess: React.FC<IPurchaseSuccessProps> = ({
 
       <Actions>
         <CTAButton
-          icon={<FaShoppingBag />}
+          icon={<ShoppingBag />}
           label="Continue Shopping"
           onClick={onContinueShopping}
           fullWidth
         />
         <CloseLink onPointerDown={onClose}>
-          <FaTimes /> Close Store
+          <Cancel /> Close Store
         </CloseLink>
       </Actions>
     </Container>

package/src/components/Store/Store.tsx

@@ -4,7 +4,10 @@ import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
 import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
-import { FaHistory, FaShoppingCart, FaTicketAlt, FaUsers, FaWallet } from 'react-icons/fa';
+import { DateTime } from 'pixelarticons/react/DateTime';
+import { Receipt } from 'pixelarticons/react/Receipt';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
+import { Users } from 'pixelarticons/react/Users';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -251,13 +254,13 @@ export const Store: React.FC<IStoreProps> = ({
     characters: {
       id: 'characters',
       title: 'Char Trade',
-      icon: <FaUsers size={16} />,
+      icon: <Users />,
       content: customCharactersContent ?? null,
     },
     redeem: {
       id: 'redeem',
       title: 'Redeem',
-      icon: <FaTicketAlt size={16} />,
+      icon: <Receipt />,
       content: onRedeem ? (
         <StoreRedeemSection
           onRedeem={onRedeem}
@@ -272,17 +275,17 @@ export const Store: React.FC<IStoreProps> = ({
       icon: <Wallet width={18} height={18} />,
       content: customWalletContent ?? (
         <CenteredContent>
-          <CTAButton icon={<FaWallet />} label={`Open ${walletLabel ?? 'Wallet'}`} onClick={onShowWallet} />
+          <CTAButton icon={<Wallet />} label={`Open ${walletLabel ?? 'Wallet'}`} onClick={onShowWallet} />
         </CenteredContent>
       ),
     },
     history: {
       id: 'history',
       title: 'History',
-      icon: <FaHistory width={18} height={18} />,
+      icon: <DateTime />,
       content: customHistoryContent ?? (
         <CenteredContent>
-          <CTAButton icon={<FaHistory />} label="Open History" onClick={onShowHistory} />
+          <CTAButton icon={<DateTime />} label="Open History" onClick={onShowHistory} />
         </CenteredContent>
       ),
     },
@@ -370,7 +373,7 @@ export const Store: React.FC<IStoreProps> = ({
           {cartItems.length > 0 && (
             <Footer>
               <CTAButton
-                icon={<FaShoppingCart />}
+                icon={<ShoppingCart />}
                 label={`Proceed to Checkout (${currencySymbol}${getTotalPrice().toFixed(2)})`}
                 onClick={handleOpenCart}
                 fullWidth

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -4,7 +4,7 @@ import {
   UserAccountTypes,
 } from '@rpg-engine/shared';
 import React from 'react';
-import { FaCartPlus } from 'react-icons/fa';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
@@ -163,7 +163,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
       </ItemDetails>
       <Controls>
         <CTAButton
-          icon={<FaCartPlus />}
+          icon={<ShoppingCart />}
           label="Add"
           onClick={handleAddToCart}
           disabled={!hasRequiredAccount}

package/src/components/Store/StoreHeader.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { FaShoppingCart } from 'react-icons/fa';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { Tabs } from '../shared/Tabs';
@@ -29,7 +29,7 @@ export const StoreHeader: React.FC<IStoreHeaderProps> = ({
       />
     </TabsFlexWrapper>
     <CartButtonWrapper>
-      <CTAButton icon={<FaShoppingCart />} onClick={onOpenCart} />
+      <CTAButton icon={<ShoppingCart />} onClick={onOpenCart} />
       {cartItemCount > 0 && <CartBadge>{cartItemCount}</CartBadge>}
     </CartButtonWrapper>
   </HeaderRow>

package/src/components/Store/StoreItemDetails.tsx

@@ -1,6 +1,7 @@
 import { IItemPack, IProductBlueprint } from '@rpg-engine/shared';
 import React from 'react';
-import { FaArrowLeft, FaCartPlus } from 'react-icons/fa';
+import { ArrowLeft } from 'pixelarticons/react/ArrowLeft';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
@@ -33,7 +34,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
     <Container>
       <Header>
         <BackButton onClick={onBack}>
-          <FaArrowLeft />
+          <ArrowLeft />
           <span>Back</span>
         </BackButton>
       </Header>
@@ -62,7 +63,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
 
         <Actions>
           <CTAButton
-            icon={<FaCartPlus />}
+            icon={<ShoppingCart />}
             label="Add to Cart"
             onClick={() => onAddToCart(item as IProductBlueprint)}
             fullWidth

package/src/components/Store/StoreItemRow.tsx

@@ -1,6 +1,7 @@
 import { IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
-import { FaBolt, FaCartPlus } from 'react-icons/fa';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
+import { Zap } from 'pixelarticons/react/Zap';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
@@ -198,7 +199,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 
         {onQuickBuy && (
           <CTAButton
-            icon={<FaBolt />}
+            icon={<Zap />}
             label="Buy"
             onClick={handleQuickBuy}
             disabled={!hasRequiredAccount}
@@ -208,7 +209,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           />
         )}
         <CTAButton
-          icon={<FaCartPlus />}
+          icon={<ShoppingCart />}
           label="Add"
           onClick={handleAddToCartInternal}
           disabled={!hasRequiredAccount}

package/src/components/Store/TrustBar.tsx

@@ -1,5 +1,7 @@
+import { Headphone } from 'pixelarticons/react/Headphone';
+import { Lock } from 'pixelarticons/react/Lock';
+import { Zap } from 'pixelarticons/react/Zap';
 import React from 'react';
-import { FaHeadset, FaLock, FaRocket } from 'react-icons/fa';
 import styled from 'styled-components';
 
 export interface ITrustSignal {
@@ -13,9 +15,9 @@ export interface ITrustBarProps {
 
 const DefaultSignals: React.FC = () => (
   <>
-    <Signal><SignalIcon><FaLock /></SignalIcon><SignalLabel>Secure Payment</SignalLabel></Signal>
-    <Signal><SignalIcon><FaRocket /></SignalIcon><SignalLabel>Instant Delivery</SignalLabel></Signal>
-    <Signal><SignalIcon><FaHeadset /></SignalIcon><SignalLabel>24/7 Support</SignalLabel></Signal>
+    <Signal><SignalIcon><Lock /></SignalIcon><SignalLabel>Secure Payment</SignalLabel></Signal>
+    <Signal><SignalIcon><Zap /></SignalIcon><SignalLabel>Instant Delivery</SignalLabel></Signal>
+    <Signal><SignalIcon><Headphone /></SignalIcon><SignalLabel>24/7 Support</SignalLabel></Signal>
   </>
 );
 

package/src/components/Store/sections/StorePacksSection.tsx

@@ -1,6 +1,7 @@
 import { IItemPack } from '@rpg-engine/shared';
 import React, { useCallback, useEffect } from 'react';
-import { FaBolt, FaCartPlus } from 'react-icons/fa';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
+import { Zap } from 'pixelarticons/react/Zap';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ItemRowWrapper } from '../../shared/ItemRowWrapper';
@@ -97,9 +98,9 @@ const PackRowItem: React.FC<IPackRowItemProps> = ({
           <SelectArrow direction="right" onPointerDown={incrementQuantity} size={24} />
         </ArrowsContainer>
         {onQuickBuy && (
-          <CTAButton icon={<FaBolt />} label="Buy" onClick={handleQuickBuy} iconColor="#fff" textColor="#fff" />
+          <CTAButton icon={<Zap />} label="Buy" onClick={handleQuickBuy} iconColor="#fff" textColor="#fff" />
         )}
-        <CTAButton icon={<FaCartPlus />} label="Add" onClick={handleAdd} pulse />
+        <CTAButton icon={<ShoppingCart />} label="Add" onClick={handleAdd} pulse />
       </Controls>
     </PackRow>
   );

package/src/components/Store/sections/StoreRedeemSection.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { FaCheckCircle, FaExclamationCircle, FaTicketAlt } from 'react-icons/fa';
+import { Check } from 'pixelarticons/react/Check';
+import { Receipt } from 'pixelarticons/react/Receipt';
+import { WarningDiamond } from 'pixelarticons/react/WarningDiamond';
 import styled, { keyframes } from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
@@ -65,7 +67,7 @@ export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
       <Container>
         <ResultContainer>
           <SuccessIcon>
-            <FaCheckCircle size={32} />
+            <Check width={32} height={32} />
           </SuccessIcon>
           <SuccessTitle>Code Redeemed!</SuccessTitle>
           {dcAmount != null && (
@@ -74,7 +76,7 @@ export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
           <SuccessHint>Your wallet balance has been updated.</SuccessHint>
           <ButtonWrapper>
             <CTAButton
-              icon={<FaTicketAlt />}
+              icon={<Receipt />}
               label="Redeem Another"
               onClick={handleReset}
             />
@@ -89,12 +91,12 @@ export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
       <Container>
         <ResultContainer>
           <ErrorIcon>
-            <FaExclamationCircle size={32} />
+            <WarningDiamond width={32} height={32} />
           </ErrorIcon>
           <ErrorTitle>{errorMessage}</ErrorTitle>
           <ButtonWrapper>
             <CTAButton
-              icon={<FaTicketAlt />}
+              icon={<Receipt />}
               label="Try Again"
               onClick={handleReset}
             />
@@ -126,7 +128,7 @@ export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
       </InputRow>
       <ButtonWrapper>
         <CTAButton
-          icon={<FaTicketAlt />}
+          icon={<Receipt />}
           label={status === 'loading' ? 'Redeeming...' : 'Redeem Code'}
           onClick={() => { void handleSubmit(); }}
           disabled={!canSubmit}