Refine UI for TestItem and TestsList components in WorkflowEvaluation

• Adjust padding and cursor for TestItem
• Update button sizes and spacing
• Modify TestItem title styling
• Remove size and type from TestsList button
This commit is contained in:
Oleg Ivaniv 2024-11-12 16:42:54 +01:00
parent 44b8fab493
commit 4155ae8d5a
No known key found for this signature in database
2 changed files with 6 additions and 9 deletions

View file

@ -71,7 +71,7 @@ const actions = [
:is="n8nIconButton"
:icon="action.icon"
type="tertiary"
size="small"
size="mini"
@click.stop="action.event"
/>
</n8n-tooltip>
@ -83,10 +83,11 @@ const actions = [
.testItem {
display: flex;
align-items: center;
padding: var(--spacing-s) var(--spacing-m);
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-xl);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
background-color: var(--color-background-light);
cursor: pointer;
&:hover {
background-color: var(--color-background-base);
@ -105,6 +106,7 @@ const actions = [
gap: var(--spacing-2xs);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-4xs);
font-size: var(--font-size-s);
}
.testCases {
@ -129,7 +131,7 @@ const actions = [
.actions {
display: flex;
gap: var(--spacing-s);
gap: var(--spacing-xs);
--color-button-secondary-font: var(--color-callout-info-icon);
}
</style>

View file

@ -11,12 +11,7 @@ defineProps<TestListProps>();
<template>
<div :class="$style.testsList">
<div :class="$style.testsHeader">
<n8n-button
size="small"
type="tertiary"
label="Create new test"
@click="$emit('create-test')"
/>
<n8n-button label="Create new test" @click="$emit('create-test')" />
</div>
<TestItem v-for="test in tests" :key="test.id" :test="test" v-bind="$attrs" />
</div>