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
This commit is contained in:
OlegIvaniv
2023-01-25 15:25:11 +01:00
committed by GitHub
parent 6d36782463
commit 73cbddcb2d
8 changed files with 78 additions and 31 deletions

View File

@@ -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>