Fixing fonts and base font size (#18412)

microsoft · Nov 15, 2024 · 44148ef · 44148ef
1 parent 5f5a16e
commit 44148ef
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/reactviews/common/theme.ts b/src/reactviews/common/theme.ts
@@ -76,4 +76,9 @@ export const webviewTheme: fluentui.Theme = {
     // This specifies the background color for an error message box
     colorStatusDangerBackground1:
         "var(--vscode-diffEditor-removedTextBackground)",
+    fontSizeBase300: "13px",
+    fontFamilyBase: "var(--vscode-font-family)",
+    fontFamilyNumeric: "var(--vscode-font-family)",
+    fontFamilyMonospace: "var(--vscode-editor-font-family)",
+    lineHeightBase300: "1.4em",
 };
diff --git a/src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx b/src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx
@@ -3,6 +3,11 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import {
+    ArrowClockwise16Filled,
+    Delete16Regular,
+    ServerRegular,
+} from "@fluentui/react-icons";
 import {
     Button,
     Card,
@@ -13,15 +18,11 @@ import {
     makeStyles,
     tokens,
 } from "@fluentui/react-components";
-import {
-    ServerRegular,
-    ArrowClockwise16Filled,
-    Delete16Regular,
-} from "@fluentui/react-icons";
 import { MouseEventHandler, useContext } from "react";
+
 import { ConnectionDialogContext } from "./connectionDialogStateProvider";
-import { locConstants } from "../../common/locConstants";
 import { IConnectionDialogProfile } from "../../../sharedInterfaces/connectionDialog";
+import { locConstants } from "../../common/locConstants";
 
 const buttonContainer = "buttonContainer";
 
@@ -170,7 +171,7 @@ export const ConnectionCard = ({
             }}
         >
             <CardHeader
-                image={<ServerRegular />}
+                image={<ServerRegular fontSize={20} />}
                 header={connection.displayName}
                 action={
                     actionButton && (