chore: Clean up

app/javascript/dashboard/routes/dashboard/settings/billing-v2/billing-v2.routes.js

@@ -1,33 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
-import SettingsWrapper from '../SettingsWrapper.vue';
-import IndexV2 from './IndexV2.vue';
-
-export default {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/settings/billing-v2'),
-      meta: {
-        permissions: ['administrator'],
-        installationTypes: [INSTALLATION_TYPES.CLOUD],
-      },
-      component: SettingsWrapper,
-      props: {
-        headerTitle: 'BILLING_SETTINGS_V2.TITLE',
-        icon: 'credit-card-person',
-        showNewButton: false,
-      },
-      children: [
-        {
-          path: '',
-          name: 'billing_settings_v2_index',
-          component: IndexV2,
-          meta: {
-            installationTypes: [INSTALLATION_TYPES.CLOUD],
-            permissions: ['administrator'],
-          },
-        },
-      ],
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditGrants.vue

@@ -59,7 +59,7 @@ const getCategoryConfig = category =>
       <div
         v-for="grant in sortedGrants"
         :key="grant.id"
-        class="flex items-center justify-between gap-4 p-3 rounded-lg border border-n-weak"
+        class="flex items-center justify-between gap-4 p-3 rounded-lg -outline-offset-1 outline outline-1 outline-n-weak"
         :class="{ 'opacity-60': grant.voided_at }"
       >
         <div class="flex items-center gap-2.5 min-w-0 flex-1">

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditsBalance.vue

@@ -50,9 +50,6 @@ const formatAmount = amount => {
     class="p-5 rounded-xl outline outline-1 outline-n-weak bg-n-solid-1 mx-5 mt-5"
   >
     <div class="p-4 rounded-lg bg-n-slate-2 dark:bg-n-solid-2 mb-4">
-      <p class="text-xs text-n-slate-11 mb-1">
-        {{ t('BILLING_SETTINGS_V2.CREDITS_BALANCE.CREDITS') }}
-      </p>
       <div class="flex items-baseline gap-2 mb-1">
         <span class="text-4xl font-bold text-n-slate-12">
           {{ formatAmount(currentBalance) }}

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/PlanSummary.vue

@@ -44,11 +44,11 @@ const props = defineProps({
   },
   updatingDirection: {
     type: String,
-    default: null, // 'increase' or 'decrease'
+    default: null,
   },
 });
 
-const emit = defineEmits(['view-all-plans', 'cancel-plan', 'updateSeats']);
+const emit = defineEmits(['viewAllPlans', 'cancelPlan', 'updateSeats']);
 
 const { t } = useI18n();
 
@@ -203,7 +203,7 @@ const handleIncreaseSeats = () => {
         variant="faded"
         color="slate"
         size="sm"
-        @click="emit('view-all-plans')"
+        @click="emit('viewAllPlans')"
       >
         {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.VIEW_ALL_PLANS') }}
       </Button>
@@ -212,7 +212,7 @@ const handleIncreaseSeats = () => {
         variant="faded"
         color="ruby"
         size="sm"
-        @click="emit('cancel-plan')"
+        @click="emit('cancelPlan')"
       >
         {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.CANCEL_PLAN') }}
       </Button>

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/PlansGrid.vue

@@ -55,16 +55,16 @@ const formatNumber = num => {
       <div
         v-for="plan in plans"
         :key="plan.id || plan.display_name"
-        class="relative p-4 rounded-xl border transition-all"
+        class="relative p-4 rounded-xl -outline-offset-1 outline outline-1 transition-all"
         :class="
           isCurrentPlan(plan)
-            ? 'border-n-blue-8 bg-n-blue-3'
-            : 'border-n-weak hover:border-n-slate-8 hover:shadow-sm'
+            ? 'outline-n-blue-8 bg-n-blue-3'
+            : 'outline-n-weak hover:outline-n-strong hover:shadow-sm'
         "
       >
         <div
           v-if="plan.recommended"
-          class="absolute -top-2 -right-2 px-2 py-0.5 bg-n-teal-9 text-white text-xs font-semibold rounded-md"
+          class="absolute -top-2 ltr:right-2 rtl:left-2 px-2 py-0.5 bg-n-teal-9 text-white text-xs font-semibold rounded-md"
         >
           {{ t('BILLING_SETTINGS_V2.PRICING_PLANS.RECOMMENDED') }}
         </div>

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SubscribeDialog.vue

@@ -153,9 +153,7 @@ defineExpose({
             {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.CREDITS') }}
           </span>
         </div>
-        <div
-          class="flex justify-between text-sm pt-2 border-t border-n-blue-4 dark:border-n-blue-5"
-        >
+        <div class="flex justify-between text-sm pt-2 border-t border-n-blue-4">
           <span class="font-semibold text-n-slate-12">
             {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.MONTHLY_TOTAL') }}
           </span>

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/TopupOptions.vue

@@ -72,7 +72,7 @@ const handleTopup = async data => {
       <div
         v-for="option in options"
         :key="option.id"
-        class="p-4 border border-n-weak rounded-lg hover:border-b-500 hover:shadow-sm transition-all cursor-pointer"
+        class="p-4 -outline-offset-1 outline outline-1 outline-n-weak rounded-lg hover:outline-n-strong hover:shadow-sm transition-all cursor-pointer"
         @click="openTopupDialog(option)"
       >
         <div class="text-center">