Replace emoji icons with SVG brand logos in provider selection wizard

Agent-Logs-Url: https://github.com/christianlouis/InboxConverge/sessions/d14501d8-c118-48ef-a860-d329fda432b9 Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
2026-03-27 21:14:20 +00:00
parent 9a7faf49b6
commit b76f241b98
12 changed files with 88 additions and 15 deletions
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#FF0000"/>
+  <text x="24" y="21" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold" fill="white" text-anchor="middle">aol</text>
+  <circle cx="35" cy="14" r="3.5" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#1B75BB"/>
+  <text x="24" y="26" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold" fill="white" text-anchor="middle">freenet</text>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path fill="#4caf50" d="M45 16.2l-5 2.75-5 4.75V40h7a3 3 0 0 0 3-3V16.2z"/>
+  <path fill="#1e88e5" d="M3 16.2l3.5 2.75L13 23.7V40H6a3 3 0 0 1-3-3V16.2z"/>
+  <polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/>
+  <path fill="#c62828" d="M3 12.298V16.2l10 7.5V11.2L9.876 8.898C9.132 8.27 8.228 7.989 7.133 8.001 4.862 8.027 3 9.885 3 12.298z"/>
+  <path fill="#fbc02d" d="M45 12.298V16.2l-10 7.5V11.2l3.124-2.302C38.868 8.27 39.772 7.989 40.867 8.001 43.138 8.027 45 9.885 45 12.298z"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#003D82"/>
+  <text x="24" y="30" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">GMX</text>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#f5f5f7"/>
+  <!-- iCloud cloud shape in Apple blue -->
+  <path fill="#1d7aed"
+    d="M36 28.5a6.5 6.5 0 0 0-5.2-6.38A8 8 0 0 0 15.14 24H15a6 6 0 0 0 0 12h20a5 5 0 0 0 5-5 5 5 0 0 0-4-4.5z"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#003D8F"/>
+  <text x="24" y="22" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold" fill="white" text-anchor="middle">1&amp;1</text>
+  <text x="24" y="33" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold" fill="white" text-anchor="middle">IONOS</text>
+</svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <!-- Outlook circle background -->
+  <circle cx="24" cy="24" r="22" fill="#0078D4"/>
+  <!-- White O ring -->
+  <circle cx="21" cy="24" r="10" fill="white"/>
+  <circle cx="21" cy="24" r="6" fill="#0078D4"/>
+  <!-- Right envelope part -->
+  <rect x="29" y="17" width="13" height="14" rx="1" fill="white" opacity="0.9"/>
+  <path d="M29 18.5l6.5 5 6.5-5" fill="none" stroke="#0078D4" stroke-width="1.5"/>
+</svg>
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#2e7d32"/>
+  <!-- Stylised envelope with leaf accent -->
+  <rect x="9" y="16" width="30" height="20" rx="2" fill="none" stroke="white" stroke-width="2"/>
+  <path d="M9 18l15 10 15-10" fill="none" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+  <!-- Small leaf on top right -->
+  <path d="M35 12 Q39 10 40 14 Q36 15 35 12z" fill="#a5d6a7"/>
+</svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#E20074"/>
+  <!-- Telekom T shape -->
+  <!-- Horizontal bar -->
+  <rect x="8" y="14" width="32" height="6" rx="3" fill="white"/>
+  <!-- Vertical stem -->
+  <rect x="21" y="14" width="6" height="22" rx="0" fill="white"/>
+  <!-- Arc above T -->
+  <path d="M16 14 Q24 6 32 14" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#FF6600"/>
+  <text x="24" y="30" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold" fill="white" text-anchor="middle">WEB.DE</text>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <rect width="48" height="48" rx="6" fill="#5F01D1"/>
+  <!-- Yahoo Y! -->
+  <text x="24" y="31" font-family="Arial Black, Arial, sans-serif" font-size="22" font-weight="900" fill="white" text-anchor="middle">Y!</text>
+</svg>
@@ -6,7 +6,7 @@ import { ChevronRight, Mail, ArrowLeft } from 'lucide-react';
 interface ProviderPreset {
  id: string;
  name: string;
-  icon: string;
+  logo: string;
  domains: string[];
  imap_ssl?: { host: string; port: number } | null;
  pop3_ssl?: { host: string; port: number } | null;
@@ -30,7 +30,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'gmail',
    name: 'Gmail',
-    icon: '📧',
+    logo: '/providers/gmail.svg',
    domains: ['gmail.com', 'googlemail.com'],
    imap_ssl: { host: 'imap.gmail.com', port: 993 },
    pop3_ssl: { host: 'pop.gmail.com', port: 995 },
@@ -39,7 +39,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'gmx',
    name: 'GMX',
-    icon: '📮',
+    logo: '/providers/gmx.svg',
    domains: ['gmx.de', 'gmx.net', 'gmx.at', 'gmx.ch', 'gmx.com'],
    imap_ssl: { host: 'imap.gmx.net', port: 993 },
    pop3_ssl: { host: 'pop.gmx.net', port: 995 },
@@ -48,7 +48,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'webde',
    name: 'WEB.DE',
-    icon: '📬',
+    logo: '/providers/webde.svg',
    domains: ['web.de'],
    imap_ssl: { host: 'imap.web.de', port: 993 },
    pop3_ssl: { host: 'pop3.web.de', port: 995 },
@@ -57,7 +57,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'outlook',
    name: 'Outlook / Hotmail',
-    icon: '📨',
+    logo: '/providers/outlook.svg',
    domains: ['outlook.com', 'hotmail.com', 'live.com', 'msn.com', 'outlook.de'],
    imap_ssl: { host: 'outlook.office365.com', port: 993 },
    pop3_ssl: { host: 'outlook.office365.com', port: 995 },
@@ -66,7 +66,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'yahoo',
    name: 'Yahoo Mail',
-    icon: '💌',
+    logo: '/providers/yahoo.svg',
    domains: ['yahoo.com', 'yahoo.de', 'yahoo.co.uk', 'ymail.com'],
    imap_ssl: { host: 'imap.mail.yahoo.com', port: 993 },
    pop3_ssl: { host: 'pop.mail.yahoo.com', port: 995 },
@@ -75,7 +75,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'aol',
    name: 'AOL Mail',
-    icon: '📪',
+    logo: '/providers/aol.svg',
    domains: ['aol.com', 'aim.com'],
    imap_ssl: { host: 'imap.aol.com', port: 993 },
    pop3_ssl: { host: 'pop.aol.com', port: 995 },
@@ -84,7 +84,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'tonline',
    name: 'T-Online',
-    icon: '🇩🇪',
+    logo: '/providers/tonline.svg',
    domains: ['t-online.de'],
    imap_ssl: { host: 'secureimap.t-online.de', port: 993 },
    pop3_ssl: { host: 'securepop.t-online.de', port: 995 },
@@ -93,7 +93,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'ionos',
    name: '1&1 / IONOS',
-    icon: '🌐',
+    logo: '/providers/ionos.svg',
    domains: ['online.de', 'onlinehome.de', '1und1.de'],
    imap_ssl: { host: 'imap.ionos.de', port: 993 },
    pop3_ssl: { host: 'pop.ionos.de', port: 995 },
@@ -102,7 +102,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'freenet',
    name: 'Freenet',
-    icon: '📫',
+    logo: '/providers/freenet.svg',
    domains: ['freenet.de'],
    imap_ssl: { host: 'mx.freenet.de', port: 993 },
    pop3_ssl: { host: 'mx.freenet.de', port: 995 },
@@ -111,7 +111,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'icloud',
    name: 'iCloud Mail',
-    icon: '☁️',
+    logo: '/providers/icloud.svg',
    domains: ['icloud.com', 'me.com', 'mac.com'],
    imap_ssl: { host: 'imap.mail.me.com', port: 993 },
    pop3_ssl: null,
@@ -120,7 +120,7 @@ const PROVIDERS: ProviderPreset[] = [
  {
    id: 'posteo',
    name: 'Posteo',
-    icon: '🌿',
+    logo: '/providers/posteo.svg',
    domains: ['posteo.de', 'posteo.net'],
    imap_ssl: { host: 'posteo.de', port: 993 },
    pop3_ssl: null,
@@ -171,8 +171,9 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
        </button>

        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-          <h4 className="font-semibold text-blue-900 mb-2">
-            {selectedProvider.icon} {selectedProvider.name}
+          <h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+            <img src={selectedProvider.logo} alt={selectedProvider.name} className="w-6 h-6 object-contain rounded" />
+            {selectedProvider.name}
          </h4>
          <p className="text-sm text-blue-700 mb-1">
            Domains: {selectedProvider.domains.join(', ')}
@@ -247,7 +248,11 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
              onClick={() => handleProviderClick(provider)}
              className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-left"
            >
-              <span className="text-xl">{provider.icon}</span>
+              <img
+                src={provider.logo}
+                alt={provider.name}
+                className="w-6 h-6 object-contain rounded flex-shrink-0"
+              />
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-gray-900 truncate">{provider.name}</div>
              </div>