feat: allow compact input

app/javascript/v3/components/Form/Input.vue

@@ -23,14 +23,16 @@
           'focus:ring-red-600 ring-red-600': hasError,
           'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
             !hasError,
+          'px-3 py-3': spacing === 'base',
+          'px-3 py-2': spacing === 'compact',
         }"
-        class="block w-full rounded-md border-0 px-3 py-3 appearance-none shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700"
+        class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700"
         @input="onInput"
         @blur="$emit('blur')"
       />
       <span
         v-if="errorMessage && hasError"
-        class="text-xs leading-2 text-red-400"
+        class="text-xs text-red-400 leading-2"
       >
         {{ errorMessage }}
       </span>
@@ -76,6 +78,11 @@ export default {
       type: String,
       default: '',
     },
+    spacing: {
+      type: String,
+      default: 'base',
+      validator: value => ['base', 'compact'].includes(value),
+    },
   },
   methods: {
     onInput(e) {

app/javascript/v3/views/auth/start/SetupCompany.vue

@@ -8,7 +8,7 @@
         <form-input
           v-model="companyName"
           name="companyName"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.COMPANY_NAME.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.COMPANY_NAME.PLACEHOLDER')"
           :error-message="$t('ONBOARDING.COMPANY.COMPANY_NAME.ERROR')"
@@ -16,28 +16,28 @@
         <form-input
           v-model="industry"
           name="industry"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.INDUSTRY.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.INDUSTRY.PLACEHOLDER')"
         />
         <form-input
           v-model="timezone"
           name="timezone"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
         />
         <form-input
           v-model="locale"
           name="locale"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
         />
         <form-input
           v-model="companySize"
           name="company_size"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
         />

app/javascript/v3/views/auth/start/SetupProfile.vue

@@ -8,7 +8,7 @@
         <form-input
           v-model="fullName"
           name="full_name"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.PROFILE.FULL_NAME.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.FULL_NAME.PLACEHOLDER')"
           :error-message="$t('ONBOARDING.PROFILE.FULL_NAME.ERROR')"
@@ -16,21 +16,21 @@
         <form-input
           v-model="displayName"
           name="display_name"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.PROFILE.DISPLAY_NAME.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.DISPLAY_NAME.PLACEHOLDER')"
         />
         <form-input
           v-model="phoneNumber"
           name="phone_number"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.PROFILE.PHONE_NUMBER.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.PHONE_NUMBER.PLACEHOLDER')"
         />
         <form-input
           v-model="signature"
           name="signature"
-          class="flex-1"
+          spacing="compact"
           :label="$t('ONBOARDING.PROFILE.SIGNATURE.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.SIGNATURE.PLACEHOLDER')"
         />