Skip to content

Commit 32b8e52

Browse files
HumbleBee14HumbleBee14
committed
Updated icon for inspect element
1 parent 3ff7b7c commit 32b8e52

1 file changed

Lines changed: 55 additions & 32 deletions

File tree

‎src/vs/workbench/contrib/roopik/browser/projectMode/scripts/inspectModeScript.ts‎

Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -310,88 +310,111 @@ export const INSPECT_MODE_SCRIPT = `
310310
].join(';');
311311
document.body.appendChild(actionButtonsContainer);
312312
313-
// Attach button (left) - paperclip icon
313+
// Attach button (left) - code element icon - light style for visibility
314314
const attachButton = document.createElement('div');
315315
attachButton.id = '__roopik_inspect_attach';
316316
attachButton.style.cssText = [
317-
'width: 28px',
318-
'height: 28px',
319-
'background-color: #059669',
320-
'border-radius: 6px',
317+
'width: 32px',
318+
'height: 32px',
319+
'background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
320+
'border: 1px solid rgba(0, 0, 0, 0.3)',
321+
'border-radius: 8px',
321322
'cursor: pointer',
322-
'box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4)',
323-
'transition: background-color 0.15s, transform 0.1s',
323+
'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)',
324+
'transition: all 0.2s ease',
324325
'display: flex',
325326
'align-items: center',
326327
'justify-content: center'
327328
].join(';');
328-
attachButton.title = 'Attach element HTML to AI context';
329+
attachButton.title = 'Attach element to AI context';
329330
330-
// Paperclip icon SVG
331+
// Code brackets icon </> (represents HTML element)
331332
var attachSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
332333
attachSvg.setAttribute('width', '16');
333334
attachSvg.setAttribute('height', '16');
334335
attachSvg.setAttribute('viewBox', '0 0 24 24');
335336
attachSvg.setAttribute('fill', 'none');
336-
attachSvg.setAttribute('stroke', 'white');
337-
attachSvg.setAttribute('stroke-width', '2');
337+
attachSvg.setAttribute('stroke', '#475569');
338+
attachSvg.setAttribute('stroke-width', '2.5');
338339
attachSvg.setAttribute('stroke-linecap', 'round');
339340
attachSvg.setAttribute('stroke-linejoin', 'round');
340-
var attachPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
341-
attachPath.setAttribute('d', 'M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48');
342-
attachSvg.appendChild(attachPath);
341+
// < bracket
342+
var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
343+
path1.setAttribute('d', 'M8 6L3 12L8 18');
344+
attachSvg.appendChild(path1);
345+
// > bracket
346+
var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
347+
path2.setAttribute('d', 'M16 6L21 12L16 18');
348+
attachSvg.appendChild(path2);
349+
// / slash
350+
var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
351+
path3.setAttribute('d', 'M14 4L10 20');
352+
attachSvg.appendChild(path3);
343353
attachButton.appendChild(attachSvg);
344354
345355
// Attach button hover
346356
attachButton.addEventListener('mouseenter', function() {
347-
attachButton.style.backgroundColor = '#047857';
348-
attachButton.style.transform = 'scale(1.1)';
357+
attachButton.style.background = 'linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%)';
358+
attachButton.style.borderColor = 'rgba(0, 0, 0, 0.4)';
359+
attachButton.style.transform = 'translateY(-2px)';
360+
attachButton.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
361+
attachSvg.setAttribute('stroke', '#1e293b');
349362
});
350363
attachButton.addEventListener('mouseleave', function() {
351-
attachButton.style.backgroundColor = '#059669';
352-
attachButton.style.transform = 'scale(1)';
364+
attachButton.style.background = 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)';
365+
attachButton.style.borderColor = 'rgba(0, 0, 0, 0.3)';
366+
attachButton.style.transform = 'translateY(0)';
367+
attachButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
368+
attachSvg.setAttribute('stroke', '#475569');
353369
});
354370
355-
// Chat button (right) - message icon
371+
// Chat button (right) - message icon - matching sleek style
356372
const chatButton = document.createElement('div');
357373
chatButton.id = '__roopik_inspect_chat';
358374
chatButton.style.cssText = [
359-
'width: 28px',
360-
'height: 28px',
361-
'background-color: #7c3aed',
362-
'border-radius: 6px',
375+
'width: 32px',
376+
'height: 32px',
377+
'background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%)',
378+
'border: 1px solid rgba(255, 255, 255, 0.15)',
379+
'border-radius: 8px',
363380
'cursor: pointer',
364-
'box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4)',
365-
'transition: background-color 0.15s, transform 0.1s',
381+
'box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4)',
382+
'transition: all 0.2s ease',
366383
'display: flex',
367384
'align-items: center',
368385
'justify-content: center'
369386
].join(';');
370387
chatButton.title = 'Chat about this element';
371388
372-
// Message icon SVG
389+
// Send/chat icon SVG (paper plane - more modern)
373390
var chatSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
374391
chatSvg.setAttribute('width', '16');
375392
chatSvg.setAttribute('height', '16');
376393
chatSvg.setAttribute('viewBox', '0 0 24 24');
377394
chatSvg.setAttribute('fill', 'none');
378-
chatSvg.setAttribute('stroke', 'white');
395+
chatSvg.setAttribute('stroke', '#e9d5ff');
379396
chatSvg.setAttribute('stroke-width', '2');
380397
chatSvg.setAttribute('stroke-linecap', 'round');
381398
chatSvg.setAttribute('stroke-linejoin', 'round');
382399
var chatPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
383-
chatPath.setAttribute('d', 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z');
400+
chatPath.setAttribute('d', 'M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z');
384401
chatSvg.appendChild(chatPath);
385402
chatButton.appendChild(chatSvg);
386403
387404
// Chat button hover
388405
chatButton.addEventListener('mouseenter', function() {
389-
chatButton.style.backgroundColor = '#6d28d9';
390-
chatButton.style.transform = 'scale(1.1)';
406+
chatButton.style.background = 'linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%)';
407+
chatButton.style.borderColor = 'rgba(255, 255, 255, 0.25)';
408+
chatButton.style.transform = 'translateY(-2px)';
409+
chatButton.style.boxShadow = '0 6px 16px rgba(109, 40, 217, 0.5)';
410+
chatSvg.setAttribute('stroke', '#ffffff');
391411
});
392412
chatButton.addEventListener('mouseleave', function() {
393-
chatButton.style.backgroundColor = '#7c3aed';
394-
chatButton.style.transform = 'scale(1)';
413+
chatButton.style.background = 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%)';
414+
chatButton.style.borderColor = 'rgba(255, 255, 255, 0.15)';
415+
chatButton.style.transform = 'translateY(0)';
416+
chatButton.style.boxShadow = '0 4px 12px rgba(109, 40, 217, 0.4)';
417+
chatSvg.setAttribute('stroke', '#e9d5ff');
395418
});
396419
397420
// Add buttons to container (attach on left, chat on right)

0 commit comments

Comments
 (0)