From 2ed63b1534a71dd7b9e839d450edae056ae6b498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:07:07 +0100
Subject: [PATCH] fix(dashboard): adjust transfer SVG for theme (#10307)

**What**
- make order transfer SVG header work on light and dark theme
---
 .../transfer-header.tsx                       | 74 +++++++++----------
 1 file changed, 35 insertions(+), 39 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/orders/order-request-transfer/components/create-order-transfer-form/transfer-header.tsx b/packages/admin/dashboard/src/routes/orders/order-request-transfer/components/create-order-transfer-form/transfer-header.tsx
index a48acda43b825..bac315a0a7fac 100644
--- a/packages/admin/dashboard/src/routes/orders/order-request-transfer/components/create-order-transfer-form/transfer-header.tsx
+++ b/packages/admin/dashboard/src/routes/orders/order-request-transfer/components/create-order-transfer-form/transfer-header.tsx
@@ -14,8 +14,7 @@ export function TransferHeader() {
         height="65.5"
         rx="6.75"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 149.756 60.938)"
-        fill="#E4E4E7"
-        stroke="#52525B"
+        className="stroke-ui-fg-subtle fill-ui-bg-base"
         strokeWidth="1.5"
       />
       <rect
@@ -25,14 +24,13 @@ export function TransferHeader() {
         height="65.5"
         rx="6.75"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 149.756 57.9383)"
-        fill="white"
-        stroke="#52525B"
+        className="stroke-ui-fg-subtle fill-ui-bg-base"
         strokeWidth="1.5"
       />
       <g clipPath="url(#clip0_20787_38934)">
         <path
           d="M140.579 79.6421L139.126 80.4592"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -40,7 +38,7 @@ export function TransferHeader() {
         <path
           opacity="0.88"
           d="M142.305 82.046L140.257 82.0342"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -48,7 +46,7 @@ export function TransferHeader() {
         <path
           opacity="0.75"
           d="M140.552 84.4297L139.108 83.5959"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -56,7 +54,7 @@ export function TransferHeader() {
         <path
           opacity="0.63"
           d="M136.347 85.3975L136.354 84.23"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -64,7 +62,7 @@ export function TransferHeader() {
         <path
           opacity="0.5"
           d="M132.154 84.3813L133.606 83.5642"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -72,7 +70,7 @@ export function TransferHeader() {
         <path
           opacity="0.38"
           d="M130.428 81.9775L132.476 81.9893"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -80,7 +78,7 @@ export function TransferHeader() {
         <path
           opacity="0.25"
           d="M132.181 79.5938L133.625 80.4275"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -88,7 +86,7 @@ export function TransferHeader() {
         <path
           opacity="0.13"
           d="M136.386 78.626L136.379 79.7935"
-          stroke="#52525B"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -99,7 +97,7 @@ export function TransferHeader() {
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 156.447 64.7927)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <rect
         x="0.00428286"
@@ -108,8 +106,7 @@ export function TransferHeader() {
         height="65.5"
         rx="6.75"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 77.0232 18.9148)"
-        fill="#E4E4E7"
-        stroke="#52525B"
+        className="stroke-ui-fg-subtle fill-ui-fg-muted"
         strokeWidth="1.5"
       />
       <rect
@@ -119,8 +116,7 @@ export function TransferHeader() {
         height="65.5"
         rx="6.75"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 77.0232 15.9148)"
-        fill="white"
-        stroke="#52525B"
+        className="stroke-ui-fg-subtle fill-ui-bg-base"
         strokeWidth="1.5"
       />
       <rect
@@ -128,26 +124,26 @@ export function TransferHeader() {
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 83.7141 22.7693)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <rect
         width="17"
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 57.5554 39.458)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <rect
         width="12"
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 53.1975 41.9094)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <g clipPath="url(#clip1_20787_38934)">
         <path
           d="M52.3603 36.4564C50.9277 35.6287 48.59 35.6152 47.148 36.4264C45.7059 37.2375 45.6983 38.5703 47.1308 39.398C48.5634 40.2257 50.9011 40.2392 52.3432 39.428C53.7852 38.6169 53.7929 37.2841 52.3603 36.4564ZM48.4382 38.6626C47.7221 38.2488 47.726 37.5822 48.4468 37.1768C49.1676 36.7713 50.3369 36.7781 51.0529 37.1918C51.769 37.6055 51.7652 38.2722 51.0444 38.6776C50.3236 39.083 49.1543 39.0763 48.4382 38.6626Z"
-          fill="#A1A1AA"
+          className="fill-ui-fg-subtle"
         />
       </g>
       <rect
@@ -155,25 +151,25 @@ export function TransferHeader() {
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 69.7573 32.5945)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <rect
         width="12"
         height="3"
         rx="1.5"
         transform="matrix(0.865865 0.500278 -0.871576 0.490261 65.3994 35.0459)"
-        fill="#E4E4E7"
+        className="fill-ui-fg-muted"
       />
       <g clipPath="url(#clip2_20787_38934)">
         <path
           d="M64.5622 29.5929C63.1296 28.7652 60.7919 28.7517 59.3499 29.5628C57.9079 30.374 57.9002 31.7067 59.3327 32.5344C60.7653 33.3622 63.103 33.3756 64.5451 32.5645C65.9871 31.7534 65.9948 30.4206 64.5622 29.5929ZM63.8581 31.3974L60.8148 31.6267C60.6827 31.6368 60.5495 31.6135 60.4486 31.5632C60.4399 31.5587 60.4321 31.5547 60.4244 31.5502C60.3386 31.5006 60.2899 31.4337 60.2903 31.3639L60.2933 30.6203C60.2937 30.4754 60.5012 30.3587 60.7557 30.3602C61.0102 30.3616 61.2163 30.4802 61.2155 30.6258L61.2138 31.0671L63.7317 30.8771C63.9833 30.858 64.2168 30.9586 64.2512 31.1032C64.286 31.247 64.1101 31.379 63.8581 31.3978L63.8581 31.3974Z"
-          fill="#A1A1AA"
+          className="fill-ui-fg-subtle"
         />
       </g>
       <g clipPath="url(#clip3_20787_38934)">
         <path
           d="M93.106 54.3022L100.49 54.3448L100.514 50.135"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -182,7 +178,7 @@ export function TransferHeader() {
       <g clipPath="url(#clip4_20787_38934)">
         <path
           d="M103.496 60.3056L110.881 60.3482L110.905 56.1384"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -191,7 +187,7 @@ export function TransferHeader() {
       <g clipPath="url(#clip5_20787_38934)">
         <path
           d="M113.887 66.3088L121.271 66.3514L121.295 62.1416"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -200,7 +196,7 @@ export function TransferHeader() {
       <g clipPath="url(#clip6_20787_38934)">
         <path
           d="M86.1135 61.6911L78.7294 61.6486L78.7051 65.8583"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -209,7 +205,7 @@ export function TransferHeader() {
       <g clipPath="url(#clip7_20787_38934)">
         <path
           d="M96.5039 67.6945L89.1198 67.652L89.0955 71.8618"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -218,7 +214,7 @@ export function TransferHeader() {
       <g clipPath="url(#clip8_20787_38934)">
         <path
           d="M106.894 73.6977L99.5102 73.6551L99.4859 77.8649"
-          stroke="#A1A1AA"
+          className="stroke-ui-fg-subtle"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -229,7 +225,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 136.401 76.0686)"
           />
         </clipPath>
@@ -237,7 +233,7 @@ export function TransferHeader() {
           <rect
             width="6"
             height="6"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 49.7627 34.9556)"
           />
         </clipPath>
@@ -245,7 +241,7 @@ export function TransferHeader() {
           <rect
             width="6"
             height="6"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 61.9646 28.092)"
           />
         </clipPath>
@@ -253,7 +249,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 98.3596 47.1509)"
           />
         </clipPath>
@@ -261,7 +257,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 108.75 53.1543)"
           />
         </clipPath>
@@ -269,7 +265,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 119.14 59.1575)"
           />
         </clipPath>
@@ -277,7 +273,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 80.9282 56.9561)"
           />
         </clipPath>
@@ -285,7 +281,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 91.3186 62.9595)"
           />
         </clipPath>
@@ -293,7 +289,7 @@ export function TransferHeader() {
           <rect
             width="12"
             height="12"
-            fill="white"
+            className="fill-ui-bg-base"
             transform="matrix(0.865865 0.500278 -0.871576 0.490261 101.709 68.9626)"
           />
         </clipPath>