@opexa/portal-components 0.0.244 → 0.0.245

package/dist/client/hooks/useInfiniteQueryHelper.js

@@ -20,7 +20,7 @@ export function useInfiniteQueryHelper(useQuery, variables) {
     const rows = availablePages.at(page - 1) ?? [];
     const totalRows = query.data?.pages.at(-1)?.totalCount ?? 0;
     const totalPages = Math.ceil(totalRows / pageSize);
-    const hasNextPage = query.data?.pages.at(-1)?.pageInfo.hasNextPage ?? false;
+    const hasNextPage = page < totalPages;
     const hasPrevPage = page > 1;
     const next = async () => {
         if (!hasNextPage) {

package/dist/components/Account/Account.lazy.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
@@ -45,6 +46,7 @@ const defaultAccountProps = {
 };
 const recipe = accountRecipe();
 export function Account(props) {
+    const router = useRouter();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         account: ctx.account,
         account__mobile: ctx.account__mobile,
@@ -57,14 +59,14 @@ export function Account(props) {
                 }, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
                                 ['--offset-top-mobile']: mobileOffsetTop,
                                 ['--offset-top-desktop']: desktopOffsetTop,
-                            }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {})] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                            }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
                     globalStore.account.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, positioning: {
                     placement: 'bottom',
                     strategy: 'fixed',
                 }, ids: {
                     trigger: 'opexa-portal-components:account-trigger',
-                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {})] }) }) }) })] }));
+                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) })] }));
 }
 function Profile() {
     const accountQuery = useAccountQuery();
@@ -105,7 +107,7 @@ function Wallet() {
                             globalStore.mobileProfile.setOpen(false);
                         }, children: "Deposit" })] })] }));
 }
-function Links() {
+function Links({ router }) {
     const accountProps = useAccountPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         account: ctx.account,
@@ -116,6 +118,7 @@ function Links() {
         onSuccess() {
             localStorage.clear();
             sessionStorage.clear();
+            router.replace('/');
         },
     });
     const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });

package/dist/components/AccountInfo/AccountInfo.js

@@ -87,7 +87,7 @@ function PersonalInfo() {
                             ? data.birthDay
                             : undefined,
                     });
-                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 function ContactInfo() {
     const localeInfo = useLocaleInfo();

package/dist/components/AccountVerification/AccountVerification.js

@@ -13,6 +13,7 @@ import { FaceIdIcon } from '../../icons/FaceIdIcon.js';
 import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
 import { FileSearch02Icon } from '../../icons/FileSearch02Icon.js';
 import { FileX02Icon } from '../../icons/FileX02Icon.js';
+import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
 import { Button } from '../../ui/Button/index.js';
 export function AccountVerification(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -28,8 +29,10 @@ export function AccountVerification(props) {
     const empty = verification == null;
     const pending = verification?.status === 'PENDING';
     const success = verification?.status === 'VERIFIED' || verification?.status === 'APPROVED';
-    const failed = verification?.status === 'REJECTED' ||
-        verification?.status === 'UNVERIFIED';
+    const failed = verification?.status === 'REJECTED';
+    if (verificationQuery.isLoading) {
+        return _jsx(Spinner02Icon, { className: "text-text-brand-primary-600 size-5" });
+    }
     return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verify your identity" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
                             ? 'text-text-success-primary'
                             : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), !isKycCompleted && (_jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: _jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" }) }))] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));

package/dist/components/Banner/Banner.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import emblaCarouselAutoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useState } from 'react';
@@ -30,7 +31,7 @@ export function Banner(props) {
         };
     }, [emblaApi]);
     return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
-                        const img = (_jsx(Image, { src: banner.src, alt: "", width: 1200, height: 300, className: "block h-auto w-full rounded-xl", priority: index === 0 }));
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? 400 : 1200, height: isMobile() ? 225 : 300, className: "block h-auto w-full", priority: index === 0 }));
                         return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
                     }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
                         emblaApi?.scrollTo(index);

package/dist/components/BetRecords/BetRecords.client.d.ts

@@ -16,5 +16,9 @@ export interface BetRecordsProps {
      */
     gameProvidersGroup?: Partial<Record<GameType, GameProvider[]>>;
     className?: string;
+    placeholder?: {
+        gameProvider?: string;
+        status?: string;
+    };
 }
 export declare function BetRecords__client(props: BetRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetRecords/BetRecords.client.js

@@ -137,7 +137,7 @@ export function BetRecords__client(props) {
                             });
                         }, lazyMount: true, deselectable: true, positioning: {
                             sameWidth: true,
-                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: props.placeholder?.gameProvider ?? 'Game Vendor' }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
                                                         e.stopPropagation();
                                                     }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: provider.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider.id))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
                             const value = z
