feat(editor): Adjust Google sign-in button to adhere to the guidelines (#5248)

* feat(editor): Add Google auth button focus, active, disabled states

* Add reconnect label to google reconnect button slot

* Increase size of Google Auth button and fix centering of n8n-banner icon

* Increase size of Google Auth button to 46px

packages/editor-ui/src/components/CredentialEdit/OauthButton.vue

@@ -1,44 +1,26 @@
 <template>
-	<span>
-		<img
-			v-if="isGoogleOAuthType"
-			:src="basePath + 'google-signin-light.png'"
-			:class="$style.googleIcon"
-			:alt="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
-			@click.stop="$emit('click')"
-		/>
+	<div :class="$style.container">
+		<GoogleAuthButton v-if="isGoogleOAuthType" @click="$emit('click')" />
 		<n8n-button
 			v-else
 			:label="$locale.baseText('credentialEdit.oAuthButton.connectMyAccount')"
 			size="large"
 			@click.stop="$emit('click')"
 		/>
-	</span>
+	</div>
 </template>
 
-<script lang="ts">
-import { useRootStore } from '@/stores/n8nRootStore';
-import { mapStores } from 'pinia';
+<script lang="ts" setup>
+import GoogleAuthButton from './GoogleAuthButton.vue';
 import Vue from 'vue';
 
-export default Vue.extend({
-	props: {
-		isGoogleOAuthType: {
-			type: Boolean,
-		},
-	},
-	computed: {
-		...mapStores(useRootStore),
-		basePath(): string {
-			return this.rootStore.baseUrl;
-		},
-	},
-});
+defineProps<{
+	isGoogleOAuthType: boolean;
+}>();
 </script>
 
 <style module lang="scss">
-.googleIcon {
-	width: 191px;
-	cursor: pointer;
+.container {
+	display: inline-block;
 }
 </style>