From c997655b961965ee607907c54fd68ba10686fcbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 18 Sep 2023 14:40:24 +0200
Subject: [PATCH] Update namespace import UI

---
 .../src/components/Common/RecordToolbar.vue      | 12 ------------
 .../Namespaces/Importer/ImportConfiguration.vue  | 16 ++++++++++------
 .../src/components/Namespaces/Importer/index.vue |  1 +
 .../compose/src/themes/corteza-base/custom.scss  | 11 +++++++++++
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 9023e389a..5aee77f5d 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/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>
diff --git a/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue b/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue
index 8da55beb2..58ff53f9d 100644
--- a/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue
+++ b/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>
 
diff --git a/client/web/compose/src/components/Namespaces/Importer/index.vue b/client/web/compose/src/components/Namespaces/Importer/index.vue
index 3bfebcc10..3edf417f6 100644
--- a/client/web/compose/src/components/Namespaces/Importer/index.vue
+++ b/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"
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 9ea176f91..075703862 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/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;
 }