gitea-admin/gh-christianlouis-inboxconverge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo banner layout rework, Proton Mail provider, ProviderWizard sizing improvements

Browse Source 
Agent-Logs-Url: https://github.com/christianlouis/InboxConverge/sessions/8dc8f341-02b2-4449-8a88-a2124033c31a

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-28 19:18:17 +00:00
parent 35ddcdf9df
commit aa2ea611b1
7 changed files with 115 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/accounts/page.tsx
+26 -17
View File
@@ -23,20 +23,29 @@ const PROVIDER_ICON_MAP: Record<string, string> = {
'Posteo': 'posteo',
'mail.de': 'mailde',
'iCloud Mail': 'icloud',
'Proton Mail': 'protonmail',
};
function ProviderLogo({ providerName }: { providerName?: string | null }) {
/**
* Full-width logo banner rendered at the top of a card.
* Uses next/image fill + object-contain so every logo – regardless of its
* native aspect ratio (1:1 square up to ~6:1 wordmark) – fits correctly
* inside the fixed-height strip without distortion.
*/
function ProviderLogoBanner({ providerName }: { providerName?: string | null }) {
const icon = providerName ? PROVIDER_ICON_MAP[providerName] : undefined;
if (!icon) return null;
return (
<Image
src={`/providers/${icon}.svg`}
alt={`${providerName} logo`}
width={24}
height={24}
className="object-contain flex-shrink-0"
onError={() => {/* silently skip missing icons */}}
/>
<div className="relative h-16 w-full bg-gray-50 border-b border-gray-100 overflow-hidden">
<Image
src={`/providers/${icon}.svg`}
alt={`${providerName} logo`}
fill
unoptimized
sizes="(max-width: 768px) 100vw, 33vw"
style={{ objectFit: 'contain', padding: '12px' }}
/>
</div>
);
}
@@ -136,16 +145,16 @@ export default function AccountsPage() {
account.is_enabled ? 'border-gray-200' : 'border-gray-200 opacity-60'
}`}
>
{/* Provider logo banner – full-width strip that accommodates any aspect ratio */}
<ProviderLogoBanner providerName={account.provider_name} />
<div className="p-6">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-2 flex-1 min-w-0">
<ProviderLogo providerName={account.provider_name} />
<div className="min-w-0">
<h3 className="text-lg font-semibold text-gray-900 mb-1 truncate">
{account.name}
</h3>
<p className="text-sm text-gray-500 truncate">{account.email_address}</p>
</div>
<div className="min-w-0 flex-1">
<h3 className="text-lg font-semibold text-gray-900 mb-1 truncate">
{account.name}
</h3>
<p className="text-sm text-gray-500 truncate">{account.email_address}</p>
</div>
<div className="flex items-center gap-2 ml-2 flex-shrink-0">
{account.is_enabled ? (
frontend/src/components/ProviderWizard.tsx
+27 -12
View File
@@ -1,7 +1,7 @@
'use client';
import { useState } from 'react';
import { ChevronRight, Mail, ArrowLeft } from 'lucide-react';
import { Mail, ArrowLeft } from 'lucide-react';
interface ProviderPreset {
id: string;
@@ -126,6 +126,15 @@ const PROVIDERS: ProviderPreset[] = [
pop3_ssl: null,
notes: 'Posteo supports IMAP only.',
},
{
id: 'protonmail',
name: 'Proton Mail',
logo: '/providers/protonmail.svg',
domains: ['proton.me', 'protonmail.com', 'protonmail.ch', 'pm.me'],
imap_ssl: { host: '127.0.0.1', port: 1143 },
pop3_ssl: { host: '127.0.0.1', port: 1144 },
notes: 'Requires Proton Mail Bridge running locally. Use your Bridge password (not your Proton account password). Default Bridge ports: IMAP 127.0.0.1:1143, POP3 127.0.0.1:1144.',
},
];
export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
@@ -172,7 +181,13 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<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" />
<div className="h-6 flex items-center flex-shrink-0">
<img
src={selectedProvider.logo}
alt={selectedProvider.name}
style={{ maxHeight: '100%', maxWidth: '80px', objectFit: 'contain' }}
/>
</div>
{selectedProvider.name}
</h4>
<p className="text-sm text-blue-700 mb-1">
@@ -240,23 +255,23 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
<h4 className="text-sm font-medium text-gray-700 mb-3">
Quick Setup — Select Your Email Provider
</h4>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
{PROVIDERS.map((provider) => (
<button
key={provider.id}
type="button"
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"
className="flex flex-col items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-center"
>
<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>
{/* Fixed-height logo container – logo scales to its natural aspect ratio */}
<div className="h-8 w-full flex items-center justify-center">
<img
src={provider.logo}
alt={provider.name}
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
/>
</div>
<ChevronRight className="h-4 w-4 text-gray-400 flex-shrink-0" />
<div className="text-xs font-medium text-gray-900 truncate w-full">{provider.name}</div>
</button>
))}
</div>