refactor(ui): title and actions slot on modals

components/environments/Add.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/environments/Edit.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">

components/environments/ImportExport.vue

@@ -1,13 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">
-        {{ $t("import_export") }} {{ $t("environments") }}
-      </h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('environments')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -45,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">