Browse Source

fix(nc-gui): update font weight and size of form subheading, field title, helper text

pull/7664/head
Ramesh Mane 5 months ago
parent
commit
e9699eaad3
  1. 22
      packages/nc-gui/components/smartsheet/Form.vue
  2. 6
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
  3. 6
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

22
packages/nc-gui/components/smartsheet/Form.vue

@ -509,7 +509,7 @@ useEventListener(
{{ formViewData.heading }}
</h1>
<h2 v-if="formViewData.subheading" class="font-bold text-base text-gray-500 mb-4">
<h2 v-if="formViewData.subheading" class="font-medium text-base text-gray-500 mb-4">
{{ formViewData.subheading }}
</h2>
</div>
@ -645,7 +645,7 @@ useEventListener(
<a-form-item v-if="isEditable" class="w-full !my-0">
<a-textarea
v-model:value="formViewData.subheading"
class="nc-form-focus-element w-full !p-0 !m-0 !border-0 !rounded-none font-bold !text-gray-500"
class="nc-form-focus-element w-full !px-0 !m-0 !border-0 !rounded-none font-medium text-base !text-gray-500"
:style="{
borderRightWidth: '0px !important',
resize: 'vertical',
@ -663,7 +663,7 @@ useEventListener(
/>
</a-form-item>
<div v-else class="font-bold text-base text-gray-500">
<div v-else class="font-medium text-base text-gray-500">
{{ formViewData.subheading || '---' }}
</div>
</div>
@ -715,11 +715,11 @@ useEventListener(
@click.stop="onFormItemClick(element)"
>
<div v-if="activeRow !== element.title">
<div>
<div class="text-sm font-semibold text-gray-800">
<span data-testid="nc-form-input-label">
{{ element.label || element.title }}
</span>
<span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span>
<span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div>
<div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text">
@ -737,15 +737,15 @@ useEventListener(
<SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
<SmartsheetHeaderCellIcon v-else :column-meta="element" />
<NcTooltip class="truncate" show-on-truncate-only>
<template #title> {{ element.label || element.title }} </template>
<NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
<template #title> {{ element.title }} </template>
<span data-testid="nc-form-input-label">
{{ element.label || element.title }}
{{ element.title }}
</span>
</NcTooltip>
<span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span>
</div>
<a-form-item class="my-0 !mb-2">
<a-form-item class="!my-0">
<div class="flex gap-2 items-center">
<span
class="nc-form-input-required text-gray-500 mr-2"
@ -1259,10 +1259,10 @@ useEventListener(
}
.nc-form-input-label {
@apply !px-4 !py-2;
@apply !px-4 !py-2 text-gray-800;
}
.nc-form-input-help-text {
@apply !px-4 !py-1;
@apply !px-4 !py-1 text-gray-700;
}
.nc-form-help-text,

6
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue

@ -95,7 +95,7 @@ const onDecode = async (scannedCodeValue: string) => {
{{ sharedFormView.heading }}
</h1>
<h2 v-if="sharedFormView.subheading" class="text-base font-bold text-gray-500 dark:text-slate-300 mb-4">
<h2 v-if="sharedFormView.subheading" class="font-medium text-base text-gray-500 dark:text-slate-300 mb-4">
{{ sharedFormView.subheading }}
</h2>
</div>
@ -150,11 +150,11 @@ const onDecode = async (scannedCodeValue: string) => {
<div class="nc-form h-full">
<div class="flex flex-col gap-3 md:gap-6">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
<div class="nc-form-column-label">
<div class="nc-form-column-label text-sm font-semibold text-gray-800">
<span>
{{ field.label || field.title }}
</span>
<span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div>
<div v-if="field?.description" class="nc-form-column-description text-gray-500 text-sm">
{{ field?.description }}

6
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

@ -248,7 +248,7 @@ onMounted(() => {
<h2
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
class="text-base font-bold text-gray-500 dark:text-gray-300 self-center mb-4"
class="font-medium text-base text-gray-500 dark:text-gray-300 self-center mb-4"
data-testid="nc-survey-form__sub-heading"
>
{{ sharedFormView?.subheading }}
@ -264,11 +264,11 @@ onMounted(() => {
class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
>
<div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="nc-form-column-label" data-testid="nc-form-column-label">
<div class="nc-form-column-label text-sm font-semibold text-gray-800" data-testid="nc-form-column-label">
<span>
{{ field.label || field.title }}
</span>
<span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div>
<div
v-if="field?.description"

Loading…
Cancel
Save