Add GmailIcon component and update GmailConnectionIndicator

- Introduced a new GmailIcon component for better visual representation of Gmail connectivity.
- Replaced inline SVG in GmailConnectionIndicator with the new GmailIcon component, improving code maintainability and readability.
- Updated import paths for GoogleIcon in ConnectStep to reflect the new asset structure.

These changes enhance the user interface by providing a dedicated icon for Gmail and streamline the codebase for easier future updates.

src/assets/icons/GmailIcon.tsx

@@ -0,0 +1,10 @@
+const GmailIcon = ({ className = "w-4 h-4" }: { className?: string }) => {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M24 5.5v13.05c0 .85-.73 1.59-1.59 1.59H1.59C.73 21.14 0 20.4 0 19.55V5.5L12 13.25 24 5.5zM24 4.5c0-.42-.2-.83-.53-1.09L12 11.25.53 3.41C.2 3.67 0 4.08 0 4.5v.75L12 13 24 5.25V4.5z"/>
+      <path d="M5.5 4.5L12 9.75 18.5 4.5H5.5z" opacity="0.3"/>
+    </svg>
+  );
+};
+
+export default GmailIcon;

src/components/GmailConnectionIndicator.tsx

@@ -1,3 +1,5 @@
+import GmailIcon from '../assets/icons/GmailIcon';
+
 interface GmailConnectionIndicatorProps {
   description?: string;
   className?: string;
@@ -15,11 +17,7 @@ const GmailConnectionIndicator = ({
       <div className="flex items-center justify-center space-x-2 mb-3">
         <div className={`w-2 h-2 ${gmailIsOnline ? 'bg-red-500' : 'bg-gray-500'} rounded-full ${gmailIsOnline ? 'animate-pulse' : ''}`}></div>
         <div className="flex items-center space-x-1.5">
-          {/* Gmail icon */}
-          <svg className="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M24 5.5v13.05c0 .85-.73 1.59-1.59 1.59H1.59C.73 21.14 0 20.4 0 19.55V5.5L12 13.25 24 5.5zM24 4.5c0-.42-.2-.83-.53-1.09L12 11.25.53 3.41C.2 3.67 0 4.08 0 4.5v.75L12 13 24 5.25V4.5z"/>
-            <path d="M5.5 4.5L12 9.75 18.5 4.5H5.5z" opacity="0.3"/>
-          </svg>
+          <GmailIcon className={`w-4 h-4 ${gmailIsOnline ? 'text-red-500' : 'text-gray-500'}`} />
           <span className={`text-sm ${gmailIsOnline ? 'text-red-500' : 'text-gray-500'}`}>
             {gmailIsOnline ? 'Connected to Gmail' : 'Gmail is Offline'}
           </span>

src/components/TelegramConnectionIndicator.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTelegram } from '../providers/TelegramProvider';
+import TelegramIcon from '../assets/icons/telegram.svg';
 
 interface TelegramConnectionIndicatorProps {
   description?: string;
@@ -53,9 +54,7 @@ const TelegramConnectionIndicator = ({
       <div className="flex items-center justify-center space-x-2 mb-3">
         <div className={`w-2 h-2 ${telegramIsOnline ? 'bg-blue-500' : 'bg-gray-500'} rounded-full ${telegramIsOnline ? 'animate-pulse' : ''}`}></div>
         <div className="flex items-center space-x-1.5">
-          <svg className="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16l-1.608 7.56c-.12.54-.432.672-.876.42l-2.424-1.788-1.17.732c-.132.084-.24.156-.492.156l.18-2.544 4.488-4.056c.192-.168-.042-.264-.3-.096l-5.544 3.492-2.388-.744c-.516-.162-.528-.516.108-.78l9.36-3.612c.432-.168.828.108.684.636z" />
-          </svg>
+          <img src={TelegramIcon} alt="Telegram" className={`w-4 h-4 ${telegramIsOnline ? 'opacity-100' : 'opacity-50'}`} />
           <span className={`text-sm ${telegramIsOnline ? 'text-blue-500' : 'text-gray-500'}`}>
             {telegramIsOnline ? 'Connected to Telegram' : 'Telegram is Offline'}
           </span>

src/pages/onboarding/steps/ConnectStep.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import GoogleIcon from './icons/GoogleIcon';
+import GoogleIcon from '../../../assets/icons/GoogleIcon';
 import TelegramConnectionModal from '../../../components/TelegramConnectionModal';
 
 import BinanceIcon from './icons/binance.svg';