create token UI refactoring

resources/js/components/Others/CreatePersonalTokenPopup.vue

@@ -70,7 +70,7 @@ import {events} from '/resources/js/bus'
 import axios from 'axios'
 
 export default {
-	name: "CreatePersonaTokenPopup",
+	name: "CreatePersonalTokenPopup",
 	components: {
 		ValidationProvider,
 		ValidationObserver,

resources/js/components/Others/Popup/PopupHeader.vue

@@ -15,7 +15,7 @@
 				{{ title }}
 			</b>
         </div>
-        <div @click="closePopup" class="cursor-pointer">
+        <div @click="closePopup" class="cursor-pointer p-3 -m-3">
             <x-icon size="14" class="hover-text-theme vue-feather" />
         </div>
     </div>

resources/js/components/Subscription/UserUsageEstimates.vue

@@ -12,26 +12,24 @@
 			{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
 		</b>
 
-		<div>
-			<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
-				<div class="w-2/4 leading-none">
-					<b class="text-sm font-bold leading-none">
-						{{ $t(usage.feature) }}
-					</b>
-					<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
-						{{ $t(`feature_usage_desc_${usage.feature}`) }}
-					</small>
-				</div>
-				<div class="text-left w-1/4">
-					<span class="text-sm font-bold text-gray-560">
-						{{ usage.usage }}
-					</span>
-				</div>
-				<div class="text-right w-1/4">
-					<span class="text-sm font-bold text-theme">
-						{{ usage.cost }}
-					</span>
-				</div>
+		<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
+			<div class="w-2/4 leading-none">
+				<b class="text-sm font-bold leading-none">
+					{{ $t(usage.feature) }}
+				</b>
+				<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
+					{{ $t(`feature_usage_desc_${usage.feature}`) }}
+				</small>
+			</div>
+			<div class="text-left w-1/4">
+				<span class="text-sm font-bold text-gray-560">
+					{{ usage.usage }}
+				</span>
+			</div>
+			<div class="text-right w-1/4">
+				<span class="text-sm font-bold text-theme">
+					{{ usage.cost }}
+				</span>
 			</div>
 		</div>