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/Banner.vue

@@ -16,8 +16,9 @@
 				</div>
 			</div>
 
+			<slot name="button" v-if="$slots.button" />
 			<n8n-button
-				v-if="buttonLabel"
+				v-else-if="buttonLabel"
 				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
 				:title="buttonTitle"
 				:type="theme"
@@ -85,7 +86,9 @@ export default Vue.extend({
 .icon {
 	position: absolute;
 	left: 14px;
-	top: 18px;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
 }
 
 .dangerIcon {

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

@@ -39,7 +39,15 @@
 			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
 			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
 			@click="$emit('oauth')"
-		/>
+		>
+			<template #button>
+				<p
+					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
+					:class="$style.googleReconnectLabel"
+				/>
+				<GoogleAuthButton v-if="isGoogleOAuthType" @click="$emit('oauth')" />
+			</template>
+		</banner>
 
 		<banner
 			v-show="testedSuccessfully && !showValidationWarning"
@@ -132,6 +140,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
+import GoogleAuthButton from './GoogleAuthButton.vue';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
@@ -140,6 +149,7 @@ export default mixins(restApi).extend({
 		CopyInput,
 		CredentialInputs,
 		OauthButton,
+		GoogleAuthButton,
 	},
 	props: {
 		credentialType: {
@@ -305,4 +315,7 @@ export default mixins(restApi).extend({
 		margin-bottom: var(--spacing-l);
 	}
 }
+.googleReconnectLabel {
+	margin-right: var(--spacing-3xs);
+}
 </style>

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

@@ -0,0 +1,49 @@
+<template>
+	<button
+		:class="$style.googleAuthBtn"
+		:title="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
+		@click.stop.prevent="$emit('click')"
+		:style="googleAuthButtons"
+	/>
+</template>
+
+<script lang="ts" setup>
+import { useRootStore } from '@/stores/n8nRootStore';
+
+const { baseUrl } = useRootStore();
+const googleAuthButtons = {
+	'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal.png`,
+	'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus.png`,
+	'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed.png`,
+	'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled.png`,
+};
+</script>
+
+<style module lang="scss">
+.googleAuthBtn {
+	--google-auth-btn-height: 46px;
+	cursor: pointer;
+	border: none;
+	padding: 0;
+	background-image: var(--google-auth-btn-normal);
+	background-repeat: no-repeat;
+	background-color: transparent;
+	background-size: 100% 100%;
+	border-radius: 4px;
+	height: var(--google-auth-btn-height);
+	// We have to preserve exact google button ratio
+	width: calc(var(--google-auth-btn-height) * 4.15217391);
+
+	&:focus,
+	&:hover {
+		outline: none;
+		background-image: var(--google-auth-btn-focus);
+	}
+	&:active {
+		background-image: var(--google-auth-btn-pressed);
+	}
+	&:disabled {
+		background-image: var(--google-auth-btn-disabled);
+	}
+}
+</style>

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>