Update Sync to Dashboard button styling to match Steam design

Changes to button:
- Removed emojis (🔄 ⏳ ✅ ❌)
- Added proper SVG icons that match Steam's style
- Uses Steam's native green btn_green_white_innerfade (no override)
- Spinning sync icon animation during loading
- Check icon on success, alert icon on error

Changes to notifications:
- Success: Uses Steam's green color #5c7e10 (instead of tailwind green)
- Error: Uses dark red #8B0000 (instead of gradient)
- Removed emoji from notification titles

Result:
✅ Professional look matching Steam's UI
✅ Consistent green color throughout
✅ Proper icons instead of emojis
✅ Native Steam button styling

Author: rainerstudios

src/transactionMonitor.js

@@ -503,40 +503,59 @@ function addSyncToDashboardButton() {
   syncButton.id = 'cs2float-sync-to-dashboard-btn';
   syncButton.href = '#';
   syncButton.className = 'btn_green_white_innerfade btn_medium_wide';
-  syncButton.style.cssText = `
-    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
-    margin-right: 10px;
-  `;
-  syncButton.innerHTML = '<span>🔄 Sync to Dashboard</span>';
+  syncButton.style.cssText = `margin-right: 10px;`;
+
+  // SVG icon for sync (matches Steam's icon style)
+  const syncIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: middle; margin-right: 4px;">
+    <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+  </svg>`;
+
+  syncButton.innerHTML = `<span>${syncIcon}Sync to Dashboard</span>`;
 
   // Add click handler
   syncButton.addEventListener('click', async (e) => {
     e.preventDefault();
 
     // Disable button and show loading state
-    syncButton.innerHTML = '<span>⏳ Syncing...</span>';
+    const loadingIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: middle; margin-right: 4px; animation: spin 1s linear infinite;">
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+    </svg>`;
+    syncButton.innerHTML = `<span>${loadingIcon}Syncing...</span>`;
     syncButton.style.pointerEvents = 'none';
     syncButton.style.opacity = '0.6';
 
+    // Add spin animation
+    const style = document.createElement('style');
+    style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+    if (!document.querySelector('style[data-sync-animation]')) {
+      style.setAttribute('data-sync-animation', 'true');
+      document.head.appendChild(style);
+    }
+
     try {
       // Trigger both transaction and inventory sync
       await triggerFullSync();
 
       // Success state
-      syncButton.innerHTML = '<span>✅ Synced!</span>';
+      const checkIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: middle; margin-right: 4px;">
+        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+      </svg>`;
+      syncButton.innerHTML = `<span>${checkIcon}Synced!</span>`;
 
-      // Show success notification
+      // Show success notification (using Steam's green)
       showNotification(
-        '✅ Dashboard Synced',
+        'Dashboard Synced',
         'Transaction and inventory synced successfully',
-        'linear-gradient(135deg, #22c55e, #16a34a)',
+        '#5c7e10', // Steam's green color
         null,
         3000
       );
 
       // Reset button after 2 seconds
       setTimeout(() => {
-        syncButton.innerHTML = '<span>🔄 Sync to Dashboard</span>';
+        syncButton.innerHTML = `<span>${syncIcon}Sync to Dashboard</span>`;
         syncButton.style.pointerEvents = '';
         syncButton.style.opacity = '1';
       }, 2000);
@@ -545,26 +564,30 @@ function addSyncToDashboardButton() {
       console.error('[Transaction Monitor] Sync failed:', error);
 
       // Error state
-      syncButton.innerHTML = '<span>❌ Sync Failed</span>';
-      syncButton.style.background = 'linear-gradient(135deg, #ef4444, #dc2626) !important';
+      const errorIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: middle; margin-right: 4px;">
+        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+      </svg>`;
+      syncButton.innerHTML = `<span>${errorIcon}Sync Failed</span>`;
+      syncButton.className = 'btn_grey_white_innerfade btn_medium_wide'; // Change to grey for error
 
       // Show error notification with appropriate message
       const errorMessage = error.message?.includes('invalidated')
         ? 'Extension was reloaded. Please refresh this page and try again.'
         : 'Please try again or sync manually from the popup';
 
       showNotification(
-        '❌ Sync Failed',
+        'Sync Failed',
         errorMessage,
-        'linear-gradient(135deg, #ef4444, #dc2626)',
+        '#8B0000', // Dark red
         null,
         5000
       );
 
       // Reset button after 3 seconds
       setTimeout(() => {
-        syncButton.innerHTML = '<span>🔄 Sync to Dashboard</span>';
-        syncButton.style.background = 'linear-gradient(135deg, #6366f1, #4f46e5) !important';
+        syncButton.innerHTML = `<span>${syncIcon}Sync to Dashboard</span>`;
+        syncButton.className = 'btn_green_white_innerfade btn_medium_wide'; // Back to green
         syncButton.style.pointerEvents = '';
         syncButton.style.opacity = '1';
       }, 3000);