Merge pull request Roshansuthar1105#203 from SaiSruthisri/button

Added improved Google Oauth buttons

Author: Roshansuthar1105

client/src/pages/Login.jsx

@@ -309,19 +309,21 @@ function Login() {
                   </motion.button>
 
                   {/* Google Oauth  */}
-                  <div className="mt-4 flex flex-col items-center gap-3">
+                  <div className="mt-3 flex flex-col items-center gap-3">
                     <span className={`text-sm ${isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'}`}>
                       Or continue with
                     </span>
                     <a
-                      href={`${API}/api/v1/auth/google/login`} // API pointing to your backend auth route
-                      className="w-full py-3 px-4 flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white rounded-lg font-medium transition-all duration-300"
+                      href={`${API}/api/v1/auth/google/login`} // Your backend Google Login endpoint
+                      className="w-full py-3 px-4 flex items-center justify-center gap-3 border border-gray-300 rounded-lg bg-white hover:bg-gray-100 text-gray-700 font-medium transition-all duration-300 transform hover:scale-[1.02]"
                     >
-                      <svg className="w-5 h-5" viewBox="0 0 488 512" fill="currentColor">
-                        {/* Google icon path */}
-                        <path d="M488 261.8c0-17.8-1.6-35-4.8-51.7H249v97.9h134.3c-5.8 31.4-23.5 58-50 75.8l80.8 62.8c47-43.5 74-107.2 74-184.8zM249 492c67 0 123.3-22.1 164.3-60l-80.8-62.8c-22.6 15-51.6 23.8-83.5 23.8-64 0-118.1-43.3-137.3-101.4l-82 63.4C57.6 423.8 146.3 492 249 492zM111.2 295.6c-4.9-14.8-7.7-30.6-7.7-46.6 0-16 2.8-31.8 7.7-46.6l-82-63.4C9.5 180 0 214.8 0 249.4c0 34.6 9.5 69.4 29.2 99.4l82-63.2zM249 97.2c35.6 0 67.7 12.3 92.9 36.5l69.7-69.7C372.3 28 316 0 249 0 146.3 0 57.6 68.2 29.2 164.6l82 63.4C130.9 140.5 185 97.2 249 97.2z" />
-                      </svg>
-                      Continue with Google
+                      {/* Google Icon */}
+                      <img
+                        src="https://www.svgrepo.com/show/355037/google.svg"
+                        alt="Google"
+                        className="w-6 h-6"
+                      />
+                      <span>Google</span>
                     </a>
                   </div>
 

client/src/pages/Signup.jsx

@@ -489,6 +489,26 @@ function Signup() {
                     Create Account
                   </button>
 
+                  {/* Google OAuth */}
+                  <div className="mt-3 flex flex-col items-center gap-3">
+                    <span className={`text-sm ${isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'}`}>
+                      Or continue with
+
+                    </span>
+                    <a
+                      href={`${API}/api/v1/auth/google/signup`} // Your backend Google Signup endpoint
+                      className="w-full py-3 px-4 flex items-center justify-center gap-3 border border-gray-300 rounded-lg bg-white hover:bg-gray-100 text-gray-700 font-medium transition-all duration-300 transform hover:scale-[1.02]"
+                    >
+                      {/* Google Icon */}
+                      <img
+                        src="https://www.svgrepo.com/show/355037/google.svg"
+                        alt="Google"
+                        className="w-6 h-6"
+                      />
+                      <span>Google</span>
+                    </a>
+                  </div>
+
                   <div className="mt-6 text-center">
                     <p className={isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'}>
                       Already have an account?{' '}