Update namespace import UI

client/web/compose/src/components/Common/RecordToolbar.vue

@@ -346,15 +346,3 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
-.back {
-  &:hover {
-    text-decoration: none;
-
-    .back-icon {
-      transition: transform 0.3s ease-out;
-      transform: translateX(-4px);
-    }
-  }
-}
-</style>

client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue

@@ -2,6 +2,7 @@
   <b-card
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex justify-content-between align-items-center"
   >
     <b-form-group :label="$t('name.label')">
       <b-form-input
@@ -25,26 +26,29 @@
       </b-form-invalid-feedback>
     </b-form-group>
 
-    <div slot="footer">
+    <template #footer>
       <b-button
         data-test-id="button-back"
-        variant="outline-dark"
-        class="float-left"
+        variant="link"
+        class="back px-0"
         @click="$emit('back')"
       >
+        <font-awesome-icon
+          :icon="['fas', showRecordModal ? 'times' : 'chevron-left']"
+          class="back-icon"
+        />
         {{ $t('import.back') }}
       </b-button>
 
       <b-button
         data-test-id="button-import"
-        variant="dark"
+        variant="primary"
         :disabled="submitDisabled"
-        class="float-right"
         @click="nextStep"
       >
         {{ $t('import.import') }}
       </b-button>
-    </div>
+    </template>
   </b-card>
 </template>
 

client/web/compose/src/components/Namespaces/Importer/index.vue

@@ -26,6 +26,7 @@
 
       <component
         :is="stepComponent"
+        v-else
         v-bind="$props"
         :session="session"
         @fileUploaded="onFileUploaded"

client/web/compose/src/themes/corteza-base/custom.scss

@@ -28,6 +28,17 @@ button:disabled {
   }
 }
 
+.back {
+  &:hover {
+    text-decoration: none;
+
+    .back-icon {
+      transition: transform 0.3s ease-out;
+      transform: translateX(-4px);
+    }
+  }
+}
+
 .pointer {
   cursor: pointer;
 }