Updating Connection Dialog header (#19008)

* Updating Connection Dialog header and icon

* loc update

Author: Benjin

localization/l10n/bundle.l10n.json

@@ -194,7 +194,7 @@
   "Advanced Connection Settings": "Advanced Connection Settings",
   "Advanced": "Advanced",
   "Test Connection": "Test Connection",
-  "Connect to SQL Server": "Connect to SQL Server",
+  "Connect to Database": "Connect to Database",
   "Parameters": "Parameters",
   "Connection String": "Connection String",
   "Browse Azure": "Browse Azure",

localization/xliff/vscode-mssql.xlf

@@ -270,8 +270,8 @@
     <trans-unit id="++CODE++1a2303ede07493acc7caaa7c737f3c52bcc9cf04372be19ed1b0af6b9f2c791e">
       <source xml:lang="en">Connect</source>
     </trans-unit>
-    <trans-unit id="++CODE++8a8bef20f041d1f1fc0ea7966a3fa58563c599617464a303258ed302ddca5a79">
-      <source xml:lang="en">Connect to SQL Server</source>
+    <trans-unit id="++CODE++150851f09acf7f6f4d53e35fb619389c38558ea5b98d3a13efaf84b3eda50422">
+      <source xml:lang="en">Connect to Database</source>
     </trans-unit>
     <trans-unit id="++CODE++b6c3dc8ba33b3a93b9060f81da8fa7d496f07487cec7a12353257242b2ea9e24">
       <source xml:lang="en">Connected to server &quot;{0}&quot; on document &quot;{1}&quot;. Server information: {2}</source>

media/database_dark.svg

@@ -164,7 +164,7 @@ export class LocConstants {
             advancedConnectionSettings: l10n.t("Advanced Connection Settings"),
             advancedSettings: l10n.t("Advanced"),
             testConnection: l10n.t("Test Connection"),
-            connectToSQLServer: l10n.t("Connect to SQL Server"),
+            connectToDatabase: l10n.t("Connect to Database"),
             parameters: l10n.t("Parameters"),
             connectionString: l10n.t("Connection String"),
             browseAzure: l10n.t("Browse Azure"),

media/database_light.svg

@@ -10,8 +10,8 @@ import { ConnectionDialogContext } from "../connectionDialogStateProvider";
 import { locConstants } from "../../../common/locConstants";
 import { useContext } from "react";
 
-const sqlServerImage = require("../../../../../media/sqlServer_light.svg");
-const sqlServerImageDark = require("../../../../../media/sqlServer_dark.svg");
+const databaseIconLight = require("../../../../../media/database_light.svg");
+const databaseIconDark = require("../../../../../media/database_dark.svg");
 
 export const ConnectionHeader = () => {
     const connectionDialogContext = useContext(ConnectionDialogContext);
@@ -29,10 +29,10 @@ export const ConnectionHeader = () => {
                 }}
                 src={
                     connectionDialogContext?.themeKind === ColorThemeKind.Light
-                        ? sqlServerImage
-                        : sqlServerImageDark
+                        ? databaseIconLight
+                        : databaseIconDark
                 }
-                alt="SQL Server"
+                alt={locConstants.connectionDialog.connectToDatabase}
                 height={60}
                 width={60}
             />
@@ -43,7 +43,7 @@ export const ConnectionHeader = () => {
                 }}
                 weight="medium"
             >
-                {locConstants.connectionDialog.connectToSQLServer}
+                {locConstants.connectionDialog.connectToDatabase}
             </Text>
         </div>
     );