Tweak ActionButton styles and add comments

Author: tuan-nguen

extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css

@@ -1,3 +1,5 @@
+/* Styles have been copied from https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ */
+
 .vscode-action-button {
   align-items: center;
   background-color: transparent;
@@ -38,6 +40,8 @@
 
 .vscode-action-button:hover {
   background-color: var(--vscode-toolbar-hoverBackground);
+  outline: 1px dotted var(--vscode-contrastActiveBorder);
+  outline-offset: -1px;
 }
 
 .vscode-action-button:active {

extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx

@@ -3,10 +3,8 @@ import "./ActionButton.css";
 // This is needed because vscode-elements/elements does not implement
 // the same styles for icon buttons as vscode/webview-ui-toolkit
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ActionButton = (props: any) => {
-  return (
-    <button type="button" className="vscode-action-button" {...props}>
-      {props.children}
-    </button>
-  );
-};
+export const ActionButton = (props: any) => (
+  <button type="button" {...props} className="vscode-action-button">
+    {props.children}
+  </button>
+);