Merge pull request #28 from Gearbox-protocol/fix-icon-colors

fix: icon colors; new icon added

Author: essserrr

src/icons/arrowUnderlying.tsx

@@ -18,12 +18,12 @@ export const IconArrowUnderlying = ({
   >
     <path
       d="M1 0V3C1 5.20914 2.79086 7 5 7H8"
-      stroke="#616D8C"
+      stroke="currentColor"
       strokeWidth="1.4"
     />
     <path
       d="M8 10.7929V3.20711C8 2.76165 8.53857 2.53857 8.85355 2.85355L12.6464 6.64645C12.8417 6.84171 12.8417 7.15829 12.6464 7.35355L8.85355 11.1464C8.53857 11.4614 8 11.2383 8 10.7929Z"
-      fill="#616D8C"
+      fill="currentColor"
     />
   </svg>
 );

src/icons/chart.tsx

@@ -14,7 +14,7 @@ export const IconChart = ({ style, onClick, size = 24 }: IconProps) => (
   >
     <path
       d="M9.5 16.1667H7.83333V10.3333H9.5V16.1667ZM12.8333 16.1667H11.1667V7.83333H12.8333V16.1667ZM16.1667 16.1667H14.5V12.8333H16.1667V16.1667ZM17.8333 17.8333H6.16667V6.16667H17.8333V17.9167V17.8333ZM17.8333 4.5H6.16667C5.25 4.5 4.5 5.25 4.5 6.16667V17.8333C4.5 18.75 5.25 19.5 6.16667 19.5H17.8333C18.75 19.5 19.5 18.75 19.5 17.8333V6.16667C19.5 5.25 18.75 4.5 17.8333 4.5Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );

src/icons/close.tsx

@@ -13,7 +13,7 @@ export const IconClose = ({ style, onClick, size = 24 }: IconProps) => (
   >
     <path
       d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-      fill="#a0a0a0"
+      fill="currentColor"
     />
   </svg>
 );

src/icons/coins.tsx

@@ -19,7 +19,7 @@ export function IconCoins({
     >
       <path
         d="M15 4C16.5822 4 18.1289 4.46919 19.4445 5.34824C20.7601 6.22729 21.7855 7.47672 22.391 8.93853C22.9965 10.4003 23.1549 12.0089 22.8463 13.5607C22.5376 15.1126 21.7757 16.538 20.6568 17.6569C19.538 18.7757 18.1126 19.5376 16.5607 19.8463C15.0089 20.155 13.4003 19.9965 11.9385 19.391C10.4767 18.7855 9.22727 17.7602 8.34822 16.4446C7.46917 15.129 6.99998 13.5823 6.99998 12C6.99998 9.87827 7.84284 7.84344 9.34313 6.34315C10.8434 4.84285 12.8782 4 15 4ZM2.99998 12C3.0014 13.2396 3.38672 14.4483 4.10298 15.46C4.81924 16.4718 5.83128 17.2368 6.99998 17.65V19.74C5.28799 19.2925 3.77265 18.2901 2.69113 16.8896C1.60962 15.4891 1.02295 13.7695 1.02295 12C1.02295 10.2305 1.60962 8.51093 2.69113 7.11041C3.77265 5.70989 5.28799 4.70746 6.99998 4.26V6.35C5.83128 6.7632 4.81924 7.52824 4.10298 8.53995C3.38672 9.55167 3.0014 10.7604 2.99998 12Z"
-        fill="#616D8C"
+        fill="currentColor"
       />
     </svg>
   );

src/icons/copy.tsx

@@ -19,11 +19,11 @@ export function IconCopy({
     >
       <path
         d="M6.25 3.125H0.625C0.279824 3.125 0 3.40482 0 3.75V9.375C0 9.72018 0.279824 10 0.625 10H6.25C6.59518 10 6.875 9.72018 6.875 9.375V3.75C6.875 3.40482 6.59518 3.125 6.25 3.125ZM6.25 9.375H0.625V3.75H6.25V9.375Z"
-        fill="#fff"
+        fill="currentColor"
       />
       <path
         d="M9.375 0H3.75C3.40482 0 3.125 0.279824 3.125 0.625V2.1875H3.75V0.625H9.375V6.25H7.8125V6.875H9.375C9.72018 6.875 10 6.59518 10 6.25V0.625C10 0.279824 9.72018 0 9.375 0Z"
-        fill="#fff"
+        fill="currentColor"
       />
     </svg>
   );

src/icons/editPen.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { IconProps } from "../core/icon";
+
+export function IconEditPen({
+  size = 24,
+  style,
+  onClick,
+}: IconProps): React.ReactElement {
+  return (
+    <svg
+      width={size}
+      height={size}
+      style={style}
+      onClick={onClick}
+      viewBox={"0 0 12 12"}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.7807 3.0314C12.0731 2.73895 12.0731 2.25152 11.7807 1.97407L10.0259 0.219341C9.74848 -0.0731136 9.26105 -0.0731136 8.9686 0.219341L7.58881 1.59163L10.4009 4.40369M0 9.18794V12H2.81206L9.606 5.19856L6.79394 2.3865L0 9.18794Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

src/icons/expand.tsx

@@ -11,10 +11,10 @@ export const IconExpand = ({ style, onClick, size = 24 }: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 306 306"
   >
-    <g fill="#ffffff" transform="rotate(180,153,153)" id="g836">
-      <g fill="#ffffff" id="expand-less">
+    <g fill="currentColor" transform="rotate(180,153,153)" id="g836">
+      <g fill="currentColor" id="expand-less">
         <polygon
-          fill="#ffffff"
+          fill="currentColor"
           id="polygon833"
           points="0,211.65 35.7,247.35 153,130.05 270.3,247.35 306,211.65 153,58.65 "
         />

src/icons/fire.tsx

@@ -14,7 +14,7 @@ export const IconFire = ({ style, onClick, size = 18 }: IconProps) => (
   >
     <path
       d="M14.6699 8.20023C14.44 7.90022 14.16 7.64022 13.9001 7.38021C13.2302 6.78019 12.4703 6.35018 11.8305 5.72016C10.3407 4.26012 10.0108 1.85005 10.9606 0C10.0108 0.230007 9.18094 0.750022 8.47107 1.32004C5.88155 3.4001 4.86173 7.0702 6.08151 10.2203C6.1215 10.3203 6.16149 10.4203 6.16149 10.5503C6.16149 10.7703 6.01152 10.9703 5.81156 11.0503C5.5816 11.1503 5.34165 11.0903 5.15168 10.9303C5.09169 10.8803 5.0517 10.8303 5.01171 10.7603C3.88191 9.33027 3.70194 7.28021 4.46181 5.64016C2.79211 7.0002 1.88228 9.30027 2.01225 11.4703C2.07224 11.9703 2.13223 12.4704 2.3022 12.9704C2.44218 13.5704 2.71213 14.1704 3.01207 14.7004C4.09187 16.4305 5.96153 17.6705 7.97116 17.9205C10.1108 18.1905 12.4004 17.8005 14.0401 16.3205C15.8697 14.6604 16.5096 12.0003 15.5698 9.72028L15.4398 9.46027C15.2298 9.00026 14.6699 8.20023 14.6699 8.20023ZM11.5105 14.5004C11.2306 14.7404 10.7707 15.0004 10.4107 15.1004C9.29092 15.5004 8.17113 14.9404 7.51125 14.2804C8.70103 14.0004 9.4109 13.1204 9.62086 12.2303C9.79083 11.4303 9.47089 10.7703 9.34091 10.0003C9.22093 9.26026 9.24093 8.63025 9.51088 7.94023C9.70085 8.32024 9.90081 8.70025 10.1408 9.00026C10.9106 10.0003 12.1204 10.4403 12.3804 11.8003C12.4203 11.9403 12.4403 12.0803 12.4403 12.2303C12.4703 13.0504 12.1104 13.9504 11.5105 14.5004Z"
-      fill="#58637F"
+      fill="currentColor"
     />
   </svg>
 );

src/icons/history.tsx

@@ -14,7 +14,7 @@ export const IconHistory = ({ style, onClick, size = 24 }: IconProps) => (
   >
     <path
       d="M13.2507 8.66667H12.0007V12.8333L15.5673 14.95L16.1673 13.9417L13.2507 12.2083V8.66667ZM12.834 4.5C10.8449 4.5 8.93721 5.29018 7.53068 6.6967C6.12416 8.10322 5.33398 10.0109 5.33398 12H2.83398L6.13398 15.3583L9.50065 12H7.00065C7.00065 10.4529 7.61523 8.96917 8.7092 7.87521C9.80316 6.78125 11.2869 6.16667 12.834 6.16667C14.3811 6.16667 15.8648 6.78125 16.9588 7.87521C18.0527 8.96917 18.6673 10.4529 18.6673 12C18.6673 13.5471 18.0527 15.0308 16.9588 16.1248C15.8648 17.2188 14.3811 17.8333 12.834 17.8333C11.2257 17.8333 9.76732 17.175 8.71732 16.1167L7.53398 17.3C8.89232 18.6667 10.7507 19.5 12.834 19.5C14.8231 19.5 16.7308 18.7098 18.1373 17.3033C19.5438 15.8968 20.334 13.9891 20.334 12C20.334 10.0109 19.5438 8.10322 18.1373 6.6967C16.7308 5.29018 14.8231 4.5 12.834 4.5Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );

src/icons/nexus.tsx

@@ -14,11 +14,11 @@ export const IconNexus = ({ style, onClick, size = 25 }: IconProps) => (
   >
     <path
       d="M20.1815 8.18819C18.9819 8.2004 17.9185 8.76778 17.231 9.64325C17.235 9.63805 17.238 9.63254 17.2421 9.62733C16.8867 9.9932 16.3912 10.2233 15.8415 10.2289C14.7491 10.24 13.8553 9.3634 13.8442 8.27189C13.8373 7.59364 14.1718 6.99337 14.6876 6.63062C14.6804 6.62749 14.6724 6.62282 14.666 6.61968C14.6573 6.62835 14.6483 6.63568 14.6394 6.64393C15.3574 5.94446 15.7998 4.96451 15.7888 3.88251C15.7674 1.78402 14.0491 0.100187 11.9499 0.121541C9.85151 0.142887 8.16696 1.86133 8.18831 3.95982C8.20037 5.146 8.75431 6.19912 9.61213 6.88741C9.99031 7.24417 10.2297 7.74734 10.2354 8.3087C10.2465 9.40021 9.3699 10.2949 8.27839 10.306C7.64965 10.3124 7.08654 10.0244 6.71967 9.57014C6.71804 9.57336 6.71734 9.57502 6.71653 9.57668C6.72687 9.58784 6.73578 9.59933 6.7453 9.6107C6.04085 8.8298 5.01817 8.34276 3.88398 8.35429C1.78559 8.37564 0.100209 10.094 0.121556 12.1925C0.142904 14.291 1.86301 15.9762 3.96129 15.9549C5.18281 15.9425 6.26338 15.3538 6.94956 14.4507C6.94396 14.4584 6.93907 14.4662 6.93316 14.474C7.28623 14.1193 7.77387 13.8973 8.31487 13.8918C9.40638 13.8807 10.301 14.7573 10.3121 15.8488C10.3187 16.4951 10.0134 17.0728 9.53755 17.4383C9.54327 17.4414 9.54961 17.4446 9.55594 17.4477C8.80695 18.1502 8.34285 19.1518 8.35411 20.2592C8.37546 22.3576 10.0947 24.0414 12.193 24.0201C14.2922 23.9987 15.9759 22.2803 15.9546 20.1819C15.9432 19.0635 15.4497 18.0626 14.6735 17.3748C14.6813 17.37 14.6892 17.3668 14.6963 17.3619C14.2299 17.0044 13.9273 16.4442 13.9209 15.8122C13.9098 14.7207 14.7856 13.8261 15.8779 13.8149C16.3941 13.8097 16.8653 14.0028 17.2204 14.3216C17.2177 14.318 17.2156 14.3144 17.2129 14.3108C17.9159 15.2203 19.0211 15.8018 20.2588 15.7892C22.3573 15.7679 24.0426 14.0478 24.0212 11.9495C23.9999 9.85108 22.2799 8.16685 20.1815 8.18819ZM3.94551 14.4131C2.69774 14.4258 1.67572 13.4244 1.66302 12.1765C1.65033 10.9286 2.65178 9.90815 3.89955 9.89545C5.1467 9.88277 6.1686 10.8826 6.18129 12.1305C6.19399 13.3785 5.19276 14.4004 3.94551 14.4131ZM11.9655 1.66311C13.2125 1.65043 14.2345 2.65176 14.2472 3.89819C14.2599 5.14595 13.2585 6.16798 12.0114 6.18066C10.7644 6.19335 9.74236 5.19191 9.72967 3.94414C9.71699 2.69772 10.7184 1.6758 11.9655 1.66311ZM12.1772 22.4782C10.9302 22.4909 9.90815 21.4895 9.89547 20.2431C9.88278 18.9953 10.8842 17.9732 12.1313 17.9606C13.3783 17.9479 14.4003 18.9493 14.413 20.1972C14.4257 21.4435 13.4243 22.4655 12.1772 22.4782ZM20.2432 14.2473C18.9961 14.26 17.9748 13.2586 17.9621 12.0107C17.9494 10.7628 18.9501 9.74235 20.1972 9.72966C21.4451 9.71697 22.4671 10.7168 22.4798 11.9647C22.4925 13.2127 21.491 14.2346 20.2432 14.2473Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M10.4509 3.9368C10.4423 3.08783 11.1238 2.39308 11.9728 2.38444C12.8226 2.3758 13.5173 3.05655 13.526 3.90552C13.5346 4.75593 12.8539 5.45078 12.0041 5.45942C11.1551 5.46796 10.4595 4.78721 10.4509 3.9368ZM3.90687 10.6168C3.05801 10.6254 2.3756 11.3202 2.38424 12.1691C2.39288 13.0181 3.08929 13.7005 3.93815 13.6919C4.78712 13.6832 5.46868 12.9868 5.46005 12.1379C5.45141 11.2889 4.75584 10.6081 3.90687 10.6168ZM12.1386 18.6819C11.2896 18.6905 10.6081 19.3869 10.6167 20.2359C10.6253 21.0849 11.3209 21.7656 12.1699 21.757C13.0197 21.7483 13.7004 21.0536 13.6918 20.2046C13.6831 19.3556 12.9884 18.6732 12.1386 18.6819ZM20.2045 10.451C19.3556 10.4596 18.674 11.1544 18.6826 12.0033C18.6912 12.8523 19.3868 13.5347 20.2358 13.5261C21.0848 13.5174 21.7672 12.821 21.7585 11.9721C21.7499 11.1231 21.0534 10.4424 20.2045 10.451Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );