chore: improve styling on a few examples

Author: ghiscoding

examples/example-frozen-row-reordering.html

@@ -110,7 +110,7 @@ <h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-menu"
+    cssClass: "cell-reorder dnd sgi sgi-drag sgi-12px"
   },
   {
     id: "name",

examples/example-plugin-contextmenu.html

@@ -48,13 +48,23 @@
       color: #ccc;
     }
 
-    .fake-hyperlink {
+    .cell-menu-dropdown {
+      border: 1px solid #a3a3a3;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      height: 90%;
+      width: max-content;
+      padding: 0 6px;
       cursor: pointer;
-      color: #08c;
     }
-
-    .fake-hyperlink:hover {
-      text-decoration: underline;
+    .cell-menu-dropdown.disabled {
+      border: 1px solid #c6c6c6;
+      color: #dddddd;
+    }
+    .cell-menu-dropdown:hover:not(.disabled) {
+      background-color: #9e9e9e;
+      color: white;
     }
 
     /**
@@ -185,9 +195,9 @@ <h2>View Source:</h2>
     function actionFormatter(row, cell, value, columnDef, dataContext) {
       // only enable the Action menu when Priority is set to High (3)
       if (dataContext.priority === 3) {
-        return "<div class='fake-hyperlink'>Action &#9660;</div>";
+        return `<div class="cell-menu-dropdown">Action <i class="sgi sgi-caret sgi-24px"></i></div>`;
       }
-      return "<div class='disabled'>Action &#9660;</div>";
+      return `<div class="cell-menu-dropdown disabled">Action <i class="sgi sgi-caret sgi-24px"></i></div>`;
     }
 
     function priorityFormatter(row, cell, value, columnDef, dataContext) {

examples/example-row-detail-selection-and-move.html

@@ -255,7 +255,7 @@ <h3>Selected Titles:</h3>
       columns.splice(columnIndex, 0, checkboxSelectorPlugin.getColumnDefinition());
 
       rowMovePlugin = new Slick.RowMoveManager({
-        cssClass: 'sgi sgi-menu',
+        cssClass: 'sgi sgi-drag sgi-10px',
         cancelEditOnDrag: true,
         singleRowMove: true,
         disableRowSelection: true,

examples/example-trading-esm.html

@@ -165,7 +165,7 @@ <h2>View Source:</h2>
       id: 'quantity', name: 'Qty', field: 'quantity', sortable: true, width: 50,
     },
     {
-      id: 'amount', name: 'Amount', field: 'amount', sortable: true, minWidth: 70, width: 105,
+      id: 'amount', name: 'Amount', field: 'amount', sortable: true, minWidth: 70, width: 110,
       formatter: currencyFormatter, groupTotalsFormatter: sumTotalsFormatter
     },
     {

examples/example14-highlighting.html

@@ -19,13 +19,12 @@
 
     .changed {
       background: mistyrose;
-      border: 1px solid lightcoral;
+      box-shadow: inset 0 0 0 1px lightcoral;
     }
 
     .current-server {
-      border: 1px solid black;
       background: moccasin;
-      border: 1px solid darksalmon;
+      box-shadow: inset 0 0 0 1px darksalmon;
     }
   </style>
 </head>
@@ -51,6 +50,7 @@ <h2>Demonstrates</h2>
     </ul>
     <h2>Controls</h2>
     <button onclick="simulateRealTimeUpdates()">Start simulation</button>
+    <button onclick="stopSimulation()">Stop simulation</button>
     <button onclick="findCurrentServer()">Find current server</button>
       <h2>View Source:</h2>
       <ul>
@@ -69,6 +69,7 @@ <h2>View Source:</h2>
 <script src="../dist/browser/plugins/slick.rowmovemanager.js"></script>
 
 <script>
+  var timer;
   var grid;
   var data = [];
   var columns = [
@@ -145,7 +146,14 @@ <h2>View Source:</h2>
     grid.setCellCssStyles("highlight", changes);
     grid.render();
 
-    setTimeout(simulateRealTimeUpdates, 500);
+    timer = setTimeout(simulateRealTimeUpdates, 500);
+  }
+
+  function stopSimulation() {
+    changes = {}; // clear changes
+    grid.setCellCssStyles("highlight", changes);
+    grid.render();
+    clearTimeout(timer);
   }
 
   function findCurrentServer() {

examples/example9-row-reordering-simple.html

@@ -66,7 +66,7 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "slickgrid-cell-reorder sgi sgi-menu"
+    cssClass: "slickgrid-cell-reorder sgi sgi-drag sgi-12px"
   },
   {
     id: "name",

examples/example9-row-reordering.html

@@ -110,7 +110,7 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-menu"
+    cssClass: "cell-reorder dnd sgi sgi-drag sgi-12px"
   },
   {
     id: "name",