fix issue

src/components/Modal/Auth/ValidateOTP.tsx

@@ -61,25 +61,6 @@ export const ValidateOTPModal: React.FC = () => {
             />
           </div>
         </form>
-        {/* <div className="flex flex-col gap-4 w-full">
-          <Button
-            text="Continue with Google"
-            icon={<FaGoogle fill="grey" />}
-            height="h-12"
-            bg_color="bg-white-100"
-            border="border"
-            text_color="text-black-100"
-            className="inline-flex items-center justify-center"
-          />
-          <Button
-            text="Continue with Twitter"
-            icon={<FaTwitter />}
-            height="h-12"
-            bg_color="bg-blue-100"
-            text_color="text-white-100"
-            className="inline-flex items-center justify-center"
-          />
-        </div> */}
       </div>
     </div>
   );

src/components/Pools/index.tsx

@@ -4,8 +4,8 @@ import { SortButton } from "../UI/Table/TableSearchMode/SortButton";
 import { Pagination } from "../UI/Table/TableSearchMode/Pagination";
 import { useAppState } from "~/providers/StateProvider/StateProvider";
 import { Image } from "../UI";
-import Bullet from "~/assets/icons/3.svg"
 import Clock from '~/assets/img/time.png'
+import { Bullet, Blitz, Rapid, Standard } from '../UI/SVG_ICONS';
 type Category = 'Bullet' | 'Blitz' | 'Rapid';
 
 interface Pool {
@@ -50,7 +50,7 @@ const Pools: React.FC = () => {
 
   return (
     <div className="my-auto mx-12 grid grid-cols-12">
-      <div className="flex flex-col justify-center border-[1px] py-6 col-span-8 border-[#B4C7D8] shadow-3xl rounded-xl">
+      <div className="flex flex-col justify-center border-[1px] py-6 h-fit col-span-8 border-[#B4C7D8] shadow-3xl rounded-xl">
         <div className="flex justify-between mx-6 mb-6">
           <div className="space-x-2">
             <span className="text-lg font-medium">Active Pools</span>
@@ -74,23 +74,34 @@ const Pools: React.FC = () => {
       </div>
       <div className="col-span-1"></div>
       <div className="col-span-2 flex flex-col justify-center items-center border-[1px] rounded-lg h-fit px-2 py-6 gap-2 w-[380px]">
-        <Image source={Bullet}/>
-        <p className="text-[#0151FF]">Bullet</p>
+        {
+          state.rowData?.category === 'bullet'?
+          <div className="rounded-full bg-[#0151FF] w-[40px] h-[40px] flex items-center justify-center"><Bullet fill='#FFFFFF'/></div>
+          :
+          state.rowData?.category === 'blitz'?
+          <div><Blitz fill='#FFFFFF'/></div>
+          :
+          state.rowData?.category === 'rapid'?
+          <div><Rapid fill='#FFFFFF'/></div>
+          :
+          state.rowData?.category === 'standard'?
+          <div><Standard fill='#FFFFFF'/></div>
+          :''
+        }
+        <p className="text-[#0151FF]">{state.rowData?.category.charAt(0).toUpperCase() + state.rowData.category.substring(1)}</p>
         <div className="flex items-center gap-2">
           <Image source={Clock}/>
-          <p className="font-bold">10 MIN</p>
+          <p className="text-base">{state.rowData.time}</p>
         </div>
-        <div className="border-[0.41844px] shadow-4xl rounded-3xl px-2 border-[#b4c7d880]">
-          <p className="text-[64px] font-bold text-[#0151FF]">${state.betAmount}</p>
-        </div>
-        <div className="flex justify-between items-center w-full px-1">
+        <p className="text-[64px] font-bold text-[#0151FF]">${state.rowData.betAmount}</p>
+        <div className="flex justify-between items-center w-full px-1 text-[#667085]">
           <div>
             <span className="text-xs">Player queue:</span> 
-            <span className="font-bold text-gray-300"> 100</span>
+            <span className="font-bold"> 100</span>
           </div>
           <div >
           <span className="text-xs">Participants in pool:</span> 
-          <span className="font-bold text-gray-300"> 2049</span>
+          <span className="font-bold"> 2049</span>
           </div>
         </div>
         <Button 

src/components/UI/SVG_ICONS/Blitz.svg.ui.tsx

@@ -0,0 +1,16 @@
+import { ModeItem } from "~/interfaces";
+export const Blitz: React.FC<ModeItem> = ({
+  fill = "#000000",
+}: ModeItem) => {
+  return (
+    <svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.14691 14.153H0L13.0657 0L9.54874 9.7978H16.6957L3.62902 23.9508L7.146 14.153H7.14691Z" fill={fill}/>
+      <defs>
+        <linearGradient id="paint0_linear_452_26703" x1="-0.15276" y1="-15.1189" x2="15.0437" y2="21.2762" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#019AFF" stop-opacity="0.65"/>
+          <stop offset="1" stop-color="#0151FF"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

src/components/UI/SVG_ICONS/Bullet.svg.ui.tsx

@@ -0,0 +1,14 @@
+import { ModeItem } from '~/interfaces'
+export const Bullet: React.FC<ModeItem> = ({fill='#000000'}: ModeItem) => {
+    return(
+        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.4595 0.846191C11.2392 2.65369 11.2392 2.65369 9.65949 3.56119C11.4689 3.78291 11.4689 3.78291 12.3782 5.3626C12.5986 3.55416 12.5986 3.55416 14.1782 2.64619C12.3689 2.42447 12.3689 2.42447 11.4595 0.846191ZM21.1298 1.81135C20.9517 1.86479 20.7079 1.9576 20.4173 2.09447C19.7564 2.40244 18.8892 2.89369 17.9845 3.45385C16.1798 4.57229 14.2111 6.0001 13.4798 6.75479L13.4423 6.79228L11.4736 7.93604C11.6423 8.03916 11.8017 8.15166 11.9657 8.27822C12.5657 8.74229 13.1517 9.3376 13.4657 9.63291L12.8939 10.2517C12.5423 9.92353 11.9845 9.35635 11.4501 8.94385C11.1876 8.74229 10.9251 8.57822 10.747 8.50791C10.6439 8.47041 10.5923 8.46103 10.5689 8.46103L10.5314 8.48447L1.83934 17.1657C1.99637 17.1892 2.1548 17.2313 2.3123 17.2829C3.0084 17.5126 3.74387 17.9813 4.41418 18.6517C5.0798 19.3173 5.54855 20.0532 5.78293 20.747C5.81105 20.836 5.83918 20.9251 5.85793 21.0188L14.4501 12.4267L16.1376 9.67978L16.1704 9.64228C17.0048 8.8126 18.4251 6.81104 19.5267 4.9876C20.0798 4.07775 20.5579 3.20354 20.8532 2.54166C20.9892 2.24166 21.0782 1.99275 21.1298 1.81135ZM19.5314 7.18135C19.7236 8.64853 19.7236 8.64853 18.6689 9.68916C20.1407 9.49228 20.1407 9.49228 21.1767 10.5423C20.9798 9.07978 20.9798 9.07979 22.0251 8.03916C20.5673 8.23135 20.5673 8.23135 19.5314 7.18135ZM3.00652 8.69072C2.23637 10.1063 2.23637 10.1063 0.643555 10.3454C2.05824 11.1188 2.05824 11.1188 2.29824 12.7079C3.0684 11.297 3.0684 11.297 4.65793 11.0532C3.24512 10.2798 3.24512 10.2798 3.00652 8.69072ZM18.6173 11.2782C17.4407 13.7157 17.4407 13.7157 14.7782 14.236C17.2204 15.4126 17.2204 15.4126 17.7407 18.0751C18.9173 15.6329 18.9173 15.6329 21.5751 15.1173C19.1376 13.936 19.1376 13.936 18.6173 11.2782ZM1.45543 17.9767C1.24871 17.9767 1.10199 18.0329 1.01621 18.1173C0.863867 18.272 0.804336 18.6142 0.979648 19.1485C1.15871 19.6782 1.56324 20.3298 2.14637 20.9157C2.72996 21.497 3.37965 21.9001 3.91262 22.0782C4.44699 22.2563 4.78918 22.1954 4.94387 22.0454C5.09387 21.8907 5.1548 21.5485 4.98137 21.0142C4.79855 20.4845 4.39543 19.8329 3.80949 19.2517C3.2273 18.6657 2.57762 18.2626 2.04699 18.0845C1.81355 18.0048 1.61621 17.9767 1.45543 17.9767ZM9.2423 19.3079C9.38293 20.4892 9.38293 20.4892 8.52043 21.3188C9.70637 21.1735 9.70637 21.1735 10.5361 22.036C10.3954 20.8501 10.3954 20.8501 11.2486 20.0251C10.0673 20.1657 10.0673 20.1657 9.2423 19.3079ZM2.24949 19.7345C2.34883 19.7402 2.47664 19.7881 2.61695 19.8723C2.75726 19.9565 2.90385 20.0733 3.0384 20.2079C3.21955 20.3892 3.36612 20.5902 3.44599 20.7668C3.52586 20.9434 3.53251 21.0812 3.46449 21.1501C3.39579 21.2186 3.25778 21.2121 3.08083 21.1321C2.90388 21.0521 2.70247 20.9052 2.5209 20.7235C2.33974 20.5423 2.19317 20.3413 2.11331 20.1647C2.03344 19.9881 2.02679 19.8502 2.0948 19.7813C2.12936 19.7467 2.18196 19.7307 2.24949 19.7345Z" fill={fill}/>
+            <defs>
+                <linearGradient id="paint0_linear_452_26676" x1="0.44792" y1="-12.6254" x2="10.6504" y2="22.494" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#019AFF" stop-opacity="0.65"/>
+                    <stop offset="1" stop-color="#0151FF"/>
+                </linearGradient>
+            </defs>
+        </svg>
+    )
+}

src/components/UI/SVG_ICONS/Rapid.svg.ui.tsx

@@ -0,0 +1,17 @@
+import { ModeItem } from "~/interfaces";
+export const Rapid: React.FC<ModeItem> = ({
+  fill = "#000000",
+}: ModeItem) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.464 1.464C0 2.93 0 5.286 0 10C0 14.714 0 17.071 1.464 18.535C2.93 20 5.286 20 10 20C14.714 20 17.071 20 18.535 18.535C20 17.072 20 14.714 20 10C20 5.286 20 2.929 18.535 1.464C17.072 0 14.714 0 10 0C5.286 0 2.929 0 1.464 1.464ZM10.75 6C10.75 5.80109 10.671 5.61032 10.5303 5.46967C10.3897 5.32902 10.1989 5.25 10 5.25C9.80109 5.25 9.61032 5.32902 9.46967 5.46967C9.32902 5.61032 9.25 5.80109 9.25 6V10C9.25 10.199 9.329 10.39 9.47 10.53L11.97 13.03C12.0387 13.1037 12.1215 13.1628 12.2135 13.2038C12.3055 13.2448 12.4048 13.2668 12.5055 13.2686C12.6062 13.2704 12.7062 13.2518 12.7996 13.2141C12.893 13.1764 12.9778 13.1203 13.049 13.049C13.1203 12.9778 13.1764 12.893 13.2141 12.7996C13.2518 12.7062 13.2704 12.6062 13.2686 12.5055C13.2668 12.4048 13.2448 12.3055 13.2038 12.2135C13.1628 12.1215 13.1037 12.0387 13.03 11.97L10.75 9.69V6Z" fill={fill}/>
+      <defs>
+        <linearGradient id="paint0_linear_452_26714" x1="-0.182994" y1="-12.625" x2="9.39364" y2="20.2777" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#019AFF" stop-opacity="0.65"/>
+          <stop offset="1" stop-color="#0151FF"/>
+        </linearGradient>
+      </defs>
+    </svg>
+
+  );
+};

src/components/UI/SVG_ICONS/Standard.svg.ui.tsx

@@ -0,0 +1,14 @@
+import { ModeItem } from '~/interfaces'
+export const Standard: React.FC<ModeItem> = ({fill='#000000'}: ModeItem) => {
+    return(
+        <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.912656 0.83252V2.24318H11.0508V0.83252H0.912656ZM1.11769 3.11908V12.9659H1.99364V3.11913H1.11773L1.11769 3.11908ZM2.95167 3.11908C2.98439 6.01652 4.13878 7.63947 5.42714 7.98536C4.12181 8.33575 2.95327 9.9963 2.95013 12.9658H8.95894C8.95584 9.99616 7.78931 8.33618 6.48487 7.98536C7.77244 7.63914 8.92472 6.01671 8.95753 3.11913H2.95162L2.95167 3.11908ZM9.88617 3.11908V12.9659H10.7622V3.11913H9.88617V3.11908ZM0.912656 13.8418V15.251H11.0508V13.8418H0.912656Z" fill={fill}/>
+            <defs>
+                <linearGradient id="paint0_linear_687_13610" x1="-1.40197" y1="-8.26913" x2="6.44127" y2="14.7933" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#019AFF" stop-opacity="0.65"/>
+                    <stop offset="1" stop-color="#0151FF"/>
+                </linearGradient>
+            </defs>
+        </svg>
+    )
+}

src/components/UI/SVG_ICONS/index.ts

@@ -1,4 +1,4 @@
-export * from './ModeItem_1.svg.ui'
-export * from './ModeItem_2.svg.ui'
-export * from './ModeItem_3.svg.ui'
-export * from './ModeItem_4.svg.ui'
+export * from './Blitz.svg.ui'
+export * from './Rapid.svg.ui'
+export * from './Bullet.svg.ui'
+export * from './Standard.svg.ui'