From 3a3f69ccb9d8f33a08acb944f518f1afd87ed82a Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Tue, 21 Nov 2023 18:27:07 +0600
Subject: [PATCH] Fix tailwind broken design

---
 src/admin/components/AddReverseWithdraw.vue   | 14 ++---
 src/admin/components/CardFunFact.vue          |  6 +-
 src/admin/components/ModuleUpgradePopup.vue   | 58 ++++++++++---------
 src/admin/components/Postbox.vue              |  2 +-
 src/admin/pages/Dashboard.vue                 |  2 +-
 src/admin/pages/DummyData.vue                 |  8 +--
 src/admin/pages/ProModules.vue                | 43 +++++++-------
 src/admin/pages/ReverseWithdrawal.vue         |  3 +-
 .../pages/ReverseWithdrawalTransactions.vue   |  1 -
 src/admin/pages/VendorAccountFields.vue       |  8 +--
 src/admin/pages/VendorPaymentFields.vue       |  2 +-
 src/admin/pages/Withdraw.vue                  |  2 +-
 12 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/src/admin/components/AddReverseWithdraw.vue b/src/admin/components/AddReverseWithdraw.vue
index 029db60e6d..44512b9d92 100644
--- a/src/admin/components/AddReverseWithdraw.vue
+++ b/src/admin/components/AddReverseWithdraw.vue
@@ -8,7 +8,7 @@
             <div slot='body' class='dokan-rw-body'>
                 <div class='dokan-rw-section mb-4'>
                     <div class='dokan-rw-section-heading mb-[-0.5rem]'>
