fix database info banner link (#30330) (#30428)

Co-authored-by: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>

frontend/src/metabase/databases/components/DatabaseInfoField/DatabaseInfoField.styled.tsx

 import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
+import Banner from "metabase/components/Banner";
 
-export const InfoBanner = styled.div`
-  padding: 0.75rem;
-  border-radius: 6px;
-  color: ${color("text-medium")};
-  background-color: ${color("bg-light")};
+export const InfoBanner = styled(Banner)`
+  margin-bottom: 0.5rem;
 `;

frontend/src/metabase/databases/components/DatabaseInfoField/DatabaseInfoField.unit.spec.tsx

+import React from "react";
+import { render, screen } from "@testing-library/react";
+import DatabaseInfoField from "./DatabaseInfoField";
+
+describe("DatabaseInfoField", () => {
+  it("renders markdown links", () => {
+    const content = 'Text "[link](https://www.metabase.com/)';
+    render(<DatabaseInfoField placeholder={content} />);
+
+    const link = screen.getByRole("link");
+
+    expect(link).toHaveTextContent("link");
+    expect(link).toHaveAttribute("href", "https://www.metabase.com/");
+  });
+});