Use react components for error & success icons

src/components/icons/check-circle-fill.tsx

@@ -1,13 +1,13 @@
 import { ComponentProps } from 'react';
 
-interface Props extends ComponentProps<'svg'> {
-  theme?: 'dark' | 'light';
-}
-
-export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
+export const CheckCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  // Need to have unique id if we are using it multiple times
+  // https://stackoverflow.com/questions/70985078/when-i-display-none-one-svg-another-independent-svg-gets-rendered-differen
+  const random = Math.random();
+  const maskId = `path-1-inside-1_${random}`;
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
-      <mask id="path-1-inside-1_10049_29682" fill="white">
+      <mask id={maskId} fill="white">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -18,12 +18,12 @@ export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.00033 17.3327C13.6027 17.3327 17.3337 13.6017 17.3337 8.99935C17.3337 4.39698 13.6027 0.666016 9.00033 0.666016C4.39795 0.666016 0.666992 4.39698 0.666992 8.99935C0.666992 13.6017 4.39795 17.3327 9.00033 17.3327ZM13.8415 6.82514C14.2077 6.45903 14.2077 5.86544 13.8415 5.49932C13.4754 5.1332 12.8818 5.1332 12.5157 5.49932L7.50675 10.5083L5.91303 8.91457C5.54692 8.54845 4.95333 8.54845 4.58721 8.91457C4.22109 9.28068 4.22109 9.87427 4.58721 10.2404L6.84384 12.497C7.20995 12.8631 7.80355 12.8631 8.16966 12.497L13.8415 6.82514Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        fill="currentColor"
       />
       <path
         d="M13.8415 6.82514L13.2523 6.23589L13.8415 6.82514ZM7.50675 10.5083L6.91749 11.0975L7.50675 11.6868L8.09601 11.0975L7.50675 10.5083ZM5.91303 8.91457L6.50229 8.32531L6.50229 8.32531L5.91303 8.91457ZM4.58721 8.91457L3.99795 8.32531L3.99795 8.32531L4.58721 8.91457ZM4.58721 10.2404L3.99795 10.8296L4.58721 10.2404ZM6.84384 12.497L7.43309 11.9078L6.84384 12.497ZM8.16966 12.497L8.75892 13.0863L8.16966 12.497ZM16.5003 8.99935C16.5003 13.1415 13.1425 16.4993 9.00033 16.4993V18.166C14.0629 18.166 18.167 14.062 18.167 8.99935H16.5003ZM9.00033 1.49935C13.1425 1.49935 16.5003 4.85721 16.5003 8.99935H18.167C18.167 3.93674 14.0629 -0.167318 9.00033 -0.167318V1.49935ZM1.50033 8.99935C1.50033 4.85721 4.85819 1.49935 9.00033 1.49935V-0.167318C3.93772 -0.167318 -0.166341 3.93674 -0.166341 8.99935H1.50033ZM9.00033 16.4993C4.85819 16.4993 1.50033 13.1415 1.50033 8.99935H-0.166341C-0.166341 14.062 3.93772 18.166 9.00033 18.166V16.4993ZM13.2523 6.08857C13.293 6.12925 13.293 6.19521 13.2523 6.23589L14.4308 7.4144C15.1223 6.72285 15.1223 5.60162 14.4308 4.91006L13.2523 6.08857ZM13.105 6.08857C13.1456 6.04789 13.2116 6.04789 13.2523 6.08857L14.4308 4.91006C13.7392 4.21851 12.618 4.21851 11.9265 4.91006L13.105 6.08857ZM8.09601 11.0975L13.105 6.08857L11.9265 4.91006L6.91749 9.91903L8.09601 11.0975ZM5.32378 9.50382L6.91749 11.0975L8.09601 9.91903L6.50229 8.32531L5.32378 9.50382ZM5.17646 9.50382C5.21714 9.46314 5.2831 9.46314 5.32378 9.50382L6.50229 8.32531C5.81074 7.63376 4.68951 7.63376 3.99795 8.32531L5.17646 9.50382ZM5.17647 9.65114C5.13579 9.61046 5.13579 9.5445 5.17647 9.50382L3.99795 8.32531C3.3064 9.01686 3.3064 10.1381 3.99795 10.8296L5.17647 9.65114ZM7.43309 11.9078L5.17647 9.65114L3.99795 10.8296L6.25458 13.0863L7.43309 11.9078ZM7.58041 11.9078C7.53973 11.9484 7.47377 11.9484 7.43309 11.9078L6.25458 13.0863C6.94614 13.7778 8.06737 13.7778 8.75892 13.0863L7.58041 11.9078ZM13.2523 6.23589L7.58041 11.9078L8.75892 13.0863L14.4308 7.4144L13.2523 6.23589Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
