Skip to content

Commit 44930fb

Browse files
author
secus
committed
Update webhook pages styles and error handling
1 parent f15af15 commit 44930fb

4 files changed

Lines changed: 125 additions & 120 deletions

File tree

‎apps/container-engine-frontend/src/components/Layout/DashboardLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const Sidebar: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, o
160160
</div>
161161

162162
{/* Logout Button */}
163-
<div className="p-4 border-t border-slate-700/50">
163+
<div className="p-4 border-t border-slate-700/50 mb-12">
164164
<button
165165
onClick={handleLogout}
166166
className="w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 hover:text-red-300 transition-all duration-200 group"

‎apps/container-engine-frontend/src/pages/ApiKeysPage.tsx‎

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -378,20 +378,20 @@ const ApiKeysPage: React.FC = () => {
378378
return (
379379
<DashboardLayout>
380380
<div className="min-h-screen bg-linear-to-br from-blue-50 via-white to-purple-50">
381-
<div className="p-8">
381+
<div className="p-2 xs:p-3 sm:p-6 md:p-8 max-w-7xl mx-auto w-full">
382382
{/* Header Section */}
383-
<div className="mb-8">
384-
<div className="flex items-center justify-between">
383+
<div className="mb-6 xs:mb-8">
384+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
385385
<div>
386-
<h1 className="text-4xl font-bold text-gray-900 mb-2">API Keys</h1>
387-
<p className="text-gray-600">Manage your API keys to authenticate requests to our services.</p>
386+
<h1 className="text-2xl xs:text-3xl sm:text-4xl font-bold text-gray-900 mb-1 xs:mb-2">API Keys</h1>
387+
<p className="text-xs xs:text-sm sm:text-base text-gray-600 max-w-xs sm:max-w-md">Manage your API keys to authenticate requests to our services.</p>
388388
</div>
389389
<button
390390
onClick={() => setModalState('creating')}
391-
className="inline-flex items-center px-6 py-3 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 font-medium"
391+
className="w-full sm:w-auto inline-flex items-center justify-center gap-1 px-3 sm:px-6 py-2 sm:py-3 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 font-medium max-w-xs sm:max-w-none min-w-0 truncate"
392392
>
393-
<PlusIcon className="h-5 w-5 mr-2" />
394-
Create API Key
393+
<PlusIcon className="h-5 w-5 mr-1" />
394+
<span className="truncate">Create API Key</span>
395395
</button>
396396
</div>
397397
</div>
@@ -423,8 +423,8 @@ const ApiKeysPage: React.FC = () => {
423423
{!loading && !error && (
424424
<>
425425
{/* Stats Cards */}
426-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
427-
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
426+
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-3 xs:gap-4 md:gap-6 mb-6 xs:mb-8">
427+
<div className="bg-white rounded-2xl p-3 xs:p-4 sm:p-6 shadow-lg border border-gray-100 min-w-0">
428428
<div className="flex items-center">
429429
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
430430
<KeyIcon className="h-6 w-6 text-blue-600" />
@@ -436,7 +436,7 @@ const ApiKeysPage: React.FC = () => {
436436
</div>
437437
</div>
438438

439-
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
439+
<div className="bg-white rounded-2xl p-3 xs:p-4 sm:p-6 shadow-lg border border-gray-100 min-w-0">
440440
<div className="flex items-center">
441441
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
442442
<ShieldCheckIcon className="h-6 w-6 text-green-600" />
@@ -448,7 +448,7 @@ const ApiKeysPage: React.FC = () => {
448448
</div>
449449
</div>
450450

451-
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
451+
<div className="bg-white rounded-2xl p-3 xs:p-4 sm:p-6 shadow-lg border border-gray-100 min-w-0">
452452
<div className="flex items-center">
453453
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4">
454454
<ClockIcon className="h-6 w-6 text-purple-600" />
@@ -464,33 +464,33 @@ const ApiKeysPage: React.FC = () => {
464464
{/* Controls */}
465465
{
466466
apiKeys && apiKeys.length > 0 && (
467-
<div className="mb-6 flex items-center justify-between">
468-
<div className="flex items-center space-x-4">
469-
<span className="text-sm text-gray-600">
467+
<div className="mb-4 xs:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
468+
<div className="flex items-center space-x-2 xs:space-x-4">
469+
<span className="text-xs xs:text-sm text-gray-600">
470470
Showing {apiKeys.length > 0 ? ((currentPage - 1) * limit + 1) : 0} to {Math.min(currentPage * limit, total)} of {total} entries
471471
</span>
472472
</div>
473-
<div className="flex items-center space-x-2">
474-
<label htmlFor="limit" className="text-sm text-gray-600">Show:</label>
473+
<div className="flex items-center space-x-1 xs:space-x-2">
474+
<label htmlFor="limit" className="text-xs xs:text-sm text-gray-600">Show:</label>
475475
<select
476476
id="limit"
477477
value={limit}
478478
onChange={(e) => handleLimitChange(Number(e.target.value))}
479-
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
479+
className="px-2 xs:px-3 py-1 xs:py-2 border border-gray-300 rounded-lg text-xs xs:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
480480
>
481481
<option value={5}>5</option>
482482
<option value={10}>10</option>
483483
<option value={25}>25</option>
484484
<option value={50}>50</option>
485485
</select>
486-
<span className="text-sm text-gray-600">entries</span>
486+
<span className="text-xs xs:text-sm text-gray-600">entries</span>
487487
</div>
488488
</div>
489489
)
490490
}
491491

492492
{/* API Keys Table */}
493-
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
493+
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-x-auto">
494494
{total === 0 ? (
495495
<div className="text-center py-20">
496496
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -508,57 +508,54 @@ const ApiKeysPage: React.FC = () => {
508508
</div>
509509
) : (
510510
<>
511-
<div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
512-
<h3 className="text-lg font-semibold text-gray-900">Your API Keys</h3>
511+
<div className="px-3 xs:px-6 py-3 xs:py-4 bg-gray-50 border-b border-gray-200 min-w-[400px] xs:min-w-0">
512+
<h3 className="text-base xs:text-lg font-semibold text-gray-900">Your API Keys</h3>
513513
</div>
514514
<div className="overflow-x-auto">
515-
<table className="min-w-full divide-y divide-gray-200">
515+
<table className="min-w-[600px] xs:min-w-full divide-y divide-gray-200 text-xs xs:text-sm">
516516
<thead className="bg-gray-50">
517517
<tr>
518-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
519-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Key ID</th>
520-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Description</th>
521-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
522-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Last Used</th>
523-
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Expires</th>
524-
<th className="relative px-6 py-4"><span className="sr-only">Actions</span></th>
518+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Name</th>
519+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Key ID</th>
520+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Description</th>
521+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Created</th>
522+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Last Used</th>
523+
<th className="px-3 xs:px-6 py-2 xs:py-4 text-left font-semibold text-gray-500 uppercase tracking-wider">Expires</th>
524+
<th className="relative px-3 xs:px-6 py-2 xs:py-4"><span className="sr-only">Actions</span></th>
525525
</tr>
526526
</thead>
527527
<tbody className="bg-white divide-y divide-gray-200">
528528
{apiKeys && apiKeys.length > 0 && apiKeys.map((key:any) => (
529529
<tr key={key.id} className="hover:bg-gray-50 transition-colors">
530-
<td className="px-6 py-4 whitespace-nowrap">
531-
<div className="flex items-center">
532-
<div className="w-8 h-8 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
530+
<td className="px-3 xs:px-6 py-2 xs:py-4 whitespace-nowrap max-w-[120px] xs:max-w-[180px] truncate">
531+
<div className="flex items-center min-w-0">
532+
<div className="w-8 h-8 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-2 xs:mr-3 flex-shrink-0">
533533
<KeyIcon className="h-4 w-4 text-white" />
534534
</div>
535-
<span className="text-sm font-semibold text-gray-900">{key.name}</span>
535+
<span className="font-semibold text-gray-900 truncate">{key.name}</span>
536536
</div>
537537
</td>
538-
<td className="px-6 py-4 whitespace-nowrap">
539-
<div className="flex items-center group">
540-
<code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono text-gray-700 border">
541-
{maskKeyId(key.id)}
542-
</code>
538+
<td className="px-3 xs:px-6 py-2 xs:py-4 whitespace-nowrap">
539+
<div className="flex items-center group min-w-0">
540+
<code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono text-gray-700 border truncate max-w-[100px] xs:max-w-[160px]">{maskKeyId(key.id)}</code>
543541
<button
544542
onClick={() => {
545543
navigator.clipboard.writeText(key.id);
546544
toast.success('Key ID copied to clipboard!');
547-
// Optional: Add toast notification here
548545
}}
549-
className="ml-2 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-all opacity-0 group-hover:opacity-100"
546+
className="ml-1 xs:ml-2 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-all opacity-0 group-hover:opacity-100"
550547
title="Copy full Key ID"
551548
>
552549
<ClipboardIcon className="h-4 w-4" />
553550
</button>
554551
</div>
555552
</td>
556-
<td className="px-6 py-4">
557-
<span className="text-sm text-gray-600 max-w-xs truncate block">
553+
<td className="px-3 xs:px-6 py-2 xs:py-4 max-w-[120px] xs:max-w-xs truncate">
554+
<span className="text-gray-600 truncate block">
558555
{key.description || <em className="text-gray-400">No description</em>}
559556
</span>
560557
</td>
561-
<td className="px-6 py-4 whitespace-nowrap">
558+
<td className="px-3 xs:px-6 py-2 xs:py-4 whitespace-nowrap">
562559
<div className="flex items-center text-sm text-gray-600">
563560
<CalendarIcon className="h-4 w-4 mr-1" />
564561
{formatDate(key.created_at)}

0 commit comments

Comments
 (0)