-                        <h3 class='font-bold'>{{ __('Select vendor', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select vendor', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -35,7 +35,7 @@
 
                 <div class='dokan-rw-section mb-4'>
                     <div class='dokan-rw-section-heading mb-1'>
-                        <h3 class='font-bold'>{{ __('Transaction Type', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Transaction Type', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <dokan-radio-group
@@ -48,7 +48,7 @@
 
                 <div class='dokan-rw-section mb-4' v-if="'manual_product' === transectionType">
                     <div class='dokan-rw-section-heading mb-[-0.5rem]'>
-                        <h3 class='font-bold'>{{ __('Select Product', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select Product', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -74,7 +74,7 @@
 
                 <div class='dokan-rw-section mb-4' v-if="'manual_order' === transectionType">
                     <div class='dokan-rw-section-heading mb-1'>
-                        <h3 class='font-bold'>{{ __('Select Order', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select Order', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -100,7 +100,7 @@
 
                 <div class='dokan-rw-section mb-4'>
                     <div class='dokan-rw-section-heading mb-1'>
-                        <h3 class='font-bold'>{{ __('Withdrawal Balance Type', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Withdrawal Balance Type', 'dokan-lite') }}</h3>
                         <i
                             class="dashicons dashicons-editor-help tips"
                             :title="__( 'Adjust Balance by Creating a New Reverse Withdrawal Entry', 'dokan-lite' )"
@@ -118,7 +118,7 @@
 
                 <div class='dokan-rw-section mb-4'>
                     <div class='dokan-rw-section-heading mb-1'>
-                        <h3 class='font-bold'>{{ __('Reverse Withdrawal Amount', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Reverse Withdrawal Amount', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="dokan-rw-input">
@@ -135,7 +135,7 @@
 
                 <div class='dokan-rw-section'>
                     <div class='dokan-rw-section-heading mb-1'>
-                        <h3 class='font-bold'>{{ __('Notes', 'dokan-lite') }}</h3>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Notes', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="dokan-rw-note-area">
diff --git a/src/admin/components/CardFunFact.vue b/src/admin/components/CardFunFact.vue
index 7a885195f5..16ba042c53 100644
--- a/src/admin/components/CardFunFact.vue
+++ b/src/admin/components/CardFunFact.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dokan-card-fun-fact">
+    <div class="dokan-card-fun-fact mr-[20px] last:mr-0 mt-[20px]">
         <div class="card-fun-fact__icon">
             <span class="fa-stack fa-2x">
                 <i class="fas fa-circle fa-stack-2x" v-bind:style="{ color: circle_background }"></i>
@@ -86,8 +86,8 @@ export default {
     transition: height 1000ms;
     display: flex;
     align-items: center;
-    flex-basis: 20%;
-    margin: 10px;
+    width: calc(25% - 15px);
+    //margin: 10px;
 
     .rounded-icon {
         background-color: #ccc;
diff --git a/src/admin/components/ModuleUpgradePopup.vue b/src/admin/components/ModuleUpgradePopup.vue
index 961672948b..b7c1a7851f 100644
--- a/src/admin/components/ModuleUpgradePopup.vue
+++ b/src/admin/components/ModuleUpgradePopup.vue
@@ -3,34 +3,36 @@
         <div v-if="showPopup" id="dokan-upgrade-popup" @click.self="closePopup">
             <div class="modal-content">
                 <div class="body">
-                    <svg width="128" height="109" viewBox="0 0 128 109" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M127.502 37.5077C127.406 37.2181 127.141 37.0125 126.827 36.9851L122.568 36.6104L120.884 32.7907C120.76 32.5108 120.477 32.3296 120.163 32.3296C119.848 32.3296 119.566 32.5108 119.441 32.7914L117.757 36.6104L113.497 36.9851C113.184 37.0132 112.92 37.2181 112.823 37.5077C112.726 37.7972 112.815 38.1148 113.052 38.315L116.272 41.0508L115.322 45.1028C115.253 45.4008 115.372 45.7087 115.627 45.8874C115.764 45.9834 115.925 46.0323 116.087 46.0323C116.226 46.0323 116.364 45.9959 116.489 45.9239L120.163 43.7962L123.835 45.9239C124.104 46.0805 124.443 46.0662 124.697 45.8874C124.953 45.7082 125.072 45.4001 125.002 45.1028L124.053 41.0508L127.272 38.3155C127.509 38.1148 127.6 37.7978 127.502 37.5077Z" fill="#FFC107"/>
-                        <path d="M16.8209 38.1758C16.7105 37.8194 16.4076 37.5663 16.0492 37.5326L11.1816 37.0714L9.25677 32.3703C9.11485 32.0258 8.79162 31.8027 8.4325 31.8027C8.07338 31.8027 7.75015 32.0258 7.60823 32.3711L5.68343 37.0714L0.815005 37.5326C0.457297 37.5671 0.155176 37.8194 0.0441323 38.1758C-0.0669114 38.5321 0.0356399 38.923 0.306237 39.1693L3.98561 42.5365L2.90064 47.5236C2.82125 47.8903 2.95765 48.2694 3.24922 48.4893C3.40594 48.6074 3.5893 48.6676 3.7742 48.6676C3.93362 48.6676 4.09176 48.6228 4.23368 48.5341L8.4325 45.9155L12.6298 48.5341C12.9369 48.7269 13.3241 48.7094 13.615 48.4893C13.9067 48.2687 14.043 47.8895 13.9636 47.5236L12.8786 42.5365L16.558 39.17C16.8286 38.923 16.9319 38.5328 16.8209 38.1758Z" fill="#FFC107"/>
-                        <path d="M110.124 10.7456C110.062 10.5674 109.891 10.4409 109.69 10.424L106.952 10.1934L105.869 7.84286C105.789 7.67059 105.607 7.55908 105.405 7.55908C105.203 7.55908 105.022 7.67059 104.942 7.84326L103.859 10.1934L101.121 10.424C100.919 10.4413 100.749 10.5674 100.687 10.7456C100.624 10.9238 100.682 11.1192 100.834 11.2424L102.904 12.926L102.294 15.4195C102.249 15.6029 102.326 15.7924 102.49 15.9024C102.578 15.9614 102.681 15.9915 102.785 15.9915C102.875 15.9915 102.964 15.9691 103.044 15.9248L105.405 14.6155L107.766 15.9248C107.939 16.0212 108.157 16.0124 108.321 15.9024C108.485 15.7921 108.561 15.6025 108.517 15.4195L107.906 12.926L109.976 11.2427C110.128 11.1192 110.186 10.9241 110.124 10.7456Z" fill="#FFC107"/>
-                        <path d="M34.2322 8.63769C34.1701 8.45951 33.9998 8.33297 33.7982 8.31612L31.0601 8.08551L29.9774 5.73495C29.8976 5.56268 29.7158 5.45117 29.5138 5.45117C29.3118 5.45117 29.13 5.56268 29.0501 5.73535L27.9674 8.08551L25.2289 8.31612C25.0277 8.33337 24.8578 8.45951 24.7953 8.63769C24.7329 8.81586 24.7906 9.01129 24.9428 9.13448L27.0124 10.8181L26.4021 13.3116C26.3575 13.495 26.4342 13.6845 26.5982 13.7945C26.6863 13.8535 26.7895 13.8836 26.8935 13.8836C26.9832 13.8836 27.0721 13.8612 27.152 13.8169L29.5138 12.5076L31.8748 13.8169C32.0475 13.9133 32.2653 13.9045 32.429 13.7945C32.593 13.6842 32.6697 13.4946 32.625 13.3116L32.0147 10.8181L34.0844 9.13481C34.2366 9.01129 34.2947 8.8162 34.2322 8.63769Z" fill="#FFC107"/>
-                        <path d="M36.3471 79.5168C36.3023 79.3832 36.1792 79.2883 36.0337 79.2757L34.0562 79.1027L33.2742 77.3398C33.2166 77.2106 33.0853 77.127 32.9394 77.127C32.7935 77.127 32.6622 77.2106 32.6045 77.3401L31.8226 79.1027L29.8448 79.2757C29.6994 79.2886 29.5767 79.3832 29.5316 79.5168C29.4865 79.6505 29.5282 79.797 29.6381 79.8894L31.1328 81.1521L30.6921 83.0223C30.6598 83.1598 30.7152 83.3019 30.8337 83.3844C30.8973 83.4287 30.9718 83.4513 31.0469 83.4513C31.1117 83.4513 31.1759 83.4345 31.2336 83.4012L32.9394 82.4192L34.6445 83.4012C34.7693 83.4735 34.9266 83.4669 35.0448 83.3844C35.1633 83.3017 35.2186 83.1595 35.1864 83.0223L34.7456 81.1521L36.2404 79.8897C36.3503 79.797 36.3923 79.6507 36.3471 79.5168Z" fill="#FFC107"/>
-                        <path d="M115.928 67.9221C115.883 67.7885 115.76 67.6936 115.615 67.6809L113.637 67.508L112.855 65.7451C112.798 65.6159 112.666 65.5322 112.52 65.5322C112.375 65.5322 112.243 65.6159 112.186 65.7454L111.404 67.508L109.426 67.6809C109.281 67.6939 109.158 67.7885 109.113 67.9221C109.068 68.0557 109.109 68.2023 109.219 68.2947L110.714 69.5574L110.273 71.4276C110.241 71.5651 110.296 71.7072 110.415 71.7897C110.478 71.834 110.553 71.8566 110.628 71.8566C110.693 71.8566 110.757 71.8397 110.815 71.8065L112.52 70.8245L114.226 71.8065C114.35 71.8788 114.508 71.8722 114.626 71.7897C114.744 71.707 114.8 71.5648 114.767 71.4276L114.327 69.5574L115.821 68.295C115.931 68.2023 115.973 68.056 115.928 67.9221Z" fill="#FFC107"/>
-                        <g filter="url(#filter0_d_1098_419)">
-                            <circle cx="65.5727" cy="47.0224" r="35.0473" fill="url(#paint0_linear_1098_419)"/>
-                        </g>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M73.2509 40.3179C73.2509 35.8737 69.6482 32.271 65.204 32.271C60.7598 32.271 57.1571 35.8737 57.1571 40.3179V44.2984H56.5271C54.9772 44.2984 53.7207 45.5549 53.7207 47.1048V58.5595C53.7207 60.1094 54.9772 61.3659 56.5271 61.3659H74.11C75.6599 61.3659 76.9164 60.1094 76.9164 58.5595V47.1048C76.9164 45.5549 75.6599 44.2984 74.11 44.2984H59.3335V40.4324L59.3345 40.3196C59.3947 37.1295 61.9995 34.5619 65.204 34.5619C68.4462 34.5619 71.0745 37.1902 71.0745 40.4324L71.0745 40.5756H73.2509V40.3179ZM65.3185 50.9994C66.4098 50.9994 67.2944 51.884 67.2944 52.9753C67.2944 53.9393 66.6042 54.742 65.6909 54.9162L65.6908 57.7863C65.6908 57.9919 65.5241 58.1585 65.3185 58.1585C65.1129 58.1585 64.9462 57.9919 64.9462 57.7863L64.9464 54.9163C64.033 54.7422 63.3426 53.9394 63.3426 52.9753C63.3426 51.884 64.2272 50.9994 65.3185 50.9994Z" fill="white"/>
-                        <defs>
-                            <filter id="filter0_d_1098_419" x="11.5524" y="0.90753" width="108.041" height="108.041" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-                                <feOffset dy="7.90541"/>
-                                <feGaussianBlur stdDeviation="9.48649"/>
-                                <feComposite in2="hardAlpha" operator="out"/>
-                                <feColorMatrix type="matrix" values="0 0 0 0 0.743854 0 0 0 0 0.925 0 0 0 0 0.850411 0 0 0 1 0"/>
-                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1098_419"/>
-                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1098_419" result="shape"/>
-                            </filter>
-                            <linearGradient id="paint0_linear_1098_419" x1="65.5727" y1="11.9751" x2="65.5727" y2="82.0697" gradientUnits="userSpaceOnUse">
-                                <stop stop-color="#01CB70"/>
-                                <stop offset="1" stop-color="#1CE385"/>
-                            </linearGradient>
-                        </defs>
-                    </svg>
+                    <div class='w-full h-[109px] flex justify-center'>
+                        <svg width="128" height="109" viewBox="0 0 128 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M127.502 37.5077C127.406 37.2181 127.141 37.0125 126.827 36.9851L122.568 36.6104L120.884 32.7907C120.76 32.5108 120.477 32.3296 120.163 32.3296C119.848 32.3296 119.566 32.5108 119.441 32.7914L117.757 36.6104L113.497 36.9851C113.184 37.0132 112.92 37.2181 112.823 37.5077C112.726 37.7972 112.815 38.1148 113.052 38.315L116.272 41.0508L115.322 45.1028C115.253 45.4008 115.372 45.7087 115.627 45.8874C115.764 45.9834 115.925 46.0323 116.087 46.0323C116.226 46.0323 116.364 45.9959 116.489 45.9239L120.163 43.7962L123.835 45.9239C124.104 46.0805 124.443 46.0662 124.697 45.8874C124.953 45.7082 125.072 45.4001 125.002 45.1028L124.053 41.0508L127.272 38.3155C127.509 38.1148 127.6 37.7978 127.502 37.5077Z" fill="#FFC107"/>
+                            <path d="M16.8209 38.1758C16.7105 37.8194 16.4076 37.5663 16.0492 37.5326L11.1816 37.0714L9.25677 32.3703C9.11485 32.0258 8.79162 31.8027 8.4325 31.8027C8.07338 31.8027 7.75015 32.0258 7.60823 32.3711L5.68343 37.0714L0.815005 37.5326C0.457297 37.5671 0.155176 37.8194 0.0441323 38.1758C-0.0669114 38.5321 0.0356399 38.923 0.306237 39.1693L3.98561 42.5365L2.90064 47.5236C2.82125 47.8903 2.95765 48.2694 3.24922 48.4893C3.40594 48.6074 3.5893 48.6676 3.7742 48.6676C3.93362 48.6676 4.09176 48.6228 4.23368 48.5341L8.4325 45.9155L12.6298 48.5341C12.9369 48.7269 13.3241 48.7094 13.615 48.4893C13.9067 48.2687 14.043 47.8895 13.9636 47.5236L12.8786 42.5365L16.558 39.17C16.8286 38.923 16.9319 38.5328 16.8209 38.1758Z" fill="#FFC107"/>
+                            <path d="M110.124 10.7456C110.062 10.5674 109.891 10.4409 109.69 10.424L106.952 10.1934L105.869 7.84286C105.789 7.67059 105.607 7.55908 105.405 7.55908C105.203 7.55908 105.022 7.67059 104.942 7.84326L103.859 10.1934L101.121 10.424C100.919 10.4413 100.749 10.5674 100.687 10.7456C100.624 10.9238 100.682 11.1192 100.834 11.2424L102.904 12.926L102.294 15.4195C102.249 15.6029 102.326 15.7924 102.49 15.9024C102.578 15.9614 102.681 15.9915 102.785 15.9915C102.875 15.9915 102.964 15.9691 103.044 15.9248L105.405 14.6155L107.766 15.9248C107.939 16.0212 108.157 16.0124 108.321 15.9024C108.485 15.7921 108.561 15.6025 108.517 15.4195L107.906 12.926L109.976 11.2427C110.128 11.1192 110.186 10.9241 110.124 10.7456Z" fill="#FFC107"/>
+                            <path d="M34.2322 8.63769C34.1701 8.45951 33.9998 8.33297 33.7982 8.31612L31.0601 8.08551L29.9774 5.73495C29.8976 5.56268 29.7158 5.45117 29.5138 5.45117C29.3118 5.45117 29.13 5.56268 29.0501 5.73535L27.9674 8.08551L25.2289 8.31612C25.0277 8.33337 24.8578 8.45951 24.7953 8.63769C24.7329 8.81586 24.7906 9.01129 24.9428 9.13448L27.0124 10.8181L26.4021 13.3116C26.3575 13.495 26.4342 13.6845 26.5982 13.7945C26.6863 13.8535 26.7895 13.8836 26.8935 13.8836C26.9832 13.8836 27.0721 13.8612 27.152 13.8169L29.5138 12.5076L31.8748 13.8169C32.0475 13.9133 32.2653 13.9045 32.429 13.7945C32.593 13.6842 32.6697 13.4946 32.625 13.3116L32.0147 10.8181L34.0844 9.13481C34.2366 9.01129 34.2947 8.8162 34.2322 8.63769Z" fill="#FFC107"/>
+                            <path d="M36.3471 79.5168C36.3023 79.3832 36.1792 79.2883 36.0337 79.2757L34.0562 79.1027L33.2742 77.3398C33.2166 77.2106 33.0853 77.127 32.9394 77.127C32.7935 77.127 32.6622 77.2106 32.6045 77.3401L31.8226 79.1027L29.8448 79.2757C29.6994 79.2886 29.5767 79.3832 29.5316 79.5168C29.4865 79.6505 29.5282 79.797 29.6381 79.8894L31.1328 81.1521L30.6921 83.0223C30.6598 83.1598 30.7152 83.3019 30.8337 83.3844C30.8973 83.4287 30.9718 83.4513 31.0469 83.4513C31.1117 83.4513 31.1759 83.4345 31.2336 83.4012L32.9394 82.4192L34.6445 83.4012C34.7693 83.4735 34.9266 83.4669 35.0448 83.3844C35.1633 83.3017 35.2186 83.1595 35.1864 83.0223L34.7456 81.1521L36.2404 79.8897C36.3503 79.797 36.3923 79.6507 36.3471 79.5168Z" fill="#FFC107"/>
+                            <path d="M115.928 67.9221C115.883 67.7885 115.76 67.6936 115.615 67.6809L113.637 67.508L112.855 65.7451C112.798 65.6159 112.666 65.5322 112.52 65.5322C112.375 65.5322 112.243 65.6159 112.186 65.7454L111.404 67.508L109.426 67.6809C109.281 67.6939 109.158 67.7885 109.113 67.9221C109.068 68.0557 109.109 68.2023 109.219 68.2947L110.714 69.5574L110.273 71.4276C110.241 71.5651 110.296 71.7072 110.415 71.7897C110.478 71.834 110.553 71.8566 110.628 71.8566C110.693 71.8566 110.757 71.8397 110.815 71.8065L112.52 70.8245L114.226 71.8065C114.35 71.8788 114.508 71.8722 114.626 71.7897C114.744 71.707 114.8 71.5648 114.767 71.4276L114.327 69.5574L115.821 68.295C115.931 68.2023 115.973 68.056 115.928 67.9221Z" fill="#FFC107"/>
+                            <g filter="url(#filter0_d_1098_419)">
+                                <circle cx="65.5727" cy="47.0224" r="35.0473" fill="url(#paint0_linear_1098_419)"/>
+                            </g>
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M73.2509 40.3179C73.2509 35.8737 69.6482 32.271 65.204 32.271C60.7598 32.271 57.1571 35.8737 57.1571 40.3179V44.2984H56.5271C54.9772 44.2984 53.7207 45.5549 53.7207 47.1048V58.5595C53.7207 60.1094 54.9772 61.3659 56.5271 61.3659H74.11C75.6599 61.3659 76.9164 60.1094 76.9164 58.5595V47.1048C76.9164 45.5549 75.6599 44.2984 74.11 44.2984H59.3335V40.4324L59.3345 40.3196C59.3947 37.1295 61.9995 34.5619 65.204 34.5619C68.4462 34.5619 71.0745 37.1902 71.0745 40.4324L71.0745 40.5756H73.2509V40.3179ZM65.3185 50.9994C66.4098 50.9994 67.2944 51.884 67.2944 52.9753C67.2944 53.9393 66.6042 54.742 65.6909 54.9162L65.6908 57.7863C65.6908 57.9919 65.5241 58.1585 65.3185 58.1585C65.1129 58.1585 64.9462 57.9919 64.9462 57.7863L64.9464 54.9163C64.033 54.7422 63.3426 53.9394 63.3426 52.9753C63.3426 51.884 64.2272 50.9994 65.3185 50.9994Z" fill="white"/>
+                            <defs>
+                                <filter id="filter0_d_1098_419" x="11.5524" y="0.90753" width="108.041" height="108.041" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                    <feOffset dy="7.90541"/>
+                                    <feGaussianBlur stdDeviation="9.48649"/>
+                                    <feComposite in2="hardAlpha" operator="out"/>
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0.743854 0 0 0 0 0.925 0 0 0 0 0.850411 0 0 0 1 0"/>
+                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1098_419"/>
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1098_419" result="shape"/>
+                                </filter>
+                                <linearGradient id="paint0_linear_1098_419" x1="65.5727" y1="11.9751" x2="65.5727" y2="82.0697" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#01CB70"/>
+                                    <stop offset="1" stop-color="#1CE385"/>
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </div>
                     <p class="unlock">{{ __( 'Unlock', 'dokan-lite' ) }}</p>
                     <h1>{{ __( '20+ Modules', 'dokan-lite' ) }}</h1>
                     <p class="text-brand">{{ __( 'with Dokan Premium Plans', 'dokan-lite' ) }}</p>
diff --git a/src/admin/components/Postbox.vue b/src/admin/components/Postbox.vue
index ed6fd00f32..72a39230cd 100644
--- a/src/admin/components/Postbox.vue
+++ b/src/admin/components/Postbox.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['postbox', 'dokan-postbox', { 'closed': !showing }, extraClass]">
         <div class="postbox-header">
-            <h2 class="hndle"><span>{{ title }}</span></h2>
+            <h2 class="hndle font-semibold"><span>{{ title }}</span></h2>
             <div class="handle-actions hide-if-no-js">
                 <button type="button" class="handlediv" aria-expanded="false" @click="showing = !showing">
                     <span class="toggle-indicator" aria-hidden="true"></span>
diff --git a/src/admin/pages/Dashboard.vue b/src/admin/pages/Dashboard.vue
index d37505b6dd..7ee979d865 100644
--- a/src/admin/pages/Dashboard.vue
+++ b/src/admin/pages/Dashboard.vue
@@ -84,7 +84,7 @@
                                 <div class="loading" v-if="subscribe.loading">
                                     <loading></loading>
                                 </div>
-                                <h3>{{ __( 'Stay up-to-date', 'dokan-lite' ) }}</h3>
+                                <h3 class='text-xl'>{{ __( 'Stay up-to-date', 'dokan-lite' ) }}</h3>
                                 <p>
                                     {{ __( 'We\'re constantly developing new features, stay up-to-date by subscribing to our newsletter.', 'dokan-lite' ) }}
                                 </p>
diff --git a/src/admin/pages/DummyData.vue b/src/admin/pages/DummyData.vue
index 38446232b7..1ce4826ba8 100644
--- a/src/admin/pages/DummyData.vue
+++ b/src/admin/pages/DummyData.vue
@@ -3,14 +3,14 @@
         <h1>{{ __( 'Import dummy data', 'dokan-lite' ) }}</h1>
         <div v-if="! statusLoader" class="dokan-importer-wrapper">
             <ol class="dokan-importer-progress-steps">
-                <li class="active">{{ __( 'Import', 'dokan-lite' ) }}</li>
-                <li :class="done ? 'active' : ''">{{ __( 'Done!', 'dokan-lite' ) }}</li>
+                <li class="active before:box-content">{{ __( 'Import', 'dokan-lite' ) }}</li>
+                <li class='before:box-content' :class="done ? 'active' : ''">{{ __( 'Done!', 'dokan-lite' ) }}</li>
             </ol>
             <div v-if="'' != errorMsg" class="error inline"><p>{{ errorMsg }}</p></div>
             <div v-if="! done" class="dokan-importer">
                 <header>
-                    <h2>{{ __( 'Import dummy vendors and products', 'dokan-lite' ) }}</h2>
-                    <p>{{ __( 'This tool allows you to import vendor and some products for vendors to your marketplace.', 'dokan-lite' ) }}</p>
+                    <h2 class='text-xl font-semibold m-[1em] ml-0 mr-0'>{{ __( 'Import dummy vendors and products', 'dokan-lite' ) }}</h2>
+                    <p class='m-[1em] ml-0 mr-0'>{{ __( 'This tool allows you to import vendor and some products for vendors to your marketplace.', 'dokan-lite' ) }}</p>
                 </header>
                 <section>
                     <div>
diff --git a/src/admin/pages/ProModules.vue b/src/admin/pages/ProModules.vue
index f4858fb74e..e1f9cddebc 100644
--- a/src/admin/pages/ProModules.vue
+++ b/src/admin/pages/ProModules.vue
@@ -7,30 +7,27 @@
                 <div class="wp-list-table widefat dokan-modules">
                     <template v-if="modules.length > 0">
                         <div class="plugin-card" v-for="module in modules">
-                            <div class="plugin-card-top">
-                                <div class="name column-name">
-                                    <h3>
-                                        <a :href="module.modLink" target="_blank" class="plugin-name">{{ module.name }}</a>
-                                        <a :href="module.modLink" target="_blank" class="plugin-name">
-                                            <img class="plugin-icon" :src="module.thumbnail" :alt="module.name" />
-                                        </a>
-                                    </h3>
+                            <div class='flex p-5'>
+                                <div class='w-[128px h-[128px]'>
+                                    <a :href="module.modLink" target="_blank" class="">
+                                        <img class="w-[128px] h-[128px] max-w-[128px]" :src="module.thumbnail" :alt="module.name" />
+                                    </a>
                                 </div>
-
-                                <div class="action-links">
-                                    <ul class="plugin-action-buttons">
-                                        <li @click="togglePopup(true)">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="42" height="20"><rect width="42" height="20" rx="10" fill="#c0c3c6"/><circle cx="6" cy="6" r="6" transform="translate(6 4)" fill="#fff"/></svg>
-                                        </li>
-                                    </ul>
-                                </div>
-
-                                <div class="desc column-description">
-                                    <p v-html="module.description"></p>
-                                </div>
-
-                                <div class="card-footer">
-                                    <a :href="module.docLink" target="_blank">{{ __( 'Documentation', 'dokan-lite' ) }}</a>
+                                <div class='flex justify-between w-[calc(100%-128px)]'>
+                                    <div class='ml-5'>
+                                        <a :href="module.modLink" target="_blank" class="plugin-name text-[1.3em]">{{ module.name }}</a>
+                                        <p class='mt-3' v-html="module.description"></p>
+                                    </div>
+                                    <div class='flex flex-col justify-between'>
+                                        <div class="">
+                                            <ul class="plugin-action-buttons">
+                                                <li @click="togglePopup(true)">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="42" height="20"><rect width="42" height="20" rx="10" fill="#c0c3c6"/><circle cx="6" cy="6" r="6" transform="translate(6 4)" fill="#fff"/></svg>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <a :href="module.docLink" target="_blank">{{ __( 'Documentation', 'dokan-lite' ) }}</a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/admin/pages/ReverseWithdrawal.vue b/src/admin/pages/ReverseWithdrawal.vue
index 043a8f95a5..8bc07a6606 100644
--- a/src/admin/pages/ReverseWithdrawal.vue
+++ b/src/admin/pages/ReverseWithdrawal.vue
@@ -7,7 +7,7 @@
         <AdminNotice />
         <hr class="wp-header-end">
 
-        <div class="dokan-reverse-withdrawal-fact-card">
+        <div class="dokan-reverse-withdrawal-fact-card mt-[-20px]">
             <CardFunFact :count="counts.credit" icon="fas fa-comments-dollar" is_currency :title="__('Total Collected', 'dokan-lite')" />
             <CardFunFact :count="counts.balance" icon="fas fa-coins" is_currency :title="__('Remaining Balance', 'dokan-lite')" />
             <CardFunFact :count="counts.total_transactions" icon="fas fa-info"  :title="__( 'Total Transactions', 'dokan-lite' )" />
@@ -489,7 +489,6 @@ export default {
 
 .dokan-reverse-withdrawal {
     .dokan-reverse-withdrawal-fact-card {
-        margin: 0px -10px;
         display: flex;
         flex-wrap: wrap;
     }
diff --git a/src/admin/pages/ReverseWithdrawalTransactions.vue b/src/admin/pages/ReverseWithdrawalTransactions.vue
index a15a0dce33..0f8a1f919d 100644
--- a/src/admin/pages/ReverseWithdrawalTransactions.vue
+++ b/src/admin/pages/ReverseWithdrawalTransactions.vue
@@ -437,7 +437,6 @@ export default {
 
 .dokan-reverse-withdrawal-transactions {
     .dokan-reverse-withdrawal-fact-card {
-        margin: 0px -10px;
         display: flex;
         flex-wrap: wrap;
     }
diff --git a/src/admin/pages/VendorAccountFields.vue b/src/admin/pages/VendorAccountFields.vue
index 363f9fbc81..a793021b36 100644
--- a/src/admin/pages/VendorAccountFields.vue
+++ b/src/admin/pages/VendorAccountFields.vue
@@ -6,19 +6,19 @@
 
         <div class="content-body">
             <div class="vendor-image" v-if="! getId()">
-                <div class="picture">
-                    <p class="picture-header">{{ __( 'Vendor Picture', 'dokan-lite' ) }}</p>
+                <div class="picture flex flex-col justify-center">
+                    <p class="picture-header mb-4">{{ __( 'Vendor Picture', 'dokan-lite' ) }}</p>
 
                     <div class="profile-image">
                         <upload-image @uploadedImage="uploadGravatar" :croppingWidth="150" :croppingHeight="150" />
                     </div>
 
-                    <p class="picture-footer"
+                    <p class="picture-footer mt-4"
                         v-html="sprintf( __( 'You can change your profile picture on %s', 'dokan-lite' ), '<a href=\'https://gravatar.com/\' target=\'_blank\'>Gravatar</a>' )"
                     />
                 </div>
 
-                <div :class="['picture banner', {'has-banner': vendorInfo.banner_id}]">
+                <div class='!pt-0 !flex !flex-col !justify-center !items-center' :class="['picture banner', {'has-banner': vendorInfo.banner_id}]">
                     <div class="banner-image">
                         <upload-image @uploadedImage="uploadBanner" :showButton="showButton" :buttonLabel="__( 'Upload Banner', 'dokan-lite' )" />
                     </div>
diff --git a/src/admin/pages/VendorPaymentFields.vue b/src/admin/pages/VendorPaymentFields.vue
index 718d4c2b02..0051a6e2e2 100644
--- a/src/admin/pages/VendorPaymentFields.vue
+++ b/src/admin/pages/VendorPaymentFields.vue
@@ -5,7 +5,7 @@
         </div>
 
         <div class="content-body">
-            <div class="dokan-form-group">
+            <div class="dokan-form-group flex flex-wrap">
                 <div class="column">
                     <label for="account-name">{{ __( 'Account Name', 'dokan-lite') }}</label>
                     <input type="text" id="account-name" class="dokan-form-input" v-model="vendorInfo.payment.bank.ac_name" :placeholder="__( 'Account Name', 'dokan-lite')">
diff --git a/src/admin/pages/Withdraw.vue b/src/admin/pages/Withdraw.vue
index b4e1402190..7fb30ba11d 100644
--- a/src/admin/pages/Withdraw.vue
+++ b/src/admin/pages/Withdraw.vue
@@ -11,7 +11,7 @@
                 @close="showModal = false"
             >
                 <template slot="body">
-                    <textarea v-model="editing.note" rows="3"></textarea>
+                    <textarea class='p-2' v-model="editing.note" rows="3"></textarea>
                 </template>
 
                 <template slot="footer">