module button styling

public/css/app.css

@@ -57885,5 +57885,12 @@ body{
   .\32xl\:w-8{
     width: 2rem;
   }
+
+  .\32xl\:flex-row{
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
 }
 

resources/views/components/layouts/modules/show/buttons.blade.php

@@ -1,6 +1,6 @@
 @props(['module', 'installed', 'enable'])
 
-<div x-show="price_type == 'monthly'" class="w-full">
+<div x-show="price_type == 'monthly'" class="w-full flex space-x-6">
     <x-tooltip message="{{ trans('modules.hosted_on_akaunting') }}" placement="top" width="w-full">
         <x-link
             href="{{ $module->action_url }}"
@@ -13,7 +13,7 @@
     </x-tooltip>
 </div>
 
-<div x-show="price_type == 'yearly'" class="w-full">
+<div x-show="price_type == 'yearly'" class="w-full flex space-x-6">
     @if (in_array('onprime', $module->where_to_use) || $module->isPurchase)
         @if ($installed)
             @can('delete-modules-item')
@@ -98,7 +98,7 @@
     @endif
 </div>
 
-<div x-show="price_type == 'lifetime'" class="w-full">
+<div x-show="price_type == 'lifetime'" class="w-full flex space-x-6">
     @if (empty($module->plan))
         @if ($installed)
             @can('delete-modules-item')

resources/views/components/layouts/modules/show/price.blade.php

@@ -1,7 +1,7 @@
 @props(['module'])
 
 @if ($module->price != '0.0000')
-    <div class="flex gap-2 items-baseline cursor-default">
+    <div class="flex flex-col 2xl:flex-row gap-2 items-baseline cursor-default">
         {!! $module->price_prefix !!}
 
         <div x-show="price_type == 'monthly'">

resources/views/components/layouts/modules/show/toggle.blade.php

@@ -1,7 +1,7 @@
 <x-form>
-    <div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4">
+    <div>
         <div class="relative" x-model="price_type">
-            <div class="w-58 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
+            <div class="w-58 flex items-center bg-gray-200 p-1 rounded-lg">
                 <button type="button"
                     x-on:click="price_type = 'monthly'"
                     class="w-18 flex justify-center px-2"

resources/views/components/loading/module.blade.php

@@ -0,0 +1,9 @@
+<div
+  x-data="{ }"
+  x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingModuleContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
+  x-ref="loadingModuleContent"
+  class="absolute lg:flex items-center justify-center bg-body top-0 bottom-0 left-0 right-0"
+  style="width: 120%; z-index: 60;"
+>
+  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
+</div>

resources/views/modules/item/show.blade.php

@@ -54,7 +54,7 @@
                     @endif
                 </div>
 
-                <div class="w-full lg:w-5/12" x-data="{ price_type : 'yearly' }">
+                <div class="relative w-full lg:w-5/12" x-data="{ price_type : 'yearly' }">
                     <div class="flex flex-col space-y-6">
                         <div class="flex flex-col cursor-default">
                             <div class="flex flex-col space-y-4">
@@ -101,10 +101,12 @@
                             {!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!}
                         </div>
 
-                        <div class="relative flex items-center space-x-4 justify-between">
+                        <div class="flex items-center space-x-4 justify-between">
+                            <x-loading.module />
+
                             <x-layouts.modules.show.price :module="$module" />
 
-                            <div class="flex w-1/2 lg:justify-center">
+                            <div class="flex lg:justify-center">
                                 @if ($module->price != '0.0000')
                                     <x-layouts.modules.show.toggle />
                                 @endif
@@ -114,7 +116,7 @@
                         <x-layouts.modules.show.information :module="$module" />
                     </div>
 
-                    <div class="flex justify-around space-x-12 mt-5">
+                    <div class="flex justify-around mt-5">
                         <x-layouts.modules.show.buttons :module="$module" :installed="$installed" :enable="$enable" />
                     </div>
                 </div>

safelist.txt

@@ -70,6 +70,7 @@ lg:overflow-x-hidden
 xl:grid-cols-4
 xl:w-8/12
 xl:pt-6
+2xl:flex-row
 ltr:-right-10
 rtl:-left-10
 ltr:rounded-tl-md