wizard styling.. ( #3g9na1f )

resources/assets/js/views/wizard/Company.vue

@@ -1,9 +1,14 @@
 <template>
-    <div>
     <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
         <WizardSteps :active_state="active"></WizardSteps>
 
-            <form ref="form" class="w-full">
+        <div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
+            <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
+                <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
+            </div>
+
+            <div class="overflow-x-visible menu-scroll mt-1">
+                <form ref="form" class="py-2 align-middle inline-block min-w-full">
                     <div class="relative">
                         <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                             <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
@@ -96,6 +101,10 @@
                                     <div v-if="onFailErrorGet('logo')" class="text-red text-sm mt-1 block" v-html="onFailErrorGet('logo')"></div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
+                </form>
+            </div>
 
             <div class="flex items-center justify-center mt-5 gap-x-10">
                 <base-button class="w-1/2  flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="next()">
@@ -116,9 +125,12 @@
                 </button>
             </div>
         </div>
-                </div>
+
-            </form>
+        <form id="form-dynamic-component" method="POST" action="#"></form>
-        </div>
+
+        <component v-bind:is="component" @deleted="onDeleteCurrency($event)"></component>
+
+        <notifications></notifications>
     </div>
 </template>
 

resources/assets/js/views/wizard/Finish.vue

@@ -1,10 +1,8 @@
 <template>
     <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
-        <div class="pr-10">
         <WizardSteps :active_state="active"></WizardSteps>
-        </div>
 
-        <div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
+        <div class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
             <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                 <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
             </div>

resources/assets/js/views/wizard/Steps.vue

@@ -5,11 +5,16 @@
                 <li class="w-1/3">
                 	<span class="pr-6 flex flex-col">
                         <span
-                          	:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
                            	class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
-                        >Text</span>
+                          	:class="[{ 'bg-purple': active_state >= 0 }]"
+                        >
+                            Text
+                        </span>
 
-                        <span :class="[{'font-bold': active_state == 0}, {'font-bold': active_state > 0}]" class="text-sm font-normal mt-2">
+                        <span
+                            class="text-sm font-normal mt-2"
+                            :class="[{ 'font-bold': active_state >= 0 }]"
+                        >
                             {{ translations.company.title }}
                         </span>
                 	</span>
@@ -18,11 +23,16 @@
                 <li class="w-1/3">
                     <span class="px-3 flex flex-col">
                         <span
-                            :class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
                             class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
-                        >Text</span>
+                            :class="[{ 'bg-purple': active_state >= 1 }]"
+                        >
+                            Text
+                        </span>
 
-                        <span :class="[{'font-bold': active_state == 1}, {'font-bold': active_state > 1}]" class="text-sm font-normal mt-2">
+                        <span
+                            class="text-sm font-normal mt-2"
+                            :class="[{ 'font-bold': active_state >= 1 }]"
+                        >
                             {{ translations.currencies.title }}
                         </span>
                     </span>
@@ -31,11 +41,16 @@
                 <li class="w-1/3">
                     <span class="pl-6 flex flex-col">
                         <span
-                            :class="[{'bg-purple': active_state == 3}]"
+                            :class="[{'bg-purple': active_state == 2}]"
                             class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
-                        >Text</span>
+                        >
+                            Text
+                        </span>
 
-                        <span :class="[{'font-bold': active_state == 3}]" class="text-sm font-normal mt-2">
+                        <span
+                            class="text-sm font-normal mt-2"
+                            :class="[{ 'font-bold': active_state == 2 }]"
+                        >
                             {{ translations.finish.title }}
                         </span>
                     </span>