-        mask="url(#path-1-inside-1_10049_29682)"
+        fill="currentColor"
+        mask={`url(#${maskId})`}
       />
     </svg>
   );

src/components/icons/check-circle.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export const CheckCircleIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
+      <circle cx="6.99992" cy="7.00065" r="6.16667" stroke="currentColor" />
+      <path
+        d="M10.3428 4.73047L5.8053 9.26797L4 7.46267"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/components/icons/error-circle-fill.tsx

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+
+export const ErrorCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  // Need to have unique id if we are using it multiple times
+  // https://stackoverflow.com/questions/70985078/when-i-display-none-one-svg-another-independent-svg-gets-rendered-differen
+  const random = Math.random();
+  const maskId = `path-1-inside-1_${random}`;
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
+      <mask id={maskId} fill="white">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.00065 13.6654C10.6825 13.6654 13.6673 10.6806 13.6673 6.9987C13.6673 3.3168 10.6825 0.332031 7.00065 0.332031C3.31875 0.332031 0.333984 3.3168 0.333984 6.9987C0.333984 10.6806 3.31875 13.6654 7.00065 13.6654ZM5.15045 4.08881C4.85755 3.79592 4.38268 3.79592 4.08979 4.08881C3.79689 4.3817 3.79689 4.85658 4.08979 5.14947L5.93946 6.99914L4.08979 8.84881C3.79689 9.1417 3.79689 9.61658 4.08979 9.90947C4.38268 10.2024 4.85755 10.2024 5.15045 9.90947L7.00012 8.0598L8.84979 9.90947C9.14268 10.2024 9.61755 10.2024 9.91045 9.90947C10.2033 9.61658 10.2033 9.1417 9.91045 8.84881L8.06078 6.99914L9.91045 5.14947C10.2033 4.85658 10.2033 4.3817 9.91045 4.08881C9.61755 3.79592 9.14268 3.79592 8.84979 4.08881L7.00012 5.93848L5.15045 4.08881Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.00065 13.6654C10.6825 13.6654 13.6673 10.6806 13.6673 6.9987C13.6673 3.3168 10.6825 0.332031 7.00065 0.332031C3.31875 0.332031 0.333984 3.3168 0.333984 6.9987C0.333984 10.6806 3.31875 13.6654 7.00065 13.6654ZM5.15045 4.08881C4.85755 3.79592 4.38268 3.79592 4.08979 4.08881C3.79689 4.3817 3.79689 4.85658 4.08979 5.14947L5.93946 6.99914L4.08979 8.84881C3.79689 9.1417 3.79689 9.61658 4.08979 9.90947C4.38268 10.2024 4.85755 10.2024 5.15045 9.90947L7.00012 8.0598L8.84979 9.90947C9.14268 10.2024 9.61755 10.2024 9.91045 9.90947C10.2033 9.61658 10.2033 9.1417 9.91045 8.84881L8.06078 6.99914L9.91045 5.14947C10.2033 4.85658 10.2033 4.3817 9.91045 4.08881C9.61755 3.79592 9.14268 3.79592 8.84979 4.08881L7.00012 5.93848L5.15045 4.08881Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.08979 4.08881L3.61838 3.61741L3.61838 3.61741L4.08979 4.08881ZM5.15045 4.08881L5.62185 3.61741V3.61741L5.15045 4.08881ZM4.08979 5.14947L3.61838 5.62088H3.61838L4.08979 5.14947ZM5.93946 6.99914L6.41086 7.47055L6.88227 6.99914L6.41086 6.52774L5.93946 6.99914ZM4.08979 8.84881L3.61838 8.37741L3.61838 8.37741L4.08979 8.84881ZM4.08979 9.90947L3.61838 10.3809L3.61838 10.3809L4.08979 9.90947ZM5.15045 9.90947L5.62185 10.3809L5.62185 10.3809L5.15045 9.90947ZM7.00012 8.0598L7.47152 7.5884L7.00012 7.11699L6.52871 7.5884L7.00012 8.0598ZM8.84979 9.90947L8.37838 10.3809L8.37838 10.3809L8.84979 9.90947ZM9.91045 9.90947L10.3819 10.3809L10.3819 10.3809L9.91045 9.90947ZM9.91045 8.84881L10.3819 8.37741L10.3819 8.37741L9.91045 8.84881ZM8.06078 6.99914L7.58937 6.52774L7.11797 6.99914L7.58937 7.47055L8.06078 6.99914ZM9.91045 4.08881L10.3819 3.61741V3.61741L9.91045 4.08881ZM8.84979 4.08881L8.37838 3.61741L8.37838 3.61741L8.84979 4.08881ZM7.00012 5.93848L6.52871 6.40988L7.00012 6.88129L7.47152 6.40988L7.00012 5.93848ZM13.0007 6.9987C13.0007 10.3124 10.3144 12.9987 7.00065 12.9987V14.332C11.0507 14.332 14.334 11.0488 14.334 6.9987H13.0007ZM7.00065 0.998698C10.3144 0.998698 13.0007 3.68499 13.0007 6.9987H14.334C14.334 2.94861 11.0507 -0.334635 7.00065 -0.334635V0.998698ZM1.00065 6.9987C1.00065 3.68499 3.68694 0.998698 7.00065 0.998698V-0.334635C2.95056 -0.334635 -0.332682 2.94861 -0.332682 6.9987H1.00065ZM7.00065 12.9987C3.68694 12.9987 1.00065 10.3124 1.00065 6.9987H-0.332682C-0.332682 11.0488 2.95056 14.332 7.00065 14.332V12.9987ZM4.56119 4.56021C4.59374 4.52767 4.6465 4.52767 4.67904 4.56021L5.62185 3.61741C5.06861 3.06416 4.17163 3.06416 3.61838 3.61741L4.56119 4.56021ZM4.56119 4.67807C4.52865 4.64552 4.52865 4.59276 4.56119 4.56021L3.61838 3.61741C3.06514 4.17065 3.06514 5.06763 3.61838 5.62088L4.56119 4.67807ZM6.41086 6.52774L4.56119 4.67807L3.61838 5.62088L5.46805 7.47055L6.41086 6.52774ZM4.56119 9.32022L6.41086 7.47055L5.46805 6.52774L3.61838 8.37741L4.56119 9.32022ZM4.56119 9.43807C4.52865 9.40552 4.52865 9.35276 4.56119 9.32021L3.61838 8.37741C3.06514 8.93065 3.06514 9.82763 3.61838 10.3809L4.56119 9.43807ZM4.67904 9.43807C4.6465 9.47061 4.59373 9.47061 4.56119 9.43807L3.61838 10.3809C4.17163 10.9341 5.06861 10.9341 5.62185 10.3809L4.67904 9.43807ZM6.52871 7.5884L4.67904 9.43807L5.62185 10.3809L7.47152 8.53121L6.52871 7.5884ZM9.32119 9.43807L7.47152 7.5884L6.52871 8.53121L8.37838 10.3809L9.32119 9.43807ZM9.43904 9.43807C9.4065 9.47061 9.35373 9.47061 9.32119 9.43807L8.37838 10.3809C8.93163 10.9341 9.82861 10.9341 10.3819 10.3809L9.43904 9.43807ZM9.43904 9.32021C9.47159 9.35276 9.47159 9.40552 9.43904 9.43807L10.3819 10.3809C10.9351 9.82763 10.9351 8.93065 10.3819 8.37741L9.43904 9.32021ZM7.58937 7.47055L9.43904 9.32022L10.3819 8.37741L8.53218 6.52774L7.58937 7.47055ZM9.43904 4.67807L7.58937 6.52774L8.53218 7.47055L10.3819 5.62088L9.43904 4.67807ZM9.43904 4.56021C9.47159 4.59276 9.47159 4.64552 9.43904 4.67807L10.3819 5.62088C10.9351 5.06763 10.9351 4.17065 10.3819 3.61741L9.43904 4.56021ZM9.32119 4.56021C9.35373 4.52767 9.4065 4.52767 9.43904 4.56021L10.3819 3.61741C9.82861 3.06416 8.93163 3.06416 8.37838 3.61741L9.32119 4.56021ZM7.47152 6.40988L9.32119 4.56021L8.37838 3.61741L6.52871 5.46708L7.47152 6.40988ZM4.67904 4.56021L6.52871 6.40988L7.47152 5.46708L5.62185 3.61741L4.67904 4.56021Z"
+        fill="currentColor"
+        mask={`url(#${maskId})`}
+      />
+    </svg>
+  );
+};

src/components/icons/error-circle.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export const ErrorCircleIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
+      <circle cx="6.99992" cy="7.00065" r="6.16667" stroke="#99A0E4" />
+      <path
+        d="M5 5.00098L9 9.00098M9 5.00098L5 9.00098"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};