UX improvements for Bicep visualizer: added icons, themes, etc. (Azur…

…e#3736)

* Add light theme and high contrast theme

* Use --vscode-font-family

* Add common resource icons

* Add reference to azure architecture icons ToU

* Fix lint issue

README.md

@@ -130,5 +130,10 @@ Because we are now treating the ARM Template as an IL, we expect and encourage o
 
 When using the Bicep VS Code extension, VS Code collects usage data and sends it to Microsoft to help improve our products and services. Read our [privacy statement](https://go.microsoft.com/fwlink/?LinkID=528096&clcid=0x409) to learn more. If you don’t wish to send usage data to Microsoft, you can set the `telemetry.enableTelemetry` setting to `false`. Learn more in our [FAQ](https://code.visualstudio.com/docs/supporting/faq#_how-to-disable-telemetry-reporting).
 
+## License
+All files except for the [Azure Architecture SVG Icons](./src/vscode-bicep/src/visualizer/app/assets/icons/azure) in the repository are subject to the [MIT license](./LICENSE).
+
+The [Azure Architecture SVG Icons](./src/vscode-bicep/src/visualizer/app/assets/icons/azure) used in the Bicep VS Code extension are subject to the [Terms of Use](https://docs.microsoft.com/en-us/azure/architecture/icons/#terms).
+
 ## Contributing
 See [Contributing to Bicep](./CONTRIBUTING.md) for information on building/running the code, contributing code, contributing examples and contributing feature requests or bug reports.

src/vscode-bicep/src/test/snapshot/App.test.tsx

@@ -22,6 +22,23 @@ describe("component App", () => {
  Array [
  .c0 {
  position: absolute;
+ left: 0px;
+ top: 0px;
+ bottom: 0px;
+ right: 0px;
+ overflow: hidden;
+ background-color: #111111;
+ background-image: radial-gradient(circle at 1px 1px,#3f3f3f 1px,transparent 0);
+ background-size: 24px 24px;
+ background-position: 12px 12px;
+ }
+
+ <div
+ className="c0"
+ />,
+ .c0 {
+ position: absolute;
+ height: 32px;
  left: 20px;
  bottom: 20px;
  display: -webkit-box;
@@ -40,7 +57,7 @@ describe("component App", () => {
  .c1 {
  width: 8px;
  height: 8px;
- background-color: green;
+ background-color: Green;
  border-radius: 50%;
  color: white;
  margin-top: 2px;
@@ -57,18 +74,6 @@ describe("component App", () => {
  There is no resources or modules in the file. Nothing to render.
  </div>
  </div>,
- .c0 {
- position: absolute;
- left: 0px;
- top: 0px;
- bottom: 0px;
- right: 0px;
- overflow: hidden;
- }
-
- <div
- className="c0"
- />,
  ]
  `);
  });

src/vscode-bicep/src/test/snapshot/Graph.test.tsx

@@ -4,10 +4,13 @@ import renderer from "react-test-renderer";
 import "jest-styled-components";
 
 import { Graph } from "../../visualizer/app/components/Graph";
+import { darkTheme } from "../../visualizer/app/components/themes";
 
 describe("component Graph", () => {
  it("should render", () => {
- const tree = renderer.create(<Graph elements={[]} />).toJSON();
+ const tree = renderer
+ .create(<Graph elements={[]} theme={darkTheme} />)
+ .toJSON();
 
  expect(tree).toMatchInlineSnapshot(`
  .c0 {
@@ -17,6 +20,10 @@ describe("component Graph", () => {
  bottom: 0px;
  right: 0px;
  overflow: hidden;
+ background-color: #111111;
+ background-image: radial-gradient(circle at 1px 1px,#3f3f3f 1px,transparent 0);
+ background-size: 24px 24px;
+ background-position: 12px 12px;
  }
 
  <div