change color

src/routes/overview/Overview.vue

@@ -1,13 +1,12 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
-import { useAuthStore } from '@/stores/auth';
 import { onMounted, ref } from 'vue';
+import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
 import StatsOverview from './components/StatsOverview.vue';
 
-const auth = useAuthStore()
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
 
@@ -53,14 +52,14 @@ const fetchDashboardData = async () => {
 onMounted(() => {
     fetchDashboardData();
 });
+
 </script>
 
 <template>
     <div class="dashboard-overview">
-        <PageHeader :title="`Welcome back, ${auth.user?.username}! 👋`" description="Here's what's happening with your videos."
-            :breadcrumbs="[
-                { label: 'Dashboard' }
-            ]" />
+        <PageHeader :title="NameGradient" description="Welcome back, Here's what's happening with your videos." :breadcrumbs="[
+            { label: 'Dashboard' }
+        ]" />
 
         <!-- Stats Grid -->
         <StatsOverview :loading="loading" :stats="stats" />

src/routes/overview/components/NameGradient.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="text-3xl font-bold text-gray-900 mb-1">
+        <span class=":uno: bg-[linear-gradient(130deg,#14a74b_0%,#22c55e_35%,#10b981_65%,#06b6d4_100%)] bg-clip-text text-transparent">Hello, {{ auth.user?.username }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth';
+
+const auth = useAuthStore()
+</script>

src/routes/plans/components/PlanPaymentHistory.vue

@@ -29,44 +29,64 @@ const getStatusSeverity = (status: string) => {
             return 'info';
     }
 };
+import { useToast } from 'primevue/usetoast';
+import ArrowDownTray from '@/components/icons/ArrowDownTray.vue';
+
+const toast = useToast();
+
+
+
+const downloadInvoice = (item: PaymentHistoryItem) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Downloading',
+        detail: `Downloading invoice #${item.invoiceId}...`,
+        life: 2000
+    });
+
+    // Simulate download delay
+    setTimeout(() => {
+        toast.add({
+            severity: 'success',
+            summary: 'Downloaded',
+            detail: `Invoice #${item.invoiceId} downloaded successfully`,
+            life: 3000
+        });
+    }, 1500);
+};
 </script>
 
 <template>
     <section>
         <h2 class="text-2xl font-bold mb-6 text-gray-900">Billing History</h2>
-        <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
-            <DataTable :value="history" tableStyle="min-width: 50rem"
-            :pt="{
-                thead: { class: 'bg-gray-50 border-b border-gray-200' },
-                headerRow: { class: 'text-gray-500 text-xs font-semibold uppercase tracking-wider' },
-                bodyRow: { class: 'text-gray-700 hover:bg-gray-50/50' }
-            }"
-            >
-            <template #empty>
-                <div class="text-center py-8 text-gray-500">No payment history found.</div>
-            </template>
-            <Column field="date" header="Date" class="font-medium"></Column>
-            <Column field="amount" header="Amount">
-                <template #body="slotProps">
-                    ${{ slotProps.data.amount }}
+        <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
+            <DataTable :value="history" responsiveLayout="scroll" class="w-full">
+                <template #empty>
+                    <div class="text-center py-8 text-gray-500">No payment history found.</div>
                 </template>
-            </Column>
-            <Column field="plan" header="Plan"></Column>
-            <Column field="status" header="Status">
+                <Column field="date" header="Date" class="font-medium"></Column>
+                <Column field="amount" header="Amount">
                     <template #body="slotProps">
-                    <Tag 
-                        :value="slotProps.data.status" 
-                        :severity="getStatusSeverity(slotProps.data.status)" 
-                        class="capitalize px-2 py-0.5 text-xs" 
-                        :rounded="true"
-                    />
-                </template>
-            </Column>
-            <Column header="" style="width: 3rem">
-                    <template #body>
-                    <Button icon="i-heroicons-arrow-down-tray" text rounded severity="secondary" size="small" />
+                        ${{ slotProps.data.amount }}
                     </template>
-            </Column>
+                </Column>
+                <Column field="plan" header="Plan"></Column>
+                <Column field="status" header="Status">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.status" :severity="getStatusSeverity(slotProps.data.status)"
+                            class="capitalize px-2 py-0.5 text-xs" :rounded="true" />
+                    </template>
+                </Column>
+                <!-- <Column header="" style="width: 3rem">
+                    <template #body="slotProps">
+                        <Button text rounded severity="secondary" size="small" @click="downloadInvoice(slotProps.data)"
+                            v-tooltip="'Download Invoice'">
+                            <template #icon>
+                                <ArrowDownTray class="w-5 h-5" />
+                            </template>
+                        </Button>
+                    </template>
+                </Column> -->
             </DataTable>
         </div>
     </section>

src/routes/plans/components/UsageStatsCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { formatBytes } from '@/lib/utils';
 import ProgressBar from 'primevue/progressbar';
 import { computed } from 'vue';
-import { formatBytes } from '@/lib/utils';
 
 const props = defineProps<{
     storageUsed: number;
@@ -15,7 +15,7 @@ const uploadsPercentage = computed(() => Math.min(Math.round((props.uploadsUsed
 </script>
 
 <template>
-    <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm flex flex-col justify-center">
+    <div class="bg-white border border-gray-200 rounded-2xl p-8 flex flex-col justify-center">
         <h3 class="text-lg font-bold text-gray-900 mb-6">Usage Statistics</h3>
         
         <div class="mb-6">

src/routes/profile/components/AccountStatusCard.vue

@@ -21,7 +21,7 @@ const formatBytes = (bytes: number) => {
 </script>
 
 <template>
-    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
+    <div class="bg-white border border-gray-200 rounded-2xl p-6">
         <h3 class="text-lg font-bold text-gray-900 mb-4">Account Status</h3>
         <div class="space-y-4">
             <div>

src/routes/profile/components/LinkedAccountsCard.vue

@@ -3,7 +3,7 @@ import Tag from 'primevue/tag';
 </script>
 
 <template>
-    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
+    <div class="bg-white border border-gray-200 rounded-2xl p-6">
         <h3 class="text-lg font-bold text-gray-900 mb-4">Linked Accounts</h3>
         <div class="space-y-3">
             <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:border-gray-200 transition-colors">

src/routes/profile/components/ProfileInfoCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ModelUser } from '@/api/client';
-import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
 
 defineProps<{
     user: ModelUser | null;
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
+    <div class="bg-white border border-gray-200 rounded-2xl p-8">
         <div class="flex items-center justify-between mb-6">
             <h3 class="text-xl font-bold text-gray-900">Personal Information</h3>
             <div class="flex gap-2">