Skip to content

Commit 5999851

Browse files
Patel230Patel230
committed
Enhance work item context menu with modern teal theme and improved UX
- Enhanced context menu visual design with teal gradient theme - Implemented compact, vibrant color-coded action buttons - Added short, meaningful hover tooltips (10px text) - Standardized spacing across all menu sections (px-4 py-3) - Improved button colors with 3-color gradients for better differentiation - Added glow effects, backdrop blur, and modern shadows - Fixed DeleteWorkItemModal prop names (nodeId → workItemId) - Display type labels instead of raw values (DEFAULT → Default) - Optimized menu compactness while maintaining usability
1 parent fe663f1 commit 5999851

4 files changed

Lines changed: 436 additions & 395 deletions

File tree

‎packages/web/src/components/ConnectWorkItemModal.tsx‎

Lines changed: 107 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1156,68 +1156,75 @@ export function ConnectWorkItemModal({ isOpen, onClose, sourceNode, initialTab =
11561156
const selectedRelation = getRelationshipConfig(selectedRelationType as RelationshipType);
11571157

11581158
return (
1159-
<div className="fixed inset-0 z-[9999] overflow-y-auto backdrop-blur-sm">
1159+
<div className="fixed inset-0 z-[9999] overflow-y-auto backdrop-blur-sm" style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0}}>
11601160
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
1161-
<div className="fixed inset-0 bg-gradient-to-br from-gray-900/80 via-slate-900/90 to-gray-900/80 transition-all duration-300" onClick={onClose} />
1161+
<div
1162+
className="fixed inset-0 transition-opacity bg-gradient-to-br from-gray-900/90 via-black/80 to-gray-800/90 animate-in fade-in duration-300"
1163+
onClick={onClose}
1164+
/>
1165+
1166+
<div className="relative inline-block w-full max-w-5xl p-0 my-8 overflow-hidden text-left align-middle transition-all transform bg-gradient-to-br from-gray-800/98 via-gray-850/98 to-gray-900/98 backdrop-blur-2xl shadow-2xl rounded-2xl border border-gray-600/30 focus-within:ring-2 focus-within:ring-blue-500/50 animate-in slide-in-from-bottom-4 duration-300" onClick={(e) => e.stopPropagation()}>
1167+
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-green-500/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
1168+
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-purple-500 via-pink-500 to-green-500"></div>
11621169

1163-
<div className="relative inline-block align-bottom bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 rounded-2xl text-left overflow-hidden shadow-2xl border border-gray-700/50 transform transition-all duration-300 hover:shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full z-[10000]" onClick={(e) => e.stopPropagation()}>
11641170
{/* Header with gradient */}
1165-
<div className="bg-gradient-to-r from-emerald-900/30 via-green-800/25 to-teal-900/30 px-6 py-5 border-b border-emerald-600/20 backdrop-blur-sm">
1166-
<div className="flex items-center justify-between">
1167-
<div className="flex items-center space-x-4">
1168-
<div className="p-2 rounded-xl bg-emerald-500/20 border border-emerald-400/30">
1169-
{activeTab === 'connect' ? (
1170-
<Link2 className="h-6 w-6 text-emerald-400" />
1171-
) : (
1172-
<Unlink className="h-6 w-6 text-red-400" />
1173-
)}
1174-
</div>
1175-
<div>
1176-
<h3 className="text-xl font-bold bg-gradient-to-r from-emerald-200 to-green-100 bg-clip-text text-transparent">
1177-
{activeTab === 'connect' ? 'Connect Work Item' : 'Disconnect Work Item'}
1178-
</h3>
1179-
<p className="text-sm text-gray-300 mt-1">
1180-
{activeTab === 'connect'
1181-
? `Create connections from "${sourceNode.title}"`
1182-
: `Remove connections from "${sourceNode.title}"`
1183-
}
1184-
</p>
1185-
</div>
1171+
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-700/30 bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm relative">
1172+
<div className="flex items-center space-x-3">
1173+
<div className="w-10 h-10 bg-gradient-to-br from-emerald-500 via-green-500 to-teal-500 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/30 relative">
1174+
<div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-green-600 rounded-xl blur opacity-50 animate-pulse"></div>
1175+
{activeTab === 'connect' ? (
1176+
<Link2 className="h-5 w-5 text-white relative z-10" />
1177+
) : (
1178+
<Unlink className="h-5 w-5 text-white relative z-10" />
1179+
)}
1180+
</div>
1181+
<div>
1182+
<h3 className="text-lg font-bold bg-gradient-to-r from-white via-emerald-100 to-green-100 bg-clip-text text-transparent">
1183+
{activeTab === 'connect' ? 'Connect Work Item' : 'Disconnect Work Item'}
1184+
</h3>
1185+
<p className="text-xs text-gray-400">
1186+
{activeTab === 'connect'
1187+
? `Create connections from "${sourceNode.title}"`
1188+
: `Remove connections from "${sourceNode.title}"`
1189+
}
1190+
</p>
11861191
</div>
1187-
<button
1188-
onClick={onClose}
1189-
className="p-2 rounded-xl text-gray-400 hover:text-gray-200 hover:bg-gray-700/50 transition-all duration-200"
1190-
>
1191-
<X className="h-5 w-5" />
1192-
</button>
11931192
</div>
1194-
1193+
<button
1194+
onClick={onClose}
1195+
className="p-2 text-gray-400 hover:text-white hover:bg-red-600 rounded-lg transition-all duration-200 hover:scale-110"
1196+
>
1197+
<X className="h-5 w-5" />
1198+
</button>
1199+
</div>
1200+
11951201
{/* Tab Navigation */}
1196-
<div className="mt-4 flex space-x-1 bg-gray-700/30 rounded-xl p-1">
1197-
<button
1198-
onClick={() => setActiveTab('connect')}
1199-
className={`flex-1 flex items-center justify-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
1200-
activeTab === 'connect'
1201-
? 'bg-emerald-600/20 text-emerald-200 border border-emerald-400/30'
1202-
: 'text-gray-400 hover:text-gray-300 hover:bg-gray-600/20'
1203-
}`}
1204-
>
1205-
<Link2 className="h-4 w-4" />
1206-
<span>Connect</span>
1207-
</button>
1208-
<button
1209-
onClick={() => setActiveTab('disconnect')}
1210-
className={`flex-1 flex items-center justify-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
1211-
activeTab === 'disconnect'
1212-
? 'bg-red-600/20 text-red-200 border border-red-400/30'
1213-
: 'text-gray-400 hover:text-gray-300 hover:bg-gray-600/20'
1214-
}`}
1215-
>
1216-
<Unlink className="h-4 w-4" />
1217-
<span>Disconnect</span>
1218-
</button>
1202+
<div className="px-6 pt-4">
1203+
<div className="flex space-x-1 bg-gray-700/30 backdrop-blur-sm rounded-xl p-1">
1204+
<button
1205+
onClick={() => setActiveTab('connect')}
1206+
className={`flex-1 flex items-center justify-center space-x-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 ${
1207+
activeTab === 'connect'
1208+
? 'bg-gradient-to-r from-emerald-600/20 to-green-600/20 text-emerald-200 border border-emerald-400/30 shadow-lg shadow-emerald-500/10'
1209+
: 'text-gray-400 hover:text-gray-200 hover:bg-gray-600/30'
1210+
}`}
1211+
>
1212+
<Link2 className="h-4 w-4" />
1213+
<span>Connect</span>
1214+
</button>
1215+
<button
1216+
onClick={() => setActiveTab('disconnect')}
1217+
className={`flex-1 flex items-center justify-center space-x-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 ${
1218+
activeTab === 'disconnect'
1219+
? 'bg-gradient-to-r from-red-600/20 to-orange-600/20 text-red-200 border border-red-400/30 shadow-lg shadow-red-500/10'
1220+
: 'text-gray-400 hover:text-gray-200 hover:bg-gray-600/30'
1221+
}`}
1222+
>
1223+
<Unlink className="h-4 w-4" />
1224+
<span>Disconnect</span>
1225+
</button>
1226+
</div>
12191227
</div>
1220-
</div>
12211228

12221229
<div className="flex">
12231230
{activeTab === 'connect' ? (
@@ -2111,41 +2118,49 @@ export function ConnectWorkItemModal({ isOpen, onClose, sourceNode, initialTab =
21112118
</div>
21122119

21132120
{/* Actions */}
2114-
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-600/50 mt-6">
2121+
<div className="flex justify-end space-x-2 pt-6 border-t border-gray-700/30 mt-6">
21152122
<button
21162123
onClick={onClose}
2117-
className="px-6 py-3 text-gray-300 bg-gray-700/50 border border-gray-600/50 rounded-xl hover:bg-red-600 hover:text-white hover:border-red-500/50 transition-all duration-200 font-medium hover:scale-105"
2124+
className="px-4 py-2 text-xs text-gray-300 bg-gray-700/50 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-red-600"
21182125
>
21192126
Cancel
21202127
</button>
21212128
<button
21222129
onClick={handleCreateConnections}
21232130
disabled={selectedNodes.size === 0 || creatingConnection || isRelationshipDisabled(selectedRelationType) || (duplicateWarning && !duplicateWarning.isValid) || false}
2124-
className={`px-8 py-3 text-white rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3 font-semibold shadow-lg disabled:shadow-none ${
2125-
duplicateWarning && !duplicateWarning.isValid
2126-
? 'bg-gray-600 cursor-not-allowed'
2131+
className={`px-4 py-2 text-xs rounded-lg transition-all duration-200 font-semibold flex items-center space-x-1.5 hover:scale-105 shadow-lg ${
2132+
selectedNodes.size === 0 || creatingConnection || isRelationshipDisabled(selectedRelationType) || (duplicateWarning && !duplicateWarning.isValid)
2133+
? 'bg-gray-600/50 text-gray-400 cursor-not-allowed opacity-60'
21272134
: duplicateWarning && duplicateWarning.isValid
2128-
? 'bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-500 hover:to-orange-500 shadow-yellow-500/20'
2129-
: 'bg-gradient-to-r from-emerald-600 to-green-700 hover:from-emerald-500 hover:to-green-600 shadow-emerald-500/20'
2135+
? 'bg-gradient-to-r from-yellow-600 via-orange-600 to-amber-600 text-white hover:from-yellow-500 hover:via-orange-500 hover:to-amber-500 shadow-yellow-500/25 hover:shadow-xl hover:shadow-yellow-500/40'
2136+
: 'bg-gradient-to-r from-emerald-600 via-green-600 to-teal-600 text-white hover:from-emerald-500 hover:via-green-500 hover:to-teal-500 shadow-emerald-500/25 hover:shadow-xl hover:shadow-emerald-500/40'
21302137
}`}
21312138
title={
21322139
duplicateWarning && !duplicateWarning.isValid
21332140
? 'Cannot connect: Duplicate relationship detected'
2134-
: isRelationshipDisabled(selectedRelationType)
2135-
? 'This relationship already exists between the selected nodes'
2141+
: isRelationshipDisabled(selectedRelationType)
2142+
? 'This relationship already exists between the selected nodes'
21362143
: duplicateWarning && duplicateWarning.isValid
21372144
? 'Warning: This may create a redundant relationship'
21382145
: ''
21392146
}
21402147
>
2141-
<Link2 className="w-5 h-5" />
2142-
<span>
2143-
{creatingConnection ? 'Connecting...' :
2144-
duplicateWarning && !duplicateWarning.isValid ? 'Blocked - Duplicate' :
2145-
isRelationshipDisabled(selectedRelationType) ? 'Already Connected' :
2146-
duplicateWarning && duplicateWarning.isValid ? `Connect ${selectedNodes.size} (Warning)` :
2147-
`Connect ${selectedNodes.size} Node${selectedNodes.size !== 1 ? 's' : ''}`}
2148-
</span>
2148+
{creatingConnection ? (
2149+
<>
2150+
<span>Connecting...</span>
2151+
<div className="w-3 h-3 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
2152+
</>
2153+
) : (
2154+
<>
2155+
<span>
2156+
{duplicateWarning && !duplicateWarning.isValid ? 'Blocked - Duplicate' :
2157+
isRelationshipDisabled(selectedRelationType) ? 'Already Connected' :
2158+
duplicateWarning && duplicateWarning.isValid ? `Connect ${selectedNodes.size} (Warning)` :
2159+
`Connect ${selectedNodes.size} Node${selectedNodes.size !== 1 ? 's' : ''}`}
2160+
</span>
2161+
<Link2 className="w-3 h-3" />
2162+
</>
2163+
)}
21492164
</button>
21502165
</div>
21512166
</div>
@@ -2296,24 +2311,35 @@ export function ConnectWorkItemModal({ isOpen, onClose, sourceNode, initialTab =
22962311
</div>
22972312

22982313
{/* Actions */}
2299-
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-600/50">
2314+
<div className="flex justify-end space-x-2 pt-6 border-t border-gray-700/30">
23002315
<button
23012316
onClick={onClose}
2302-
className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/50 to-gray-800/50 border border-gray-600/50 rounded-xl hover:from-gray-600/60 hover:to-gray-700/60 hover:border-gray-500/60 transition-all duration-200 font-medium"
2317+
className="px-4 py-2 text-xs text-gray-300 bg-gray-700/50 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-red-600"
23032318
>
23042319
Cancel
23052320
</button>
23062321
<button
23072322
onClick={handleDisconnectClick}
23082323
disabled={selectedConnections.size === 0 || deletingConnection}
2309-
className="px-8 py-3 bg-gradient-to-r from-red-600 to-orange-700 hover:from-red-500 hover:to-orange-600 text-white rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3 font-semibold shadow-lg shadow-red-500/20 disabled:shadow-none"
2324+
className={`px-4 py-2 text-xs rounded-lg transition-all duration-200 font-semibold flex items-center space-x-1.5 hover:scale-105 shadow-lg ${
2325+
selectedConnections.size === 0 || deletingConnection
2326+
? 'bg-gray-600/50 text-gray-400 cursor-not-allowed opacity-60'
2327+
: 'bg-gradient-to-r from-red-600 via-orange-600 to-red-700 text-white hover:from-red-500 hover:via-orange-500 hover:to-red-600 shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40'
2328+
}`}
23102329
>
2311-
<Trash2 className="w-5 h-5" />
2312-
<span>
2313-
{deletingConnection ? 'Disconnecting...' :
2314-
selectedConnections.size === 0 ? 'Select connections to disconnect' :
2315-
`Disconnect ${selectedConnections.size} Connection${selectedConnections.size !== 1 ? 's' : ''}`}
2316-
</span>
2330+
{deletingConnection ? (
2331+
<>
2332+
<span>Disconnecting...</span>
2333+
<div className="w-3 h-3 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
2334+
</>
2335+
) : (
2336+
<>
2337+
<span>
2338+
{selectedConnections.size === 0 ? 'Select connections' : `Disconnect ${selectedConnections.size}`}
2339+
</span>
2340+
<Trash2 className="w-3 h-3" />
2341+
</>
2342+
)}
23172343
</button>
23182344
</div>
23192345
</>

0 commit comments

Comments
 (0)