From a73357b7591b63d07bc46bbd9f76e50ab6586f66 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Fri, 24 Apr 2026 21:06:07 -0400
Subject: [PATCH] refactor(ui): replace inline svg icons with icon components

- replace inline checkmark svg in ColorPicker with Tick02Icon
- replace inline sort arrow svg in Table with ArrowDown01Icon
- add ArrowDown01Icon to shared icons index
---
 src/shared/components/ColorPicker.client.js |  7 ++-----
 src/shared/components/Table.js              | 10 ++--------
 src/shared/icons/index.js                   |  6 ++++++
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/ColorPicker.client.js b/src/shared/components/ColorPicker.client.js
index a102848..d65d80a 100644
--- a/src/shared/components/ColorPicker.client.js
+++ b/src/shared/components/ColorPicker.client.js
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import { Tick02Icon } from '@zen/core/shared/icons';
 
 const ROW1 = ['#4489ed', '#2a9db0', '#43b53c', '#5e7b4e', '#f5c211', '#f7581f', '#ff2b2b', '#ff2e63', '#f540ed', '#b34ce9', '#818faf', '#c0bfbc'];
 const ROW2 = ['#2657cf', '#24687a', '#287124', '#384d2f', '#c68408', '#c0280e', '#ca0505', '#ce0245', '#b417a7', '#8021aa', '#4e5b7e', '#75746f'];
@@ -9,11 +10,7 @@ const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
 
 const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
 
-const Checkmark = () => (
-    <svg className="w-4 h-4 text-white drop-shadow-sm" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-    </svg>
-);
+const Checkmark = () => <Tick02Icon className="w-4 h-4 text-white drop-shadow-sm" />;
 
 const ColorPicker = ({
     value,
diff --git a/src/shared/components/Table.js b/src/shared/components/Table.js
index 3899da9..104a401 100644
--- a/src/shared/components/Table.js
+++ b/src/shared/components/Table.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import Badge from './Badge';
 import Button from './Button';
-import { TorriGateIcon } from '../icons/index.js';
+import { TorriGateIcon, ArrowDown01Icon } from '@zen/core/shared/icons';
 
 const ROW_SIZE = {
     sm: { cell: 'px-4 py-[11px]', header: 'px-4 py-[9px]', mobile: 'p-4' },
@@ -41,13 +41,7 @@ const Table = ({
         const isDesc = isActive && sortOrder === 'desc';
         return (
             <span className="ml-1">
-                <svg
-                    className={`w-4 h-4 transition-transform ${isActive ? (isDesc ? 'rotate-180' : '') : 'text-neutral-500 dark:text-neutral-400'}`}
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                >
-                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                </svg>
+                <ArrowDown01Icon className={`w-4 h-4 transition-transform ${isActive ? (isDesc ? 'rotate-180' : '') : 'text-neutral-500 dark:text-neutral-400'}`} />
             </span>
         );
     };
diff --git a/src/shared/icons/index.js b/src/shared/icons/index.js
index 243ba55..90f6f47 100644
--- a/src/shared/icons/index.js
+++ b/src/shared/icons/index.js
@@ -525,4 +525,10 @@ export const Menu01Icon = (props) => (
     <path fillRule="evenodd" clipRule="evenodd" d="M3 12C3 11.4477 3.44772 11 4 11L20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L4 13C3.44772 13 3 12.5523 3 12Z" fill="currentColor"></path>
     <path fillRule="evenodd" clipRule="evenodd" d="M3 19C3 18.4477 3.44772 18 4 18L20 18C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20L4 20C3.44772 20 3 19.5523 3 19Z" fill="currentColor"></path>
   </svg>
+);
+
+export const ArrowDown01Icon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
+    <path d="M18.593 8.19486C19.0376 8.52237 19.1326 9.14837 18.8051 9.59306C18.5507 9.93847 18.2963 10.2668 18.0731 10.5528C17.6276 11.1236 17.0143 11.8882 16.3479 12.6556C15.6859 13.4181 14.9518 14.2064 14.2666 14.8119C13.9251 15.1136 13.5721 15.3911 13.2279 15.5986C12.9112 15.7895 12.476 16 11.9999 16C11.5238 16 11.0885 15.7895 10.7718 15.5986C10.4276 15.3911 10.0747 15.1136 9.7332 14.8119C9.04791 14.2064 8.31387 13.4181 7.65183 12.6556C6.98548 11.8882 6.37216 11.1236 5.92664 10.5528C5.70347 10.2668 5.44902 9.93847 5.19463 9.59307C4.86712 9.14837 4.96211 8.52237 5.4068 8.19486C5.58556 8.0632 5.79362 7.99983 5.99982 8L11.9999 8L17.9999 8C18.2061 7.99983 18.4142 8.0632 18.593 8.19486Z" fill="currentColor" />
+  </svg>
 );
\ No newline at end of file