Fix: colors→blue, logo→blue, Stripe portal URL, CSV export error handling

Sai Sridhar Tarra · claude · Sai Sridhar Tarra · commit 82909aca5243 · 2026-03-17T16:53:37.000+05:30
Colors: - Revert tailwind primary palette back to blue (#2563eb primary-600) - Revert all -violet- classes back to -blue- across 12 files Logo (Threadly): - Update icon.svg, logo.svg, logo-dark.svg gradients purple→blue (#3b82f6→#1d4ed8) - Wordmark accent 'ly': purple→blue (#2563eb); dark variant→#60a5fa - Third thread line shortened for visual depth (43→37) in both icon + logo Stripe: - Fix create_billing_portal_session: replace hardcoded https://inboxiq.app/billing with dynamic FRONTEND_URL from settings CSV Export: - Add session guard (throw if no access_token) - Add HTTP status check before calling .blob() — was silently trying to parse error responses as binary data - Append/remove anchor to DOM for reliable cross-browser download trigger - Rename downloaded file from inboxiq-export-* to threadly-export-* Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/backend/services/stripe_service.py b/backend/services/stripe_service.py
@@ -119,9 +119,10 @@ async def create_billing_portal_session(customer_id: str) -> str | None:
     subscription.  Returns the portal URL.
     """
     try:
+        frontend_url = settings.FRONTEND_URL.rstrip("/") if settings.FRONTEND_URL else "http://localhost:3000"
         session = stripe.billing_portal.Session.create(
             customer=customer_id,
-            return_url="https://inboxiq.app/billing",
+            return_url=f"{frontend_url}/billing",
         )
         return session.url
     except Exception as exc:
diff --git a/frontend/components/CategoryBadge.tsx b/frontend/components/CategoryBadge.tsx
@@ -26,7 +26,7 @@ const categoryConfig: Record<
   },
   needs_response: {
     label: 'Needs Response',
-    classes: 'bg-violet-100 dark:bg-violet-900/20 text-violet-700 dark:text-violet-400 border border-violet-200 dark:border-violet-800',
+    classes: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800',
     Icon: MessageSquare,
   },
   follow_up: {
diff --git a/frontend/components/EmailCard.tsx b/frontend/components/EmailCard.tsx
@@ -20,8 +20,8 @@ interface EmailCardProps {
 
 // Gradient colors for avatars based on first letter
 const AVATAR_GRADIENTS = [
-  'from-violet-400 to-violet-600',
-  'from-violet-400 to-violet-600',
+  'from-blue-400 to-blue-600',
+  'from-blue-400 to-blue-600',
   'from-emerald-400 to-emerald-600',
   'from-rose-400 to-rose-600',
   'from-amber-400 to-amber-600',
@@ -155,7 +155,7 @@ export default function EmailCard({ email, className, onDismiss, selected, onTog
               {/* Snooze button */}
               <button
                 onClick={handleSnoozeClick}
-                className="opacity-0 group-hover:opacity-100 rounded p-0.5 text-gray-300 dark:text-gray-600 hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/20 transition-all duration-150"
+                className="opacity-0 group-hover:opacity-100 rounded p-0.5 text-gray-300 dark:text-gray-600 hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-150"
                 title="Snooze"
               >
                 <AlarmClock className="h-3.5 w-3.5" />
@@ -200,7 +200,7 @@ export default function EmailCard({ email, className, onDismiss, selected, onTog
               </span>
             )}
             {isSnoozed && (
-              <span className="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-600 border border-violet-100">
+              <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600 border border-blue-100">
                 <AlarmClock className="h-3 w-3" />
                 Snoozed
               </span>
diff --git a/frontend/components/SnoozeModal.tsx b/frontend/components/SnoozeModal.tsx
@@ -79,7 +79,7 @@ export default function SnoozeModal({ emailId, currentSnooze, onSnoozed, onClose
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-700">
           <div className="flex items-center gap-2">
-            <AlarmClock className="h-4 w-4 text-violet-600" />
+            <AlarmClock className="h-4 w-4 text-blue-600" />
             <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Snooze email</h2>
           </div>
           <button
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
@@ -205,16 +205,20 @@ export const emailsApi = {
 
   exportCSV: async (): Promise<void> => {
     const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) throw new Error('Not authenticated');
     const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
     const res = await fetch(`${base}/api/emails/export`, {
-      headers: { Authorization: `Bearer ${session?.access_token}` },
+      headers: { Authorization: `Bearer ${session.access_token}` },
     });
+    if (!res.ok) throw new Error(`Export failed: ${res.status}`);
     const blob = await res.blob();
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `inboxiq-export-${new Date().toISOString().split('T')[0]}.csv`;
+    a.download = `threadly-export-${new Date().toISOString().split('T')[0]}.csv`;
+    document.body.appendChild(a);
     a.click();
+    document.body.removeChild(a);
     URL.revokeObjectURL(url);
   },
 
diff --git a/frontend/pages/admin/index.tsx b/frontend/pages/admin/index.tsx
@@ -127,7 +127,7 @@ export default function AdminPage() {
                   icon={BarChart2}
                   label="Emails Today"
                   value={stats.emails_today}
-                  color="bg-violet-600"
+                  color="bg-blue-600"
                 />
               </div>
 
diff --git a/frontend/pages/analytics/index.tsx b/frontend/pages/analytics/index.tsx
@@ -36,8 +36,8 @@ type SenderInsight = {
 };
 
 const SENDER_GRADIENTS = [
-  'from-violet-400 to-violet-600',
-  'from-violet-400 to-violet-600',
+  'from-blue-400 to-blue-600',
+  'from-blue-400 to-blue-600',
   'from-emerald-400 to-emerald-600',
   'from-rose-400 to-rose-600',
   'from-amber-400 to-amber-600',
@@ -383,7 +383,7 @@ export default function AnalyticsPage() {
           {(loading || responseTime) && (
             <div className="card p-5 animate-slide-up">
               <div className="flex items-center gap-2 mb-5">
-                <TrendingUp className="h-4 w-4 text-violet-600" />
+                <TrendingUp className="h-4 w-4 text-blue-600" />
                 <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Response Time Analytics</h2>
                 {responseTime && (
                   <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">
@@ -407,7 +407,7 @@ export default function AnalyticsPage() {
                         </div>
                         <div className="h-2 w-full rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                           <div
-                            className="h-full rounded-full bg-violet-500 transition-all duration-700"
+                            className="h-full rounded-full bg-blue-500 transition-all duration-700"
                             style={{ width: `${Math.min((hours / (responseTime.overall_avg_hours * 2 || 1)) * 100, 100)}%` }}
                           />
                         </div>
diff --git a/frontend/pages/billing/index.tsx b/frontend/pages/billing/index.tsx
@@ -72,7 +72,7 @@ const PLANS: Plan[] = [
 
 const statusConfig: Record<string, { label: string; classes: string }> = {
   active: { label: 'Active', classes: 'bg-green-50 text-green-700 border border-green-200' },
-  trialing: { label: 'Trial', classes: 'bg-violet-50 text-violet-700 border border-violet-200' },
+  trialing: { label: 'Trial', classes: 'bg-blue-50 text-blue-700 border border-blue-200' },
   past_due: { label: 'Past Due', classes: 'bg-red-50 text-red-700 border border-red-200' },
   canceled: { label: 'Canceled', classes: 'bg-gray-100 text-gray-600 border border-gray-200' },
   none: { label: 'Free', classes: 'bg-gray-100 text-gray-600 border border-gray-200' },
diff --git a/frontend/pages/crm/index.tsx b/frontend/pages/crm/index.tsx
@@ -27,8 +27,8 @@ import toast from 'react-hot-toast';
 // ─── Constants ───────────────────────────────────────────────────────────────
 
 const SENDER_GRADIENTS = [
-  'from-violet-400 to-violet-600',
-  'from-violet-400 to-violet-600',
+  'from-blue-400 to-blue-600',
+  'from-blue-400 to-blue-600',
   'from-emerald-400 to-emerald-600',
   'from-rose-400 to-rose-600',
   'from-amber-400 to-amber-600',
@@ -49,7 +49,7 @@ const CATEGORY_CONFIG: Record<string, { label: string; classes: string }> = {
   },
   needs_response: {
     label: 'Needs Response',
-    classes: 'bg-violet-100 dark:bg-violet-900/20 text-violet-700 dark:text-violet-400 border border-violet-200 dark:border-violet-800',
+    classes: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800',
   },
   follow_up: {
     label: 'Follow Up',
@@ -388,9 +388,9 @@ interface PipelineCard {
 }
 
 const PIPELINE_STAGES: { id: PipelineStage; label: string; color: string; bg: string }[] = [
-  { id: 'new_lead',  label: 'New Lead',       color: 'text-violet-700 dark:text-violet-300',   bg: 'bg-violet-50 dark:bg-violet-900/20 border-violet-200 dark:border-violet-700' },
+  { id: 'new_lead',  label: 'New Lead',       color: 'text-blue-700 dark:text-blue-300',   bg: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700' },
   { id: 'contacted', label: 'Contacted',      color: 'text-amber-700 dark:text-amber-300', bg: 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-700' },
-  { id: 'proposal',  label: 'Proposal Sent',  color: 'text-violet-700 dark:text-violet-300', bg: 'bg-violet-50 dark:bg-violet-900/20 border-violet-200 dark:border-violet-700' },
+  { id: 'proposal',  label: 'Proposal Sent',  color: 'text-blue-700 dark:text-blue-300', bg: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700' },
   { id: 'won',       label: 'Won',            color: 'text-emerald-700 dark:text-emerald-300', bg: 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-700' },
   { id: 'lost',      label: 'Lost',           color: 'text-gray-600 dark:text-gray-400',   bg: 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700' },
 ];
diff --git a/frontend/pages/email/[id].tsx b/frontend/pages/email/[id].tsx
@@ -77,7 +77,7 @@ function getFileColor(mimeType: string): string {
   if (mimeType.startsWith('image/'))   return 'text-pink-500 bg-pink-50';
   if (mimeType.includes('pdf'))        return 'text-red-500 bg-red-50';
   if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'text-green-600 bg-green-50';
-  if (mimeType.includes('word') || mimeType.includes('document')) return 'text-violet-500 bg-violet-50';
+  if (mimeType.includes('word') || mimeType.includes('document')) return 'text-blue-500 bg-blue-50';
   return 'text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700';
 }
 
@@ -550,7 +550,7 @@ export default function EmailDetailPage() {
                 className="btn-secondary text-sm"
                 title="Snooze"
               >
-                <AlarmClock className="h-4 w-4 text-violet-500" />
+                <AlarmClock className="h-4 w-4 text-blue-500" />
                 <span className="hidden sm:inline ml-1.5">Snooze</span>
               </button>
 
@@ -563,7 +563,7 @@ export default function EmailDetailPage() {
               >
                 {loadingThreadSummary
                   ? <Loader2 className="h-4 w-4 animate-spin mr-1.5" />
-                  : <Layers className="h-4 w-4 mr-1.5 text-violet-500" />}
+                  : <Layers className="h-4 w-4 mr-1.5 text-blue-500" />}
                 <span className="hidden sm:inline">Thread</span>
               </button>
 
@@ -727,36 +727,36 @@ export default function EmailDetailPage() {
 
             {/* Thread Summary Card */}
             {threadSummary && threadSummary.status === 'summarized' && (
-              <div className="mt-4 rounded-lg border border-violet-200 dark:border-violet-700 bg-violet-50 dark:bg-violet-900/20 px-4 py-3">
+              <div className="mt-4 rounded-lg border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 px-4 py-3">
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex items-start gap-2 min-w-0 flex-1">
-                    <Layers className="h-4 w-4 text-violet-600 dark:text-violet-400 flex-shrink-0 mt-0.5" />
+                    <Layers className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-semibold text-violet-800 dark:text-violet-300">
+                      <p className="text-sm font-semibold text-blue-800 dark:text-blue-300">
                         Thread Summary ({threadSummary.thread_length} emails)
                       </p>
-                      <p className="mt-1 text-xs text-violet-700 dark:text-violet-400 leading-relaxed">
+                      <p className="mt-1 text-xs text-blue-700 dark:text-blue-400 leading-relaxed">
                         {threadSummary.summary}
                       </p>
                       {threadSummary.key_points.length > 0 && (
                         <ul className="mt-2 space-y-0.5">
                           {threadSummary.key_points.map((pt, i) => (
-                            <li key={i} className="text-xs text-violet-700 dark:text-violet-400 flex items-start gap-1.5">
+                            <li key={i} className="text-xs text-blue-700 dark:text-blue-400 flex items-start gap-1.5">
                               <span className="flex-shrink-0 mt-0.5">•</span>{pt}
                             </li>
                           ))}
                         </ul>
                       )}
                       {threadSummary.next_action && (
-                        <p className="mt-2 text-xs font-medium text-violet-800 dark:text-violet-300">
+                        <p className="mt-2 text-xs font-medium text-blue-800 dark:text-blue-300">
                           Next: {threadSummary.next_action}
                         </p>
                       )}
                     </div>
                   </div>
                   <button
                     onClick={() => setThreadSummary(null)}
-                    className="flex-shrink-0 p-1 rounded text-violet-500 hover:text-violet-700 dark:hover:text-violet-300 hover:bg-violet-100 dark:hover:bg-violet-800/40 transition-colors"
+                    className="flex-shrink-0 p-1 rounded text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800/40 transition-colors"
                   >
                     <X className="h-3.5 w-3.5" />
                   </button>
@@ -1001,7 +1001,7 @@ export default function EmailDetailPage() {
           {/* Reply Editor */}
           <div className="animate-slide-up stagger-4">
             <div className="flex items-center gap-2 mb-3">
-              <MessageSquare className="h-4 w-4 text-violet-600" />
+              <MessageSquare className="h-4 w-4 text-blue-600" />
               <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">AI Reply Draft</h2>
             </div>
             <ReplyEditor emailId={email.id} draft={replyDraft} onSent={() => mutateEmail()} />
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -69,7 +69,7 @@ function Hero() {
           <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-gray-900 tracking-tight leading-none">
             Your AI-Powered
             <br />
-            <span className="bg-gradient-to-r from-primary-600 to-violet-500 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-primary-600 to-blue-500 bg-clip-text text-transparent">
               Email Command Center
             </span>
           </h1>
@@ -130,7 +130,7 @@ function Hero() {
                 {/* Stats row */}
                 <div className="grid grid-cols-4 gap-2 mb-4">
                   {[
-                    { label: 'Total Emails', val: '247', color: 'bg-violet-500' },
+                    { label: 'Total Emails', val: '247', color: 'bg-blue-500' },
                     { label: 'Urgent', val: '8', color: 'bg-red-500' },
                     { label: 'Need Reply', val: '23', color: 'bg-amber-500' },
                     { label: 'Actions', val: '41', color: 'bg-green-500' },
@@ -146,7 +146,7 @@ function Hero() {
                 <div className="space-y-2">
                   {[
                     { from: 'Sarah M.', subject: 'Urgent: Contract needs signature today', cat: 'URGENT', catColor: 'bg-red-100 text-red-700', dot: 'bg-red-500' },
-                    { from: 'Tech Corp', subject: 'Invoice #2847 — payment overdue', cat: 'RESPONSE', catColor: 'bg-violet-100 text-violet-700', dot: 'bg-violet-500' },
+                    { from: 'Tech Corp', subject: 'Invoice #2847 — payment overdue', cat: 'RESPONSE', catColor: 'bg-blue-100 text-blue-700', dot: 'bg-blue-500' },
                     { from: 'Mike R.', subject: 'Following up on last week\'s proposal', cat: 'FOLLOW UP', catColor: 'bg-amber-100 text-amber-700', dot: 'bg-amber-500' },
                   ].map((email) => (
                     <div key={email.subject} className="bg-white rounded-lg p-3 border border-gray-100 shadow-sm flex items-start gap-3">
@@ -165,7 +165,7 @@ function Hero() {
             </div>
           </div>
           {/* Glow effect */}
-          <div className="absolute -inset-4 -z-10 bg-gradient-to-r from-primary-100 to-violet-100 opacity-60 blur-3xl rounded-3xl" />
+          <div className="absolute -inset-4 -z-10 bg-gradient-to-r from-primary-100 to-blue-100 opacity-60 blur-3xl rounded-3xl" />
         </div>
       </div>
     </section>
@@ -192,8 +192,8 @@ const features = [
     icon: MessageSquare,
     title: 'Smart Reply Drafts',
     description: 'Get AI-crafted reply drafts tailored to your tone and business context. Edit and send in seconds — or let them go out automatically.',
-    color: 'text-violet-600',
-    bg: 'bg-violet-50',
+    color: 'text-blue-600',
+    bg: 'bg-blue-50',
   },
   {
     icon: Inbox,
@@ -456,7 +456,7 @@ const testimonials = [
     name: 'Marcus Johnson',
     role: 'Freelance Consultant',
     avatar: 'MJ',
-    avatarColor: 'from-violet-400 to-violet-600',
+    avatarColor: 'from-blue-400 to-blue-600',
     quote: "I was skeptical about AI email tools but Threadly blew me away. It caught an urgent client message I would have missed during a busy week. That single email saved a $15k contract.",
     stars: 5,
   },
diff --git a/frontend/pages/settings/index.tsx b/frontend/pages/settings/index.tsx
@@ -197,8 +197,8 @@ function OutlookIntegration() {
     <div className="card p-6">
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-start gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50">
-            <Mail className="h-5 w-5 text-violet-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50">
+            <Mail className="h-5 w-5 text-blue-500" />
           </div>
           <div>
             <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">Outlook / Microsoft 365</h3>
@@ -1292,8 +1292,8 @@ function DataTab() {
     <div className="space-y-6 max-w-2xl">
       <div className="card p-6">
         <div className="flex items-start gap-3 mb-4">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50 dark:bg-violet-900/20">
-            <Download className="h-5 w-5 text-violet-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/20">
+            <Download className="h-5 w-5 text-blue-500" />
           </div>
           <div>
             <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">Export My Data</h3>
@@ -1305,7 +1305,7 @@ function DataTab() {
         <button
           onClick={handleExport}
           disabled={exporting}
-          className="inline-flex items-center gap-2 rounded-xl bg-violet-600 hover:bg-violet-700 px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
+          className="inline-flex items-center gap-2 rounded-xl bg-blue-600 hover:bg-blue-700 px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
         >
           {exporting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
           {exporting ? 'Exporting...' : 'Download My Data'}
diff --git a/frontend/pages/snoozed/index.tsx b/frontend/pages/snoozed/index.tsx
@@ -42,9 +42,9 @@ export default function SnoozedPage() {
       <Layout title="Snoozed">
         <div className="max-w-4xl mx-auto space-y-4">
           <div className="flex items-center gap-2">
-            <AlarmClock className="h-5 w-5 text-violet-600" />
+            <AlarmClock className="h-5 w-5 text-blue-600" />
             <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Snoozed Emails</h1>
-            <span className="rounded-full bg-violet-50 dark:bg-violet-900/30 px-2.5 py-0.5 text-xs font-medium text-violet-700 dark:text-violet-300">
+            <span className="rounded-full bg-blue-50 dark:bg-blue-900/30 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:text-blue-300">
               {list.length}
             </span>
           </div>
diff --git a/frontend/pages/team/index.tsx b/frontend/pages/team/index.tsx
diff --git a/frontend/public/icon.svg b/frontend/public/icon.svg
diff --git a/frontend/public/logo-dark.svg b/frontend/public/logo-dark.svg
diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