@@ -149,7 +149,7 @@ export function BetRecords__client(props) {
                             });
                         }, lazyMount: true, deselectable: true, positioning: {
                             sameWidth: true,
-                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: props.placeholder?.status ?? 'Status' }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
                                                         e.stopPropagation();
                                                     }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: statusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,

package/dist/components/Bonuses/Bonuses.client.js

@@ -102,22 +102,27 @@ function CashbackBonus(props) {
             });
         },
     });
-    const balance = parseDecimal(bonus.balance, 0);
-    const total = parseDecimal(bonus.total, 0);
+    const currentAccumulatedCashbackAmount = parseDecimal(bonus.balance, 0);
+    const totalAccumulatedCashbackAmount = parseDecimal(bonus.total, 0);
     const minimumCashback = parseDecimal(props.data.cashback.minimumCashback, 0);
-    const maximumMonthlyCashback = parseDecimal(props.data.cashback.maximumMonthlyCashback, 0);
-    const disabled = balance <= 0 || total > maximumMonthlyCashback || balance < minimumCashback;
+    const maximumMonthlyCashbackLimit = parseDecimal(props.data.cashback.maximumMonthlyCashback, 0);
+    const hasNoCashback = currentAccumulatedCashbackAmount <= 0;
+    const hasReachedOrExceededMonthlyLimit = totalAccumulatedCashbackAmount >= maximumMonthlyCashbackLimit;
+    const belowMinimumCashbackThreshold = currentAccumulatedCashbackAmount < minimumCashback;
+    const disabled = hasNoCashback ||
+        hasReachedOrExceededMonthlyLimit ||
+        belowMinimumCashbackThreshold;
     return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
                     background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-                }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center text-xl font-semibold text-white", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: formatNumber(bonus.balance, {
+                }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center text-xl font-semibold text-white", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: formatNumber(currentAccumulatedCashbackAmount, {
                             currency: localeInfo.currency.code,
                         }) }), _jsx("div", { className: "text-text-secondary-700 mt-2 line-clamp-1 text-center text-sm", dangerouslySetInnerHTML: {
                             __html: cashback.description,
                         } }), _jsx("div", { className: "grow" }), disabled ? (_jsxs(Popover.Root, { lazyMount: true, unmountOnExit: true, positioning: {
                             placement: 'top',
-                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "bg-bg-quaternary rounded-md px-2.5 py-2 text-sm font-medium", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), "You need", ' ', formatNumber(minimumCashback - balance, {
-                                            currency: localeInfo.currency.code,
-                                        }), ' ', "to claim this cashback."] }) })] })) : (_jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
+                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "bg-bg-quaternary rounded-md px-2.5 py-2 text-sm font-medium", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), hasReachedOrExceededMonthlyLimit ? (_jsx(_Fragment, { children: "You've claimed the maximum cashback for this month." })) : (_jsxs(_Fragment, { children: ["You need", ' ', formatNumber(minimumCashback - currentAccumulatedCashbackAmount, {
+                                                    currency: localeInfo.currency.code,
+                                                }), ' ', "to claim this cashback."] }))] }) })] })) : (_jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
                             claimCashbackBonusMutation.mutate(bonus.id);
                         }, children: "Claim" }))] })] }));
 }

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -6,6 +6,8 @@ import { useCreateGameSessionMutation } from '../../client/hooks/useCreateGameSe
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { toaster } from '../../client/utils/toaster.js';
+import { GAMES_AVAILABLE_3PM_TO_3AM } from '../../utils/gamesAvailable3pmTo3am.js';
+import { isBetween3amAnd3pm } from '../../utils/isBetween3amAnd3pm.js';
 export function GameLaunchTrigger(props) {
     const sessionQuery = useSessionQuery();
     const createGameSessionMutation = useCreateGameSessionMutation();
@@ -25,6 +27,11 @@ export function GameLaunchTrigger(props) {
             : globalStore.gameLaunch.details.status === 'WAITING'
                 ? 'closed'
                 : 'open', ...props, disabled: disabled, onClick: async (e) => {
+            // prevent game launch for games that are only available between 3 PM and 3 AM
+            if (!isBetween3amAnd3pm() &&
+                GAMES_AVAILABLE_3PM_TO_3AM.includes(props.game.name)) {
+                return;
+            }
             if (sessionQuery.data?.status === 'unauthenticated') {
                 globalStore.signIn.setOpen(true);
                 return props.onClick?.(e);

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -37,8 +37,8 @@ export function GameProvidersCarousel(props) {
     const viewGamesUrl = (data) => {
         return props.viewGamesUrl
             ? callIfFn(props.viewGamesUrl, data)
-                .replace(':id', data.id)
-                .replace(':slug', data.slug)
+                .replace(':id', data?.id)
+                .replace(':slug', data?.slug)
             : `/providers/${data.slug}`;
     };
     const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}