dark mode revision

resources/js/components/Subscription/UserBillingAlerts.vue

@@ -21,7 +21,7 @@
                 />
             </b>
 
-            <b class="block text-sm text-gray-400">
+            <b class="block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('Alert will be triggered after you reach the value above.') }}
             </b>
         </div>

resources/js/components/Subscription/UserFixedSubscriptionDetail.vue

@@ -8,13 +8,13 @@
             {{ status }}
         </b>
 
-        <b class="mb-3 mb-8 block text-sm text-gray-400">
+        <b class="mb-3 mb-8 block text-sm dark:text-gray-500 text-gray-400">
             {{ subscription.data.relationships.plan.data.attributes.name }} /
             {{ price }}
         </b>
 
         <div v-for="(limit, i) in limitations" :key="i" :class="{ 'mb-6': Object.keys(limitations).length - 1 !== i }">
-            <b class="mb-3 block text-sm text-gray-400">
+            <b class="mb-3 block text-sm dark:text-gray-500 text-gray-400">
                 {{ limit.message }}
             </b>
             <ProgressLine :data="limit.distribution" />

resources/js/components/Subscription/UserStoredPaymentMethods.vue

@@ -22,7 +22,7 @@
             <!-- Card -->
             <PaymentCard v-for="card in user.data.relationships.creditCards.data" :key="card.data.id" :card="card" />
 
-            <small class="hidden pt-3 text-xs leading-none text-gray-500 sm:block">
+            <small class="hidden pt-3 text-xs leading-none dark:text-gray-500 text-gray-500 sm:block">
                 {{ $t('We are settling your payment automatically via your saved credit card.') }}
             </small>
         </div>
@@ -46,6 +46,10 @@
                 <div v-if="stripe.isInitialization" class="relative mb-6 h-10">
                     <Spinner />
                 </div>
+				<InfoBox v-if="config.isDemo && !stripe.isInitialization">
+					<p>For adding test credit card please use <b class="text-theme">4242 4242 4242 4242</b> as a card number, <b class="text-theme">11/22</b>
+						as the expiration date and <b class="text-theme">123</b> as CVC number and ZIP <b class="text-theme">12345</b> if required.</p>
+				</InfoBox>
                 <div id="payment-element">
                     <!-- Elements will create form elements here -->
                 </div>
@@ -57,7 +61,7 @@
                 >
                     {{ $t('Store My Credit Card') }}
                 </ButtonBase>
-                <div id="error-message">
+                <div id="error-message" class="pt-2 text-xs text-rose-600">
                     <!-- Display error message to your customers here -->
                 </div>
             </form>
@@ -73,6 +77,7 @@ import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import { loadStripe } from '@stripe/stripe-js'
 import axios from 'axios'
+import InfoBox from "../Others/Forms/InfoBox";
 
 // Define stripe variables
 let stripe,
@@ -81,6 +86,7 @@ let stripe,
 export default {
     name: 'UserStoredPaymentMethods',
     components: {
+		InfoBox,
         ButtonBase,
         FormLabel,
         PaymentCard,
@@ -115,6 +121,15 @@ export default {
     },
     methods: {
         async storeStripePaymentMethod() {
+			if (this.config.isDemo && this.user.data.attributes.email === 'ho**@hi5ve.digital') {
+				events.$emit('toaster', {
+					type: 'success',
+					message: this.$t('Your credit card was stored successfully'),
+				})
+
+				return
+			}
+
             this.stripe.storingStripePaymentMethod = true
 
             const { error } = await stripe.confirmSetup({

resources/js/components/Subscription/UserUsageEstimates.vue

@@ -8,7 +8,7 @@
             {{ user.data.meta.usages.costEstimate }}
         </b>
 
-        <b class="mb-3 mb-5 block text-sm text-gray-400">
+        <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
             {{ user.data.relationships.subscription.data.attributes.updated_at }}
             {{ $t('till now') }}
         </b>
@@ -22,7 +22,7 @@
                 <b class="text-sm font-bold leading-none">
                     {{ $t(usage.feature) }}
                 </b>
-                <small class="hidden pt-2 text-xs leading-none text-gray-500 sm:block">
+                <small class="hidden pt-2 text-xs leading-none dark:text-gray-500 text-gray-500 sm:block">
                     {{ $t(`feature_usage_desc_${usage.feature}`) }}
                 </small>
             </div>