Fix styles for icon buttons

Author: tuan-nguen

extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx

@@ -15,6 +15,7 @@ import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empt
 import { sendTelemetry } from "../common/telemetry";
 import type { ModelConfig } from "../../model-editor/languages";
 import { VscodeButton } from "@vscode-elements/react-elements";
+import { ActionButton } from "../common/ActionButton/ActionButton";
 
 export type MultipleModeledMethodsPanelProps = {
   language: QueryLanguage;
@@ -168,21 +169,19 @@ export const MultipleModeledMethodsPanel = ({
       )}
       <Footer>
         <PaginationActions>
-          <VscodeButton
-            appearance="icon"
+          <ActionButton
             aria-label="Previous modeling"
             onClick={handlePreviousClick}
             disabled={modeledMethods.length < 2 || selectedIndex === 0}
           >
             <Codicon name="chevron-left" />
-          </VscodeButton>
+          </ActionButton>
           {modeledMethods.length > 1 && (
             <div>
               {selectedIndex + 1}/{modeledMethods.length}
             </div>
           )}
-          <VscodeButton
-            appearance="icon"
+          <ActionButton
             aria-label="Next modeling"
             onClick={handleNextClick}
             disabled={
@@ -191,25 +190,23 @@ export const MultipleModeledMethodsPanel = ({
             }
           >
             <Codicon name="chevron-right" />
-          </VscodeButton>
+          </ActionButton>
         </PaginationActions>
         <ModificationActions>
-          <VscodeButton
-            appearance="icon"
+          <ActionButton
             aria-label="Delete modeling"
             onClick={handleRemoveClick}
             disabled={!canRemoveModeledMethod(modeledMethods)}
           >
             <Codicon name="trash" />
-          </VscodeButton>
-          <VscodeButton
-            appearance="icon"
+          </ActionButton>
+          <ActionButton
             aria-label="Add modeling"
             onClick={handleAddClick}
             disabled={!canAddNewModeledMethod(modeledMethods)}
           >
             <Codicon name="add" />
-          </VscodeButton>
+          </ActionButton>
         </ModificationActions>
       </Footer>
     </Container>

extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx

@@ -12,6 +12,7 @@ import type { ModelEditorViewState } from "../../model-editor/shared/view-state"
 import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
 import { Tag } from "../common/Tag";
+import { ActionButton } from "../common/ActionButton/ActionButton";
 
 const LibraryContainer = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -170,16 +171,16 @@ export const LibraryRow = ({
         </NameContainer>
         {viewState.showGenerateButton &&
           viewState.mode === Mode.Application && (
-            <VscodeButton appearance="icon" onClick={handleModelFromSource}>
+            <ActionButton onClick={handleModelFromSource}>
               <Codicon name="code" label="Model from source" />
               &nbsp;Model from source
-            </VscodeButton>
+            </ActionButton>
           )}
         {viewState.mode === Mode.Application && (
-          <VscodeButton appearance="icon" onClick={handleModelDependency}>
+          <ActionButton onClick={handleModelDependency}>
             <Codicon name="references" label="Model dependency" />
             &nbsp;Model dependency
-          </VscodeButton>
+          </ActionButton>
         )}
       </TitleContainer>
       {isExpanded && (

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -1,4 +1,3 @@
-import { VscodeButton } from "@vscode-elements/react-elements";
 import {
   forwardRef,
   useCallback,
@@ -10,6 +9,8 @@ import {
 import { styled } from "styled-components";
 import { vscode } from "../vscode-api";
 import { Link } from "../common/Link";
+import { ActionButton } from "../common/ActionButton/ActionButton";
+import "../common/ActionButton/ActionButton.css";
 
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
@@ -61,7 +62,7 @@ const ViewLink = styled(Link)`
   white-space: nowrap;
 `;
 
-const CodiconRow = styled(VscodeButton)`
+const CodiconRow = styled(ActionButton)`
   min-height: calc(var(--input-height) * 1px);
   align-items: center;
 `;
@@ -319,7 +320,6 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                   ></ModelAlertsIndicator>
                   {index === 0 ? (
                     <CodiconRow
-                      appearance="icon"
                       aria-label="Add new model"
                       onClick={(event: React.MouseEvent) => {
                         event.stopPropagation();
@@ -331,7 +331,6 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     </CodiconRow>
                   ) : (
                     <CodiconRow
-                      appearance="icon"
                       aria-label="Remove model"
                       onClick={(event: React.MouseEvent) => {
                         event.stopPropagation();