Minor styling updates (#19468)

* Minor styling updates

* making advanced connection styling consistent with table designer

Author: Benjin

src/reactviews/common/forms/form.component.tsx

@@ -176,10 +176,7 @@ export const FormField = <
                         return (
                             <Button
                                 key={idx + actionButton.id}
-                                appearance="outline"
-                                style={{
-                                    width: "120px",
-                                }}
+                                style={{ width: "auto", whiteSpace: "nowrap" }}
                                 onClick={() =>
                                     context?.formAction({
                                         propertyName: component.propertyName,

src/reactviews/common/styles.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { makeStyles } from "@fluentui/react-components";
+
+export const useAccordionStyles = makeStyles({
+    accordionItem: {
+        border: "0.5px solid var(--vscode-editorWidget-border)",
+        borderRadius: "2px",
+        margin: "10px",
+    },
+});

src/reactviews/pages/ConnectionDialog/components/advancedOptionsDrawer.component.tsx

@@ -28,6 +28,7 @@ import {
     ConnectionDialogWebviewState,
     IConnectionDialogProfile,
 } from "../../../../sharedInterfaces/connectionDialog";
+import { useAccordionStyles } from "../../../common/styles";
 
 export const AdvancedOptionsDrawer = ({
     isAdvancedDrawerOpen,
@@ -39,6 +40,7 @@ export const AdvancedOptionsDrawer = ({
     const context = useContext(ConnectionDialogContext);
     const [searchSettingsText, setSearchSettingText] = useState<string>("");
     const [userOpenedSections, setUserOpenedSections] = useState<string[]>(["General"]);
+    const accordionStyles = useAccordionStyles();
 
     if (context === undefined) {
         return undefined;
@@ -119,7 +121,10 @@ export const AdvancedOptionsDrawer = ({
                         .filter((group) => doesGroupHaveVisibleOptions(group))
                         .map((group, groupIndex) => {
                             return (
-                                <AccordionItem value={group.groupName} key={groupIndex}>
+                                <AccordionItem
+                                    value={group.groupName}
+                                    key={groupIndex}
+                                    className={accordionStyles.accordionItem}>
                                     <AccordionHeader>{group.groupName}</AccordionHeader>
                                     <AccordionPanel>
                                         {group.options

src/reactviews/pages/ObjectExplorerFilter/ObjectExplorerFilterPage.tsx

@@ -425,6 +425,7 @@ export const ObjectExplorerFilterPage = () => {
                     <Tooltip content="Clear" relationship="label">
                         <Button
                             size="small"
+                            appearance="subtle"
                             icon={<EraserRegular />}
                             onClick={() => {
                                 if (

src/reactviews/pages/TableDesigner/designerPropertiesPane.tsx

@@ -28,6 +28,7 @@ import {
 } from "../../../sharedInterfaces/tableDesigner";
 import { ChevronRightFilled, ChevronLeftFilled, DismissRegular } from "@fluentui/react-icons";
 import { locConstants } from "../../common/locConstants";
+import { useAccordionStyles } from "../../common/styles";
 
 const useStyles = makeStyles({
     root: {
@@ -68,6 +69,7 @@ const useStyles = makeStyles({
 
 export const DesignerPropertiesPane = () => {
     const classes = useStyles();
+    const accordionStyles = useAccordionStyles();
     const context = useContext(TableDesignerContext);
     if (!context) {
         return null;
@@ -100,14 +102,7 @@ export const DesignerPropertiesPane = () => {
             return undefined;
         }
         return (
-            <AccordionItem
-                value={group}
-                key={group}
-                style={{
-                    border: "0.5px solid var(--vscode-editorWidget-border)",
-                    borderRadius: "2px",
-                    margin: "10px",
-                }}>
+            <AccordionItem value={group} className={accordionStyles.accordionItem} key={group}>
                 <AccordionHeader>{group}</AccordionHeader>
                 <AccordionPanel>
                     <div className={classes.group}>