From 13b64ab4e7103b484feef646e2ce211315699708 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 22:28:41 +0300
Subject: [PATCH] refactor(subscription): use ChevronRightIcon from icons
 barrel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The five extracted sheet components each had a hand-inlined chevron
SVG copy-pasted from the original god page. Swap them for the
existing ChevronRightIcon from src/components/icons — same visual,
one source of truth (Heroicons-aligned path), and pre-baked sizing
through the cn() className merge.

Note on the broader 'icon unification' audit recommendation: this
project does not depend on lucide-react. It already ships a 703-line
hand-rolled icon barrel at src/components/icons/index.tsx. The real
cleanup is migrating the ~139 inline SVGs across the app to that
barrel, not adding a new icon library. This commit consolidates the
five duplicated chevrons introduced by the recent sheet extraction;
broader inline-SVG migration is a separate, larger refactor.
---
 .../subscription/sheets/DeviceReductionSheet.tsx      | 11 ++---------
 .../subscription/sheets/DeviceTopupSheet.tsx          | 11 ++---------
 .../subscription/sheets/ServerManagementSheet.tsx     | 11 ++---------
 .../subscription/sheets/TrafficTopupSheet.tsx         | 11 ++---------
 4 files changed, 8 insertions(+), 36 deletions(-)

diff --git a/src/components/subscription/sheets/DeviceReductionSheet.tsx b/src/components/subscription/sheets/DeviceReductionSheet.tsx
index 2a536a9..80d4a42 100644
--- a/src/components/subscription/sheets/DeviceReductionSheet.tsx
+++ b/src/components/subscription/sheets/DeviceReductionSheet.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { subscriptionApi } from '../../../api/subscription';
 import { getErrorMessage } from '../../../utils/subscriptionHelpers';
+import { ChevronRightIcon } from '../../icons';
 
 // ──────────────────────────────────────────────────────────────────
 // Reduce-devices sheet. Self-owns the reduction-info query + mutation;
@@ -83,15 +84,7 @@ export function DeviceReductionSheet({
               {t('subscription.additionalOptions.reduceDevicesDescription')}
             </div>
           </div>
-          <svg
-            className="h-5 w-5 text-dark-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-          </svg>
+          <ChevronRightIcon className="text-dark-400" />
         </div>
       </button>
     );
diff --git a/src/components/subscription/sheets/DeviceTopupSheet.tsx b/src/components/subscription/sheets/DeviceTopupSheet.tsx
index e59dacf..4f8ae33 100644
--- a/src/components/subscription/sheets/DeviceTopupSheet.tsx
+++ b/src/components/subscription/sheets/DeviceTopupSheet.tsx
@@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { subscriptionApi } from '../../../api/subscription';
 import { getErrorMessage } from '../../../utils/subscriptionHelpers';
 import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
+import { ChevronRightIcon } from '../../icons';
 import type { PurchaseOptions, Subscription } from '../../../types';
 
 // ──────────────────────────────────────────────────────────────────
@@ -81,15 +82,7 @@ export function DeviceTopupSheet({
               })}
             </div>
           </div>
-          <svg
-            className="h-5 w-5 text-dark-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-          </svg>
+          <ChevronRightIcon className="text-dark-400" />
         </div>
       </button>
     );
diff --git a/src/components/subscription/sheets/ServerManagementSheet.tsx b/src/components/subscription/sheets/ServerManagementSheet.tsx
index 8617948..353a0c8 100644
--- a/src/components/subscription/sheets/ServerManagementSheet.tsx
+++ b/src/components/subscription/sheets/ServerManagementSheet.tsx
@@ -4,6 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { subscriptionApi } from '../../../api/subscription';
 import { getErrorMessage, getFlagEmoji } from '../../../utils/subscriptionHelpers';
 import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
+import { ChevronRightIcon } from '../../icons';
 import type { PurchaseOptions, Subscription } from '../../../types';
 
 // ──────────────────────────────────────────────────────────────────
@@ -88,15 +89,7 @@ export function ServerManagementSheet({
               {t('subscription.servers', { count: subscription.servers?.length || 0 })}
             </div>
           </div>
-          <svg
-            className="h-5 w-5 text-dark-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-          </svg>
+          <ChevronRightIcon className="text-dark-400" />
         </div>
       </button>
     );
diff --git a/src/components/subscription/sheets/TrafficTopupSheet.tsx b/src/components/subscription/sheets/TrafficTopupSheet.tsx
index 6171bc5..05007bb 100644
--- a/src/components/subscription/sheets/TrafficTopupSheet.tsx
+++ b/src/components/subscription/sheets/TrafficTopupSheet.tsx
@@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { subscriptionApi } from '../../../api/subscription';
 import { getErrorMessage } from '../../../utils/subscriptionHelpers';
 import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
+import { ChevronRightIcon } from '../../icons';
 import type { PurchaseOptions, Subscription } from '../../../types';
 
 // ──────────────────────────────────────────────────────────────────
@@ -81,15 +82,7 @@ export function TrafficTopupSheet({
               })}
             </div>
           </div>
-          <svg
-            className="h-5 w-5 text-dark-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-          </svg>
+          <ChevronRightIcon className="text-dark-400" />
         </div>
       </button>
     );