style(cabinet-icons): use regular Phosphor weight and switch wheel to dice

- Drop the Duotone variants (their translucent secondary fill looked murky on
  the dark theme) in favour of the clean regular weight across all icons
- WheelIcon: PiSteeringWheel → PiDiceFive (a steering wheel made no sense for
  the fortune-wheel feature)
This commit is contained in:
c0mrade
2026-05-31 19:24:29 +03:00
parent b8be98939a
commit 0a89838926
13 changed files with 297 additions and 311 deletions

View File

@@ -18,7 +18,7 @@ import {
verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import {
GripIcon,
TrashIcon,
@@ -41,9 +41,7 @@ import { useNotify } from '../../platform/hooks/useNotify';
import { useNativeDialog } from '../../platform/hooks/useNativeDialog';
const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDownDuotone
className={`h-3.5 w-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`}
/>
<PiCaretDown className={`h-3.5 w-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
);
function generateId(): string {

View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSortable } from '@dnd-kit/sortable';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { CSS } from '@dnd-kit/utilities';
import { cn } from '../../lib/utils';
import { GripIcon, TrashIcon } from '../icons/LandingIcons';
@@ -11,7 +11,7 @@ import type { PaymentMethodSubOptionInfo } from '../../types';
export type MethodWithId = AdminLandingPaymentMethod & { _id: string };
const ChevronDownIcon = ({ open }: { open: boolean }) => (
<PiCaretDownDuotone className={cn('h-5 w-5 transition-transform', open && 'rotate-180')} />
<PiCaretDown className={cn('h-5 w-5 transition-transform', open && 'rotate-180')} />
);
interface SortableSelectedMethodProps {

View File

@@ -6,7 +6,7 @@
// thin local wrapper over the panel's Phosphor caret icons.
// ──────────────────────────────────────────────────────────────────
import { PiCaretDownDuotone, PiCaretUpDownDuotone, PiCaretUpDuotone } from 'react-icons/pi';
import { PiCaretDown, PiCaretUpDown, PiCaretUp } from 'react-icons/pi';
export {
CalendarIcon,
@@ -27,9 +27,9 @@ export {
export const SortIcon = ({ direction }: { direction: false | 'asc' | 'desc' }) =>
direction === 'asc' ? (
<PiCaretUpDuotone className="ml-1 inline h-3 w-3" />
<PiCaretUp className="ml-1 inline h-3 w-3" />
) : direction === 'desc' ? (
<PiCaretDownDuotone className="ml-1 inline h-3 w-3" />
<PiCaretDown className="ml-1 inline h-3 w-3" />
) : (
<PiCaretUpDownDuotone className="ml-1 inline h-3 w-3" />
<PiCaretUpDown className="ml-1 inline h-3 w-3" />
);

View File

@@ -1,4 +1,4 @@
import { PiCaretRightDuotone } from 'react-icons/pi';
import { PiCaretRight } from 'react-icons/pi';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router';
import { useCurrency } from '../../hooks/useCurrency';
@@ -13,7 +13,7 @@ interface StatsGridProps {
}
const ChevronIcon = ({ color }: { color: string }) => (
<PiCaretRightDuotone width={16} height={16} style={{ flexShrink: 0, color }} aria-hidden="true" />
<PiCaretRight width={16} height={16} style={{ flexShrink: 0, color }} aria-hidden="true" />
);
export default function StatsGrid({

View File

@@ -1,18 +1,18 @@
import {
PiTextBDuotone,
PiTextItalicDuotone,
PiTextUnderlineDuotone,
PiTextStrikethroughDuotone,
PiTextHOneDuotone,
PiTextHTwoDuotone,
PiTextHThreeDuotone,
PiListBulletsDuotone,
PiListNumbersDuotone,
PiQuotesDuotone,
PiCodeBlockDuotone,
PiTextAlignLeftDuotone,
PiTextAlignCenterDuotone,
PiHighlighterDuotone,
PiTextB,
PiTextItalic,
PiTextUnderline,
PiTextStrikethrough,
PiTextHOne,
PiTextHTwo,
PiTextHThree,
PiListBullets,
PiListNumbers,
PiQuotes,
PiCodeBlock,
PiTextAlignLeft,
PiTextAlignCenter,
PiHighlighter,
} from 'react-icons/pi';
import { cn } from '@/lib/utils';
@@ -22,64 +22,64 @@ interface IconProps {
}
/**
* Rich-text editor toolbar icons — Phosphor (react-icons/pi) Duotone, the
* panel's icon family. Shared by the TipTap toolbars in AdminNewsCreate and
* Rich-text editor toolbar icons — Phosphor (react-icons/pi), the panel's
* icon family (regular weight). Shared by the TipTap toolbars in AdminNewsCreate and
* AdminInfoPageEditor. Names match the historical local definitions so the
* toolbars import instead of hand-rolling SVGs.
*/
export const BoldIcon = ({ className }: IconProps) => (
<PiTextBDuotone className={cn('h-5 w-5', className)} />
<PiTextB className={cn('h-5 w-5', className)} />
);
export const ItalicIcon = ({ className }: IconProps) => (
<PiTextItalicDuotone className={cn('h-5 w-5', className)} />
<PiTextItalic className={cn('h-5 w-5', className)} />
);
export const UnderlineIcon = ({ className }: IconProps) => (
<PiTextUnderlineDuotone className={cn('h-5 w-5', className)} />
<PiTextUnderline className={cn('h-5 w-5', className)} />
);
export const StrikeIcon = ({ className }: IconProps) => (
<PiTextStrikethroughDuotone className={cn('h-5 w-5', className)} />
<PiTextStrikethrough className={cn('h-5 w-5', className)} />
);
export const H1Icon = ({ className }: IconProps) => (
<PiTextHOneDuotone className={cn('h-5 w-5', className)} />
<PiTextHOne className={cn('h-5 w-5', className)} />
);
export const H2Icon = ({ className }: IconProps) => (
<PiTextHTwoDuotone className={cn('h-5 w-5', className)} />
<PiTextHTwo className={cn('h-5 w-5', className)} />
);
export const H3Icon = ({ className }: IconProps) => (
<PiTextHThreeDuotone className={cn('h-5 w-5', className)} />
<PiTextHThree className={cn('h-5 w-5', className)} />
);
export const ListBulletIcon = ({ className }: IconProps) => (
<PiListBulletsDuotone className={cn('h-5 w-5', className)} />
<PiListBullets className={cn('h-5 w-5', className)} />
);
export const ListOrderedIcon = ({ className }: IconProps) => (
<PiListNumbersDuotone className={cn('h-5 w-5', className)} />
<PiListNumbers className={cn('h-5 w-5', className)} />
);
export const QuoteIcon = ({ className }: IconProps) => (
<PiQuotesDuotone className={cn('h-5 w-5', className)} />
<PiQuotes className={cn('h-5 w-5', className)} />
);
export const CodeBlockIcon = ({ className }: IconProps) => (
<PiCodeBlockDuotone className={cn('h-5 w-5', className)} />
<PiCodeBlock className={cn('h-5 w-5', className)} />
);
export const AlignLeftIcon = ({ className }: IconProps) => (
<PiTextAlignLeftDuotone className={cn('h-5 w-5', className)} />
<PiTextAlignLeft className={cn('h-5 w-5', className)} />
);
export const AlignCenterIcon = ({ className }: IconProps) => (
<PiTextAlignCenterDuotone className={cn('h-5 w-5', className)} />
<PiTextAlignCenter className={cn('h-5 w-5', className)} />
);
export const HighlightIcon = ({ className }: IconProps) => (
<PiHighlighterDuotone className={cn('h-5 w-5', className)} />
<PiHighlighter className={cn('h-5 w-5', className)} />
);

View File

@@ -1,76 +1,76 @@
import {
PiSlidersHorizontalDuotone,
PiHeadsetDuotone,
PiArrowDownDuotone,
PiArrowRightDuotone,
PiArrowUpDuotone,
PiProhibitDuotone,
PiMoneyDuotone,
PiBellDuotone,
PiLightningDuotone,
PiRobotDuotone,
PiBroadcastDuotone,
PiAppWindowDuotone,
PiCalendarDotsDuotone,
PiCreditCardDuotone,
PiChartBarDuotone,
PiCheckCircleDuotone,
PiCaretUpDownDuotone,
PiCaretDownDuotone,
PiCaretLeftDuotone,
PiCaretUpDuotone,
PiCurrencyBtcDuotone,
PiDevicesDuotone,
PiFileTextDuotone,
PiSlidersHorizontal,
PiHeadset,
PiArrowDown,
PiArrowRight,
PiArrowUp,
PiProhibit,
PiMoney,
PiBell,
PiLightning,
PiRobot,
PiBroadcast,
PiAppWindow,
PiCalendarDots,
PiCreditCard,
PiChartBar,
PiCheckCircle,
PiCaretUpDown,
PiCaretDown,
PiCaretLeft,
PiCaretUp,
PiCurrencyBtc,
PiDevices,
PiFileText,
PiCircleFill,
PiEnvelopeDuotone,
PiWarningDuotone,
PiArrowSquareOutDuotone,
PiEyeDuotone,
PiFunnelDuotone,
PiDotsSixDuotone,
PiDotsSixVerticalDuotone,
PiHeartbeatDuotone,
PiClockCounterClockwiseDuotone,
PiImageDuotone,
PiInfinityDuotone,
PiLinkDuotone,
PiMegaphoneDuotone,
PiMinusDuotone,
PiNewspaperDuotone,
PiHandshakeDuotone,
PiPushPinDuotone,
PiPlusDuotone,
PiPowerDuotone,
PiQuestionDuotone,
PiRepeatDuotone,
PiFlagDuotone,
PiArrowCounterClockwiseDuotone,
PiArrowClockwiseDuotone,
PiRocketDuotone,
PiFloppyDiskDuotone,
PiPaperPlaneTiltDuotone,
PiPercentDuotone,
PiHardDrivesDuotone,
PiGearSixDuotone,
PiShareNetworkDuotone,
PiSparkleDuotone,
PiChartLineDuotone,
PiGiftDuotone,
PiTimerDuotone,
PiCircleDuotone,
PiTagDuotone,
PiTelegramLogoDuotone,
PiTicketDuotone,
PiGaugeDuotone,
PiTrashDuotone,
PiTrophyDuotone,
PiPushPinSlashDuotone,
PiUserPlusDuotone,
PiUsersThreeDuotone,
PiVideoCameraDuotone,
PiXCircleDuotone,
PiXDuotone,
PiEnvelope,
PiWarning,
PiArrowSquareOut,
PiEye,
PiFunnel,
PiDotsSix,
PiDotsSixVertical,
PiHeartbeat,
PiClockCounterClockwise,
PiImage,
PiInfinity,
PiLink,
PiMegaphone,
PiMinus,
PiNewspaper,
PiHandshake,
PiPushPin,
PiPlus,
PiPower,
PiQuestion,
PiRepeat,
PiFlag,
PiArrowCounterClockwise,
PiArrowClockwise,
PiRocket,
PiFloppyDisk,
PiPaperPlaneTilt,
PiPercent,
PiHardDrives,
PiGearSix,
PiShareNetwork,
PiSparkle,
PiChartLine,
PiGift,
PiTimer,
PiCircle,
PiTag,
PiTelegramLogo,
PiTicket,
PiGauge,
PiTrash,
PiTrophy,
PiPushPinSlash,
PiUserPlus,
PiUsersThree,
PiVideoCamera,
PiXCircle,
PiX,
} from 'react-icons/pi';
import { cn } from '@/lib/utils';
@@ -80,106 +80,106 @@ interface IconProps {
}
/**
* Extended cabinet icon set — Phosphor (react-icons/pi) Duotone, the panel's
* Extended cabinet icon set — Phosphor (react-icons/pi), the panel's
* icon family. These cover the icons that used to be hand-written inline across
* feature pages and components. Names match the historical local definitions so
* every page can import from the central barrel instead of redefining SVGs.
*/
export const AdjustmentsIcon = ({ className }: IconProps) => (
<PiSlidersHorizontalDuotone className={cn('h-5 w-5', className)} />
<PiSlidersHorizontal className={cn('h-5 w-5', className)} />
);
export const AgentIcon = ({ className }: IconProps) => (
<PiHeadsetDuotone className={cn('h-5 w-5', className)} />
<PiHeadset className={cn('h-5 w-5', className)} />
);
export const ArrowDownIcon = ({ className }: IconProps) => (
<PiArrowDownDuotone className={cn('h-5 w-5', className)} />
<PiArrowDown className={cn('h-5 w-5', className)} />
);
export const ArrowIcon = ({ className }: IconProps) => (
<PiArrowRightDuotone className={cn('h-5 w-5', className)} />
<PiArrowRight className={cn('h-5 w-5', className)} />
);
export const ArrowUpIcon = ({ className }: IconProps) => (
<PiArrowUpDuotone className={cn('h-5 w-5', className)} />
<PiArrowUp className={cn('h-5 w-5', className)} />
);
export const BanIcon = ({ className }: IconProps) => (
<PiProhibitDuotone className={cn('h-5 w-5', className)} />
<PiProhibit className={cn('h-5 w-5', className)} />
);
export const BanknotesIcon = ({ className }: IconProps) => (
<PiMoneyDuotone className={cn('h-5 w-5', className)} />
<PiMoney className={cn('h-5 w-5', className)} />
);
export const BellIcon = ({ className }: IconProps) => (
<PiBellDuotone className={cn('h-5 w-5', className)} />
<PiBell className={cn('h-5 w-5', className)} />
);
export const BoltIcon = ({ className }: IconProps) => (
<PiLightningDuotone className={cn('h-5 w-5', className)} />
<PiLightning className={cn('h-5 w-5', className)} />
);
export const BotIcon = ({ className }: IconProps) => (
<PiRobotDuotone className={cn('h-5 w-5', className)} />
<PiRobot className={cn('h-5 w-5', className)} />
);
export const BroadcastIcon = ({ className }: IconProps) => (
<PiBroadcastDuotone className={cn('h-5 w-5', className)} />
<PiBroadcast className={cn('h-5 w-5', className)} />
);
export const CabinetIcon = ({ className }: IconProps) => (
<PiAppWindowDuotone className={cn('h-5 w-5', className)} />
<PiAppWindow className={cn('h-5 w-5', className)} />
);
export const CalendarIcon = ({ className }: IconProps) => (
<PiCalendarDotsDuotone className={cn('h-5 w-5', className)} />
<PiCalendarDots className={cn('h-5 w-5', className)} />
);
export const CardIcon = ({ className }: IconProps) => (
<PiCreditCardDuotone className={cn('h-5 w-5', className)} />
<PiCreditCard className={cn('h-5 w-5', className)} />
);
export const ChannelIcon = ({ className }: IconProps) => (
<PiBroadcastDuotone className={cn('h-5 w-5', className)} />
<PiBroadcast className={cn('h-5 w-5', className)} />
);
export const ChartBarIcon = ({ className }: IconProps) => (
<PiChartBarDuotone className={cn('h-5 w-5', className)} />
<PiChartBar className={cn('h-5 w-5', className)} />
);
export const CheckCircleIcon = ({ className }: IconProps) => (
<PiCheckCircleDuotone className={cn('h-5 w-5', className)} />
<PiCheckCircle className={cn('h-5 w-5', className)} />
);
export const ChevronExpandIcon = ({ className }: IconProps) => (
<PiCaretUpDownDuotone className={cn('h-5 w-5', className)} />
<PiCaretUpDown className={cn('h-5 w-5', className)} />
);
export const ChevronIcon = ({ className }: IconProps) => (
<PiCaretDownDuotone className={cn('h-5 w-5', className)} />
<PiCaretDown className={cn('h-5 w-5', className)} />
);
export const ChevronLeftIcon = ({ className }: IconProps) => (
<PiCaretLeftDuotone className={cn('h-5 w-5', className)} />
<PiCaretLeft className={cn('h-5 w-5', className)} />
);
export const ChevronUpIcon = ({ className }: IconProps) => (
<PiCaretUpDuotone className={cn('h-5 w-5', className)} />
<PiCaretUp className={cn('h-5 w-5', className)} />
);
export const CryptoIcon = ({ className }: IconProps) => (
<PiCurrencyBtcDuotone className={cn('h-5 w-5', className)} />
<PiCurrencyBtc className={cn('h-5 w-5', className)} />
);
export const DevicesIcon = ({ className }: IconProps) => (
<PiDevicesDuotone className={cn('h-5 w-5', className)} />
<PiDevices className={cn('h-5 w-5', className)} />
);
export const DocumentIcon = ({ className }: IconProps) => (
<PiFileTextDuotone className={cn('h-5 w-5', className)} />
<PiFileText className={cn('h-5 w-5', className)} />
);
export const DotIcon = ({ className }: IconProps) => (
@@ -187,229 +187,223 @@ export const DotIcon = ({ className }: IconProps) => (
);
export const EmailIcon = ({ className }: IconProps) => (
<PiEnvelopeDuotone className={cn('h-5 w-5', className)} />
<PiEnvelope className={cn('h-5 w-5', className)} />
);
export const ExclamationIcon = ({ className }: IconProps) => (
<PiWarningDuotone className={cn('h-5 w-5', className)} />
<PiWarning className={cn('h-5 w-5', className)} />
);
export const ExternalLinkIcon = ({ className }: IconProps) => (
<PiArrowSquareOutDuotone className={cn('h-5 w-5', className)} />
<PiArrowSquareOut className={cn('h-5 w-5', className)} />
);
export const EyeIcon = ({ className }: IconProps) => (
<PiEyeDuotone className={cn('h-5 w-5', className)} />
);
export const EyeIcon = ({ className }: IconProps) => <PiEye className={cn('h-5 w-5', className)} />;
export const FileTextIcon = ({ className }: IconProps) => (
<PiFileTextDuotone className={cn('h-5 w-5', className)} />
<PiFileText className={cn('h-5 w-5', className)} />
);
export const FilterIcon = ({ className }: IconProps) => (
<PiFunnelDuotone className={cn('h-5 w-5', className)} />
<PiFunnel className={cn('h-5 w-5', className)} />
);
export const GripIcon = ({ className }: IconProps) => (
<PiDotsSixDuotone className={cn('h-5 w-5', className)} />
<PiDotsSix className={cn('h-5 w-5', className)} />
);
export const GripVerticalIcon = ({ className }: IconProps) => (
<PiDotsSixVerticalDuotone className={cn('h-5 w-5', className)} />
<PiDotsSixVertical className={cn('h-5 w-5', className)} />
);
export const HealthIcon = ({ className }: IconProps) => (
<PiHeartbeatDuotone className={cn('h-5 w-5', className)} />
<PiHeartbeat className={cn('h-5 w-5', className)} />
);
export const HistoryIcon = ({ className }: IconProps) => (
<PiClockCounterClockwiseDuotone className={cn('h-5 w-5', className)} />
<PiClockCounterClockwise className={cn('h-5 w-5', className)} />
);
export const ImageIcon = ({ className }: IconProps) => (
<PiImageDuotone className={cn('h-5 w-5', className)} />
<PiImage className={cn('h-5 w-5', className)} />
);
export const InfinityIcon = ({ className }: IconProps) => (
<PiInfinityDuotone className={cn('h-5 w-5', className)} />
<PiInfinity className={cn('h-5 w-5', className)} />
);
export const LinkIcon = ({ className }: IconProps) => (
<PiLinkDuotone className={cn('h-5 w-5', className)} />
<PiLink className={cn('h-5 w-5', className)} />
);
export const MailIcon = ({ className }: IconProps) => (
<PiEnvelopeDuotone className={cn('h-5 w-5', className)} />
<PiEnvelope className={cn('h-5 w-5', className)} />
);
export const MegaphoneIcon = ({ className }: IconProps) => (
<PiMegaphoneDuotone className={cn('h-5 w-5', className)} />
<PiMegaphone className={cn('h-5 w-5', className)} />
);
export const MinusIcon = ({ className }: IconProps) => (
<PiMinusDuotone className={cn('h-5 w-5', className)} />
<PiMinus className={cn('h-5 w-5', className)} />
);
export const NewsIcon = ({ className }: IconProps) => (
<PiNewspaperDuotone className={cn('h-5 w-5', className)} />
<PiNewspaper className={cn('h-5 w-5', className)} />
);
export const PartnerIcon = ({ className }: IconProps) => (
<PiHandshakeDuotone className={cn('h-5 w-5', className)} />
<PiHandshake className={cn('h-5 w-5', className)} />
);
export const PhotoIcon = ({ className }: IconProps) => (
<PiImageDuotone className={cn('h-5 w-5', className)} />
<PiImage className={cn('h-5 w-5', className)} />
);
export const PercentIcon = ({ className }: IconProps) => (
<PiPercentDuotone className={cn('h-5 w-5', className)} />
<PiPercent className={cn('h-5 w-5', className)} />
);
export const PinIcon = ({ className }: IconProps) => (
<PiPushPinDuotone className={cn('h-5 w-5', className)} />
<PiPushPin className={cn('h-5 w-5', className)} />
);
export const PlusSmallIcon = ({ className }: IconProps) => (
<PiPlusDuotone className={cn('h-4 w-4', className)} />
<PiPlus className={cn('h-4 w-4', className)} />
);
export const PowerIcon = ({ className }: IconProps) => (
<PiPowerDuotone className={cn('h-5 w-5', className)} />
<PiPower className={cn('h-5 w-5', className)} />
);
export const QuestionIcon = ({ className }: IconProps) => (
<PiQuestionDuotone className={cn('h-5 w-5', className)} />
<PiQuestion className={cn('h-5 w-5', className)} />
);
export const RepeatIcon = ({ className }: IconProps) => (
<PiRepeatDuotone className={cn('h-5 w-5', className)} />
<PiRepeat className={cn('h-5 w-5', className)} />
);
export const ReportIcon = ({ className }: IconProps) => (
<PiFlagDuotone className={cn('h-5 w-5', className)} />
<PiFlag className={cn('h-5 w-5', className)} />
);
export const ResetIcon = ({ className }: IconProps) => (
<PiArrowCounterClockwiseDuotone className={cn('h-5 w-5', className)} />
<PiArrowCounterClockwise className={cn('h-5 w-5', className)} />
);
export const RestartIcon = ({ className }: IconProps) => (
<PiArrowClockwiseDuotone className={cn('h-5 w-5', className)} />
<PiArrowClockwise className={cn('h-5 w-5', className)} />
);
export const RocketIcon = ({ className }: IconProps) => (
<PiRocketDuotone className={cn('h-5 w-5', className)} />
<PiRocket className={cn('h-5 w-5', className)} />
);
export const SaveIcon = ({ className }: IconProps) => (
<PiFloppyDiskDuotone className={cn('h-5 w-5', className)} />
<PiFloppyDisk className={cn('h-5 w-5', className)} />
);
export const SendIcon = ({ className }: IconProps) => (
<PiPaperPlaneTiltDuotone className={cn('h-5 w-5', className)} />
<PiPaperPlaneTilt className={cn('h-5 w-5', className)} />
);
export const ServerSmallIcon = ({ className }: IconProps) => (
<PiHardDrivesDuotone className={cn('h-4 w-4', className)} />
<PiHardDrives className={cn('h-4 w-4', className)} />
);
export const SettingsIcon = ({ className }: IconProps) => (
<PiGearSixDuotone className={cn('h-5 w-5', className)} />
<PiGearSix className={cn('h-5 w-5', className)} />
);
export const ShareIcon = ({ className }: IconProps) => (
<PiShareNetworkDuotone className={cn('h-5 w-5', className)} />
<PiShareNetwork className={cn('h-5 w-5', className)} />
);
export const SparklesIcon = ({ className }: IconProps) => (
<PiSparkleDuotone className={cn('h-5 w-5', className)} />
<PiSparkle className={cn('h-5 w-5', className)} />
);
export const StatBotIcon = ({ className }: IconProps) => (
<PiRobotDuotone className={cn('h-5 w-5', className)} />
<PiRobot className={cn('h-5 w-5', className)} />
);
export const StatCabinetIcon = ({ className }: IconProps) => (
<PiAppWindowDuotone className={cn('h-5 w-5', className)} />
<PiAppWindow className={cn('h-5 w-5', className)} />
);
export const StatPaidIcon = ({ className }: IconProps) => (
<PiMoneyDuotone className={cn('h-5 w-5', className)} />
<PiMoney className={cn('h-5 w-5', className)} />
);
export const StatsChartIcon = ({ className }: IconProps) => (
<PiChartLineDuotone className={cn('h-5 w-5', className)} />
<PiChartLine className={cn('h-5 w-5', className)} />
);
export const StatTrialIcon = ({ className }: IconProps) => (
<PiGiftDuotone className={cn('h-5 w-5', className)} />
<PiGift className={cn('h-5 w-5', className)} />
);
export const StatUptimeIcon = ({ className }: IconProps) => (
<PiTimerDuotone className={cn('h-5 w-5', className)} />
<PiTimer className={cn('h-5 w-5', className)} />
);
export const StatusIcon = ({ className }: IconProps) => (
<PiCircleDuotone className={cn('h-5 w-5', className)} />
<PiCircle className={cn('h-5 w-5', className)} />
);
export const TagIcon = ({ className }: IconProps) => (
<PiTagDuotone className={cn('h-5 w-5', className)} />
);
export const TagIcon = ({ className }: IconProps) => <PiTag className={cn('h-5 w-5', className)} />;
export const TelegramIcon = ({ className }: IconProps) => (
<PiTelegramLogoDuotone className={cn('h-5 w-5', className)} />
<PiTelegramLogo className={cn('h-5 w-5', className)} />
);
export const TelegramSmallIcon = ({ className }: IconProps) => (
<PiTelegramLogoDuotone className={cn('h-4 w-4', className)} />
<PiTelegramLogo className={cn('h-4 w-4', className)} />
);
export const TicketIcon = ({ className }: IconProps) => (
<PiTicketDuotone className={cn('h-5 w-5', className)} />
<PiTicket className={cn('h-5 w-5', className)} />
);
export const TrafficIcon = ({ className }: IconProps) => (
<PiGaugeDuotone className={cn('h-5 w-5', className)} />
<PiGauge className={cn('h-5 w-5', className)} />
);
export const TrashSmallIcon = ({ className }: IconProps) => (
<PiTrashDuotone className={cn('h-4 w-4', className)} />
<PiTrash className={cn('h-4 w-4', className)} />
);
export const TrophyIcon = ({ className }: IconProps) => (
<PiTrophyDuotone className={cn('h-5 w-5', className)} />
<PiTrophy className={cn('h-5 w-5', className)} />
);
export const UnpinIcon = ({ className }: IconProps) => (
<PiPushPinSlashDuotone className={cn('h-5 w-5', className)} />
<PiPushPinSlash className={cn('h-5 w-5', className)} />
);
export const UserPlusIcon = ({ className }: IconProps) => (
<PiUserPlusDuotone className={cn('h-5 w-5', className)} />
<PiUserPlus className={cn('h-5 w-5', className)} />
);
export const UsersOnlineIcon = ({ className }: IconProps) => (
<PiUsersThreeDuotone className={cn('h-5 w-5', className)} />
<PiUsersThree className={cn('h-5 w-5', className)} />
);
export const VideoIcon = ({ className }: IconProps) => (
<PiVideoCameraDuotone className={cn('h-5 w-5', className)} />
<PiVideoCamera className={cn('h-5 w-5', className)} />
);
export const WarningIcon = ({ className }: IconProps) => (
<PiWarningDuotone className={cn('h-5 w-5', className)} />
<PiWarning className={cn('h-5 w-5', className)} />
);
export const XCircleIcon = ({ className }: IconProps) => (
<PiXCircleDuotone className={cn('h-5 w-5', className)} />
<PiXCircle className={cn('h-5 w-5', className)} />
);
export const XCloseIcon = ({ className }: IconProps) => (
<PiXDuotone className={cn('h-5 w-5', className)} />
<PiX className={cn('h-5 w-5', className)} />
);
export const XMarkIcon = ({ className }: IconProps) => (
<PiXDuotone className={cn('h-5 w-5', className)} />
);
export const XMarkIcon = ({ className }: IconProps) => <PiX className={cn('h-5 w-5', className)} />;

View File

@@ -1,50 +1,50 @@
import type { CSSProperties } from 'react';
import {
PiArrowLeftDuotone,
PiArrowRightDuotone,
PiArrowsClockwiseDuotone,
PiCaretDownDuotone,
PiCaretRightDuotone,
PiChartBarDuotone,
PiChatCircleDuotone,
PiCheckDuotone,
PiClipboardTextDuotone,
PiClockDuotone,
PiCopyDuotone,
PiCreditCardDuotone,
PiDownloadSimpleDuotone,
PiGameControllerDuotone,
PiGearSixDuotone,
PiGiftDuotone,
PiGlobeDuotone,
PiHardDrivesDuotone,
PiHouseDuotone,
PiInfoDuotone,
PiListDuotone,
PiLockDuotone,
PiMagnifyingGlassDuotone,
PiMegaphoneDuotone,
PiMoonDuotone,
PiPaletteDuotone,
PiPauseCircleDuotone,
PiPencilDuotone,
PiPencilSimpleDuotone,
PiPlayDuotone,
PiPlusDuotone,
PiShieldDuotone,
PiSignOutDuotone,
PiSparkleDuotone,
PiStarDuotone,
PiArrowLeft,
PiArrowRight,
PiArrowsClockwise,
PiCaretDown,
PiCaretRight,
PiChartBar,
PiChatCircle,
PiCheck,
PiClipboardText,
PiClock,
PiCopy,
PiCreditCard,
PiDownloadSimple,
PiGameController,
PiGearSix,
PiGift,
PiGlobe,
PiHardDrives,
PiHouse,
PiInfo,
PiList,
PiLock,
PiMagnifyingGlass,
PiMegaphone,
PiMoon,
PiPalette,
PiPauseCircle,
PiPencil,
PiPencilSimple,
PiPlay,
PiPlus,
PiShield,
PiSignOut,
PiSparkle,
PiStar,
PiStarFill,
PiSteeringWheelDuotone,
PiStopDuotone,
PiSunDuotone,
PiTrashDuotone,
PiUploadSimpleDuotone,
PiUserDuotone,
PiUsersDuotone,
PiWalletDuotone,
PiXDuotone,
PiDiceFive,
PiStop,
PiSun,
PiTrash,
PiUploadSimple,
PiUser,
PiUsers,
PiWallet,
PiX,
} from 'react-icons/pi';
import { cn } from '@/lib/utils';
@@ -60,7 +60,7 @@ interface IconProps {
/**
* Cabinet icons are thin wrappers over the Remnawave panel's own icon library
* (Phosphor, via `react-icons/pi`, Duotone variants). Each export keeps the
* (Phosphor, via `react-icons/pi`, regular weight). Each export keeps the
* historical name + default Tailwind sizing so every consumer keeps working,
* while the cabinet now renders the exact icon set the panel uses instead of
* hand-written SVGs.
@@ -71,174 +71,168 @@ interface IconProps {
// Navigation & Layout
export const HomeIcon = ({ className }: IconProps) => (
<PiHouseDuotone className={cn('h-5 w-5', className)} />
<PiHouse className={cn('h-5 w-5', className)} />
);
export const BackIcon = ({ className }: IconProps) => (
<PiArrowLeftDuotone className={cn('h-5 w-5', className)} />
<PiArrowLeft className={cn('h-5 w-5', className)} />
);
export const ChevronRightIcon = ({ className }: IconProps) => (
<PiCaretRightDuotone className={cn('h-5 w-5', className)} />
<PiCaretRight className={cn('h-5 w-5', className)} />
);
export const MenuIcon = ({ className }: IconProps) => (
<PiListDuotone className={cn('h-5 w-5', className)} />
<PiList className={cn('h-5 w-5', className)} />
);
export const CloseIcon = ({ className }: IconProps) => (
<PiXDuotone className={cn('h-5 w-5', className)} />
);
export const CloseIcon = ({ className }: IconProps) => <PiX className={cn('h-5 w-5', className)} />;
export const ChevronDownIcon = ({ className }: IconProps) => (
<PiCaretDownDuotone className={cn('h-5 w-5', className)} />
<PiCaretDown className={cn('h-5 w-5', className)} />
);
export const ArrowRightIcon = ({ className }: IconProps) => (
<PiArrowRightDuotone className={cn('h-5 w-5', className)} />
<PiArrowRight className={cn('h-5 w-5', className)} />
);
// Actions
export const SearchIcon = ({ className }: IconProps) => (
<PiMagnifyingGlassDuotone className={cn('h-5 w-5', className)} />
<PiMagnifyingGlass className={cn('h-5 w-5', className)} />
);
export const PlusIcon = ({ className }: IconProps) => (
<PiPlusDuotone className={cn('h-5 w-5', className)} />
<PiPlus className={cn('h-5 w-5', className)} />
);
export const EditIcon = ({ className }: IconProps) => (
<PiPencilSimpleDuotone className={cn('h-4 w-4', className)} />
<PiPencilSimple className={cn('h-4 w-4', className)} />
);
export const PencilIcon = ({ className }: IconProps) => (
<PiPencilDuotone className={cn('h-4 w-4', className)} />
<PiPencil className={cn('h-4 w-4', className)} />
);
export const TrashIcon = ({ className }: IconProps) => (
<PiTrashDuotone className={cn('h-5 w-5', className)} />
<PiTrash className={cn('h-5 w-5', className)} />
);
export const UploadIcon = ({ className }: IconProps) => (
<PiUploadSimpleDuotone className={cn('h-5 w-5', className)} />
<PiUploadSimple className={cn('h-5 w-5', className)} />
);
export const DownloadIcon = ({ className }: IconProps) => (
<PiDownloadSimpleDuotone className={cn('h-5 w-5', className)} />
<PiDownloadSimple className={cn('h-5 w-5', className)} />
);
export const RefreshIcon = ({
className,
spinning = false,
}: IconProps & { spinning?: boolean }) => (
<PiArrowsClockwiseDuotone className={cn('h-4 w-4', spinning && 'animate-spin', className)} />
<PiArrowsClockwise className={cn('h-4 w-4', spinning && 'animate-spin', className)} />
);
export const SyncIcon = ({ className }: IconProps) => (
<PiArrowsClockwiseDuotone className={cn('h-5 w-5', className)} />
<PiArrowsClockwise className={cn('h-5 w-5', className)} />
);
// Status
export const CheckIcon = ({ className }: IconProps) => (
<PiCheckDuotone className={cn('h-4 w-4', className)} />
<PiCheck className={cn('h-4 w-4', className)} />
);
export const CopyIcon = ({ className }: IconProps) => (
<PiCopyDuotone className={cn('h-4 w-4', className)} />
<PiCopy className={cn('h-4 w-4', className)} />
);
export const XIcon = ({ className }: IconProps) => (
<PiXDuotone className={cn('h-4 w-4', className)} />
);
export const XIcon = ({ className }: IconProps) => <PiX className={cn('h-4 w-4', className)} />;
export const LockIcon = ({ className }: IconProps) => (
<PiLockDuotone className={cn('h-4 w-4', className)} />
<PiLock className={cn('h-4 w-4', className)} />
);
export const InfoIcon = ({ className }: IconProps) => (
<PiInfoDuotone className={cn('h-5 w-5', className)} />
<PiInfo className={cn('h-5 w-5', className)} />
);
// User & People
export const UserIcon = ({ className }: IconProps) => (
<PiUserDuotone className={cn('h-5 w-5', className)} />
<PiUser className={cn('h-5 w-5', className)} />
);
export const UsersIcon = ({ className }: IconProps) => (
<PiUsersDuotone className={cn('h-5 w-5', className)} />
<PiUsers className={cn('h-5 w-5', className)} />
);
export const LogoutIcon = ({ className }: IconProps) => (
<PiSignOutDuotone className={cn('h-5 w-5', className)} />
<PiSignOut className={cn('h-5 w-5', className)} />
);
// Theme
export const SunIcon = ({ className }: IconProps) => (
<PiSunDuotone className={cn('h-5 w-5', className)} />
);
export const SunIcon = ({ className }: IconProps) => <PiSun className={cn('h-5 w-5', className)} />;
export const MoonIcon = ({ className }: IconProps) => (
<PiMoonDuotone className={cn('h-5 w-5', className)} />
<PiMoon className={cn('h-5 w-5', className)} />
);
export const PaletteIcon = ({ className }: IconProps) => (
<PiPaletteDuotone className={cn('h-5 w-5', className)} />
<PiPalette className={cn('h-5 w-5', className)} />
);
// Features & Content
export const SubscriptionIcon = ({ className }: IconProps) => (
<PiSparkleDuotone className={cn('h-5 w-5', className)} />
<PiSparkle className={cn('h-5 w-5', className)} />
);
export const WalletIcon = ({ className }: IconProps) => (
<PiWalletDuotone className={cn('h-5 w-5', className)} />
<PiWallet className={cn('h-5 w-5', className)} />
);
export const ChatIcon = ({ className }: IconProps) => (
<PiChatCircleDuotone className={cn('h-5 w-5', className)} />
<PiChatCircle className={cn('h-5 w-5', className)} />
);
export const GiftIcon = ({ className }: IconProps) => (
<PiGiftDuotone className={cn('h-4 w-4', className)} />
<PiGift className={cn('h-4 w-4', className)} />
);
export const ClockIcon = ({ className }: IconProps) => (
<PiClockDuotone className={cn('h-5 w-5', className)} />
<PiClock className={cn('h-5 w-5', className)} />
);
export const StarIcon = ({ className, filled }: IconProps & { filled?: boolean }) =>
filled ? (
<PiStarFill className={cn('h-5 w-5', className)} />
) : (
<PiStarDuotone className={cn('h-5 w-5', className)} />
<PiStar className={cn('h-5 w-5', className)} />
);
export const GamepadIcon = ({ className }: IconProps) => (
<PiGameControllerDuotone className={cn('h-5 w-5', className)} />
<PiGameController className={cn('h-5 w-5', className)} />
);
export const ClipboardIcon = ({ className }: IconProps) => (
<PiClipboardTextDuotone className={cn('h-5 w-5', className)} />
<PiClipboardText className={cn('h-5 w-5', className)} />
);
export const CogIcon = ({ className }: IconProps) => (
<PiGearSixDuotone className={cn('h-5 w-5', className)} />
<PiGearSix className={cn('h-5 w-5', className)} />
);
export const WheelIcon = ({ className }: IconProps) => (
<PiSteeringWheelDuotone className={cn('h-5 w-5', className)} />
<PiDiceFive className={cn('h-5 w-5', className)} />
);
export const ShieldIcon = ({ className }: IconProps) => (
<PiShieldDuotone className={cn('h-5 w-5', className)} />
<PiShield className={cn('h-5 w-5', className)} />
);
export const ServerIcon = ({ className }: IconProps) => (
<PiHardDrivesDuotone className={cn('h-5 w-5', className)} />
<PiHardDrives className={cn('h-5 w-5', className)} />
);
export const CampaignIcon = ({ className }: IconProps) => (
<PiMegaphoneDuotone className={cn('h-5 w-5', className)} />
<PiMegaphone className={cn('h-5 w-5', className)} />
);
// Brand mark — the genuine Remnawave panel logo (kept as-is, this is the
@@ -260,29 +254,29 @@ export const RemnawaveIcon = ({ className }: IconProps) => (
);
export const ChartIcon = ({ className }: IconProps) => (
<PiChartBarDuotone className={cn('h-4 w-4', className)} />
<PiChartBar className={cn('h-4 w-4', className)} />
);
export const GlobeIcon = ({ className }: IconProps) => (
<PiGlobeDuotone className={cn('h-5 w-5', className)} />
<PiGlobe className={cn('h-5 w-5', className)} />
);
export const PlayIcon = ({ className }: IconProps) => (
<PiPlayDuotone className={cn('h-4 w-4', className)} />
<PiPlay className={cn('h-4 w-4', className)} />
);
export const StopIcon = ({ className }: IconProps) => (
<PiStopDuotone className={cn('h-4 w-4', className)} />
<PiStop className={cn('h-4 w-4', className)} />
);
export const ArrowPathIcon = ({ className }: IconProps) => (
<PiArrowsClockwiseDuotone className={cn('h-4 w-4', className)} />
<PiArrowsClockwise className={cn('h-4 w-4', className)} />
);
export const PauseIcon = ({ className, style }: IconProps & { style?: CSSProperties }) => (
<PiPauseCircleDuotone className={cn('h-5 w-5', className)} style={style} />
<PiPauseCircle className={cn('h-5 w-5', className)} style={style} />
);
export const CreditCardIcon = ({ className }: IconProps) => (
<PiCreditCardDuotone className={cn('h-5 w-5', className)} />
<PiCreditCard className={cn('h-5 w-5', className)} />
);

View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { CheckIcon, CopyIcon } from '@/components/icons';
import type { PartnerCampaignInfo } from '../../api/partners';
@@ -12,7 +12,7 @@ import { CampaignDetailStats } from './CampaignDetailStats';
import { StatCard } from '../stats/StatCard';
const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDownDuotone className={`h-5 w-5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
<PiCaretDown className={`h-5 w-5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
);
interface CampaignCardProps {

View File

@@ -20,7 +20,7 @@ import {
type BulkActionType,
type BulkActionParams,
} from '../api/adminBulkActions';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { usePlatform } from '../platform/hooks/usePlatform';
import { useCurrency } from '../hooks/useCurrency';
import { cn } from '@/lib/utils';
@@ -56,7 +56,7 @@ type SubscriptionStatusFilter = '' | 'active' | 'expired' | 'trial' | 'limited'
// className-only API), so it stays local as a thin wrapper over the panel's
// Phosphor caret, preserving the rotate-on-expand behavior.
const ChevronExpandIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDownDuotone
<PiCaretDown
className={cn('h-4 w-4 text-white transition-transform duration-200', expanded && 'rotate-180')}
/>
);

View File

@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { useNavigate, useParams } from 'react-router';
import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
@@ -53,7 +53,7 @@ function isoToDatetimeLocal(iso: string): string {
}
const ChevronDownIcon = ({ open }: { open: boolean }) => (
<PiCaretDownDuotone className={cn('h-5 w-5 transition-transform', open && 'rotate-180')} />
<PiCaretDown className={cn('h-5 w-5 transition-transform', open && 'rotate-180')} />
);
// ============ Collapsible Section ============

View File

@@ -1,7 +1,7 @@
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import DOMPurify from 'dompurify';
import { infoApi, FaqPage } from '../api/info';
import { infoPagesApi } from '../api/infoPages';
@@ -10,7 +10,7 @@ import type { FaqItem, ReplacesTab } from '../api/infoPages';
import { DocumentIcon, InfoIcon, QuestionIcon, ShieldIcon, StarIcon } from '@/components/icons';
const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDownDuotone className={`h-5 w-5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
<PiCaretDown className={`h-5 w-5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
);
const BUILTIN_TABS = new Set<string>(['faq', 'rules', 'privacy', 'offer', 'loyalty']);

View File

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import DOMPurify from 'dompurify';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { BackIcon, SearchIcon } from '@/components/icons';
import { infoPagesApi } from '../api/infoPages';
import { usePlatform } from '../platform/hooks/usePlatform';
@@ -160,7 +160,7 @@ function sanitizeHtml(html: string): string {
// --- FAQ Accordion ---
const ChevronIcon = ({ open }: { open: boolean }) => (
<PiCaretDownDuotone
<PiCaretDown
className={`h-5 w-5 text-dark-400 transition-transform duration-300 ${open ? 'rotate-180' : ''}`}
/>
);

View File

@@ -10,13 +10,13 @@ import { Card } from '@/components/data-display/Card/Card';
import { Button } from '@/components/primitives/Button/Button';
import { motion, AnimatePresence } from 'framer-motion';
import { staggerContainer, staggerItem } from '@/components/motion/transitions';
import { PiCaretDownDuotone } from 'react-icons/pi';
import { PiCaretDown } from 'react-icons/pi';
import { StarIcon, CalendarIcon, HistoryIcon, CloseIcon } from '@/components/icons';
import { cn } from '@/lib/utils';
// Icons
const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDownDuotone
<PiCaretDown
className={cn('h-5 w-5 transition-transform duration-200', expanded && 'rotate-180')}
/>
);