fix: replace google button with custom mui button

src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx

@@ -10,9 +10,10 @@ import {
 } from '../../api/identityAPI';
 import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import { useApi } from '@/hooks/useApi';
-import { useToast } from '@rkheftan/harmony-ui';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useTranslation } from 'react-i18next';
 import { Box, Button } from '@mui/material';
+import { Google } from 'iconsax-react';
 
 interface GoogleAuthenticationV2Props {
   authFactory: AuthFactory;
@@ -28,7 +29,9 @@ export const GoogleAuthenticationV2 = ({
 }: GoogleAuthenticationV2Props) => {
   const toast = useToast();
   const { t } = useTranslation('authentication');
-  const { execute: loginWithGoogleCall } = useApi(loginOrSignUpWithGoogle);
+  const { execute: loginWithGoogleCall, loading } = useApi(
+    loginOrSignUpWithGoogle,
+  );
   const [isGoogleLoaded, setIsGoogleLoaded] = useState(false);
 
   const googleBtnRef = useRef<HTMLDivElement>(null);
@@ -110,6 +113,15 @@ export const GoogleAuthenticationV2 = ({
     }
   }, []);
 
+  const handleGoogleLogin = () => {
+    if (googleBtnRef.current) {
+      const googleCustomRenderedDivs =
+        googleBtnRef.current.querySelectorAll('div');
+
+      googleCustomRenderedDivs.forEach((b) => b.click());
+    }
+  };
+
   return (
     <>
       <Box
@@ -120,8 +132,20 @@ export const GoogleAuthenticationV2 = ({
           minHeight: 44,
         }}
       >
-        {!isGoogleLoaded && <Button variant="outlined" loading />}
-        <div ref={googleBtnRef} id="google-signin-button"></div>
+        <Button
+          type="button"
+          onClick={handleGoogleLogin}
+          loading={!isGoogleLoaded || loading}
+          variant="outlined"
+          startIcon={<Icon Component={Google} variant="Bold" />}
+        >
+          {t('loginForm.loginWithGoogle')}
+        </Button>
+        <div
+          ref={googleBtnRef}
+          style={{ display: 'none' }}
+          id="google-signin-button"
+        ></div>
       </Box>
     </>
   );