transaction UI refactoring

resources/js/components/Others/ColorLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <b class="color-label" :class="color">
+    <b class="color-label text-xs rounded-lg" :class="color">
         <slot></slot>
     </b>
 </template>
@@ -17,9 +17,7 @@
 
     .color-label {
         text-transform: capitalize;
-        @include font-size(12);
         display: inline-block;
-        border-radius: 6px;
         font-weight: 700;
         padding: 4px 6px;
 

resources/js/components/Others/Forms/InfoBox.vue

@@ -87,6 +87,18 @@
         .info-box {
             background: $dark_mode_foreground;
 
+			&.error {
+				background: rgba($danger, 0.1);
+
+				p, a {
+					color: $danger;
+				}
+
+				a {
+					text-decoration: underline;
+				}
+			}
+
             p {
                 color: $dark_mode_text_primary;
             }

resources/js/helpers/functionHelpers.js

@@ -358,6 +358,13 @@ const FunctionHelpers = {
             }[type]
         }
 
+        Vue.prototype.$getTransactionStatusColor = function (type) {
+            return {
+                'completed': 'green',
+                'error': 'red',
+            }[type]
+        }
+
         Vue.prototype.$getTransactionTypeTextColor = function (type) {
 
             return {

resources/js/views/User/MeteredSubscription.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
 
-		<!--Usage Estimates-->
+		<!--Failed Payments-->
 		<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
 			<FormLabel icon="frown">
                 {{ $t('Failed Payments') }}
@@ -27,7 +27,7 @@
 					</b>
 				</div>
 				<div class="text-left w-1/4">
-					<span class="text-sm font-bold text-gray-560">
+					<span class="text-sm font-bold text-gray-560 capitalize">
 						{{ $t(payment.data.attributes.source) }}
 					</span>
 				</div>
@@ -43,7 +43,7 @@
 				</div>
 			</div>
 
-			<InfoBox type="error" class="mt-4" style="margin-bottom: 0">
+			<InfoBox type="error" class="mt-7" style="margin-bottom: 0">
 				<p v-html="$t('Uh-oh! We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we\'ll give it another try!')"></p>
 			</InfoBox>
 		</div>
@@ -257,12 +257,14 @@
 							</span>
                         </td>
                         <td>
-							<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
+							<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
                                 {{ row.data.attributes.status }}
 							</ColorLabel>
-							<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
-                                {{ row.data.attributes.type }}
-							</ColorLabel>
+                        </td>
+						<td class="py-4">
+                            <span class="text-sm font-bold capitalize">
+								{{ $t(row.data.attributes.type) }}
+							</span>
                         </td>
                         <td>
                             <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
@@ -366,6 +368,11 @@
 						field: 'status',
 						sortable: true
 					},
+					{
+						label: this.$t('Type'),
+						field: 'status',
+						sortable: true
+					},
 					{
 						label: this.$t('admin_page_invoices.table.total'),
 						field: 'amount',