match figma closely

This commit is contained in:
Mutasem 2022-05-02 14:22:57 +02:00
parent 43a13485b1
commit 3485759ec1
2 changed files with 12 additions and 5 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="[$style[theme], $style[type]]"> <div :class="{[$style[theme]]: true, [$style[type]]: true, [$style.bold]: bold}">
<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'"> <n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
<span> <span>
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" /> <n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" />
@ -33,6 +33,10 @@ export default {
validator: (value: string): boolean => validator: (value: string): boolean =>
['note', 'tooltip'].includes(value), ['note', 'tooltip'].includes(value),
}, },
bold: {
type: Boolean,
default: true,
},
tooltipPlacement: { tooltipPlacement: {
type: String, type: String,
default: 'top', default: 'top',
@ -44,7 +48,6 @@ export default {
<style lang="scss" module> <style lang="scss" module>
.base { .base {
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-s); line-height: var(--font-size-s);
word-break: normal; word-break: normal;
display: flex; display: flex;
@ -55,6 +58,10 @@ export default {
} }
} }
.bold {
font-weight: var(--font-weight-bold);
}
.note { .note {
composes: base; composes: base;

View file

@ -9,16 +9,16 @@
<div v-if="apiKey"> <div v-if="apiKey">
<p class="mb-s"> <p class="mb-s">
<n8n-info-tip> <n8n-info-tip :bold="false">
{{ $locale.baseText('settings.api.view.info') }} {{ $locale.baseText('settings.api.view.info') }}
<n8n-link to="https://docs.n8n.io/api/" size="small" :bold="true"> <n8n-link to="https://docs.n8n.io/api/" size="small">
{{ $locale.baseText('generic.learnMore') }} {{ $locale.baseText('generic.learnMore') }}
</n8n-link> </n8n-link>
</n8n-info-tip> </n8n-info-tip>
</p> </p>
<n8n-card :class="$style.card"> <n8n-card :class="$style.card">
<span :class="$style.delete"> <span :class="$style.delete">
<n8n-link @click="showDeleteModal"> <n8n-link @click="showDeleteModal" :bold="true">
{{ $locale.baseText('generic.delete') }} {{ $locale.baseText('generic.delete') }}
</n8n-link> </n8n-link>
</span> </span>