From a0733f8919e6650a5970872df9f94267d19ee52a Mon Sep 17 00:00:00 2001
From: Julien Delaigues <0xju@pm.me>
Date: Tue, 14 May 2024 11:32:19 +0800
Subject: [PATCH] style: adjust down arrow

---
 public/down-arrow.svg                         |  3 ---
 .../staking/components/modals/redelegate.tsx  | 23 ++++++++-----------
 2 files changed, 10 insertions(+), 16 deletions(-)
 delete mode 100644 public/down-arrow.svg

diff --git a/public/down-arrow.svg b/public/down-arrow.svg
deleted file mode 100644
index baacdc5..0000000
--- a/public/down-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.6569 10.6569L12 16.3137L6.34315 10.6569" stroke="white" stroke-width="1.5"/>
-</svg>
diff --git a/src/features/staking/components/modals/redelegate.tsx b/src/features/staking/components/modals/redelegate.tsx
index caad4ee..647d522 100644
--- a/src/features/staking/components/modals/redelegate.tsx
+++ b/src/features/staking/components/modals/redelegate.tsx
@@ -20,6 +20,7 @@ import CommonModal, {
   ModalDescription,
 } from "@/features/core/components/common-modal";
 import { ValidatorLogo } from "@/features/core/components/table";
+import { chevron } from "@/features/core/lib/icons";
 import AddressShort from "@/features/staking/components/address-short";
 import { useValidatorLogo } from "@/features/staking/hooks";
 
@@ -58,16 +59,6 @@ const ValidatorOption = ({
   );
 };
 
-const SelectArrow = ({ open = false }: { open?: boolean }) => (
-  <img
-    alt="down-arrow"
-    className={["ml-auto mr-4", open ? "rotate-180" : ""].join(" ")}
-    height={24}
-    src="/down-arrow.svg"
-    width={24}
-  />
-);
-
 const NoValidatorSelected = () => (
   <div className="flex gap-2 bg-black">
     <ValidatorLogo logo={null} />
@@ -75,7 +66,10 @@ const NoValidatorSelected = () => (
       <span>Select Validator</span>
       <span>XION Address</span>
     </div>
-    <SelectArrow />
+    <span
+      className="ml-auto mr-4 self-center"
+      dangerouslySetInnerHTML={{ __html: chevron }}
+    />
   </div>
 );
 
@@ -86,13 +80,16 @@ const ValidatorSelected = ({ validator }: { validator: Validator }) => {
   );
 
   return (
-    <div className="flex gap-2 bg-black">
+    <div className="flex gap-2 bg-black ">
       <ValidatorLogo logo={logo} />
       <div className="flex flex-col items-start gap-1 bg-black p-2">
         <span>{validator.description.moniker}</span>
         <AddressShort address={validator.operatorAddress} />
       </div>
-      <SelectArrow />
+      <span
+        className="ml-auto mr-4 self-center"
+        dangerouslySetInnerHTML={{ __html: chevron }}
+      />
     </div>
   );
 };