icon: added sign in with google svg

Real-Dev-Squad · Nov 13, 2023 · d173554 · d173554
1 parent 8c0b232
commit d173554
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/__tests__/components/LoginModal.test.tsx b/__tests__/components/LoginModal.test.tsx
@@ -25,10 +25,10 @@ describe('LoginModal Component', () => {
                 }}
             />
         );
-        const title = screen.getByText('URL Shortener');
+        const title = screen.getByText('Please log in');
         expect(title).toBeInTheDocument();
 
-        const signInWithGoogleButton = screen.getByText('Sign in with Google');
+        const signInWithGoogleButton = screen.getByTestId('sign-in-with-google-button');
         expect(signInWithGoogleButton).toBeInTheDocument();
     });
 });
diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react';
 import { TINY_API_GOOGLE_LOGIN } from '@/constants/url';
 
 import Button from '../Button';
-import GoogleIcon from '../icons/google';
+import SignInWithGoogleIcon from '../icons/signWithGoogle';
 
 interface LoginModalProps {
     onClose: () => void;
@@ -32,7 +32,7 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, children }) => {
         <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-800 bg-opacity-50 z-50">
             <div
                 ref={modalRef}
-                className="bg-gray-800 p-8 rounded-md w-96 relative flex flex-col justify-center items-center border border-gray-500"
+                className="bg-gray-800 p-8 rounded-md w-[330px] relative flex flex-col justify-center items-center border border-gray-500"
             >
                 <Button className="absolute top-2 right-2 text-white" testId="close-login-modal" onClick={onClose}>
                     <svg
@@ -50,13 +50,14 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, children }) => {
                         ></path>
                     </svg>
                 </Button>
-                <h2 className="text-2xl font-bold mb-4 text-white">URL Shortener</h2>
+                <h2 className="text-2xl font-bold mb-4 text-white">Please log in</h2>
                 {children}
-                <Link href={TINY_API_GOOGLE_LOGIN}>
-                    <span className="bg-white text-black px-4 py-2 rounded flex items-center justify-center border border-gray-300 hover:bg-gray-300 cursor-pointer">
-                        <GoogleIcon />
-                        Sign in with Google
-                    </span>
+                <Link
+                    href={TINY_API_GOOGLE_LOGIN}
+                    data-testid="sign-in-with-google-button"
+                    className="flex items-center justify-center"
+                >
+                    <SignInWithGoogleIcon />
                 </Link>
             </div>
         </div>