Fix: Adjust create function modal inputs (#2555)

packages/frontend-2/components/automate/function/Card.vue

@@ -7,7 +7,7 @@
     :target="externalMoreInfo ? '_blank' : undefined"
   >
     <div
-      class="px-4 py-4 flex flex-col gap-3 rounded-lg border border-outline-3 bg-foundation relative"
+      class="px-4 py-4 flex flex-col gap-3 rounded-lg border border-outline-3 bg-foundation relative h-full"
     >
       <div class="flex gap-3 items-center" :class="{ 'w-4/5': hasLabel }">
         <AutomateFunctionLogo :logo="fn.logo" />

packages/frontend-2/components/automate/function/create-dialog/DetailsStep.vue

@@ -15,6 +15,7 @@
           name="name"
           label="Name"
           placeholder="Function Name"
+          color="foundation"
           help="This will be used as the function's display name and also as the name of the Git repository."
           show-label
           show-required
@@ -44,6 +45,7 @@
     />
     <FormTags
       name="tags"
+      color="foundation"
       label="Tags"
       show-label
       show-clear

packages/frontend-2/components/form/MarkdownEditor.vue

@@ -25,6 +25,7 @@
       v-model="value"
       textarea-classes="font-mono"
       :name="name"
+      color="foundation"
       :label="label"
       :show-label="false"
       :show-required="showRequired"

packages/ui-components/src/components/form/Tags.vue

@@ -76,7 +76,7 @@
         class="relative px-0.5"
       >
         <ComboboxOptions
-          class="absolute top-1 max-h-60 w-full overflow-auto simple-scrollbar rounded-md bg-foundation-2 py-1 shadow label label--light outline outline-2 outline-primary-muted focus:outline-none"
+          class="absolute top-1 max-h-60 w-full overflow-auto simple-scrollbar rounded-md bg-foundation py-1 shadow label label--light outline outline-2 outline-primary-muted focus:outline-none"
         >
           <div
             v-if="isAutocompleteLoading"
@@ -273,9 +273,9 @@ const inputWrapperClasses = computed(() => {
       classParts.push('ring-1 ring-danger')
     }
   } else {
-    classParts.push('border-2 border-transparent')
+    classParts.push('border border-outline-3')
     if (isInputFocused.value) {
-      classParts.push('ring-2 ring-outline-2')
+      classParts.push('ring-1 ring-outline-3')
     }
   }