use custom close icon in dialogs

Author: fstasi

Diff for: arduino-ide-extension/src/browser/boards/boards-config-dialog.ts

@@ -1,11 +1,7 @@
 import { injectable, inject, postConstruct } from 'inversify';
 import { Message } from '@phosphor/messaging';
-import {
-  AbstractDialog,
-  DialogProps,
-  Widget,
-  DialogError,
-} from '@theia/core/lib/browser';
+import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
 import { BoardsConfig } from './boards-config';
 import { BoardsService } from '../../common/protocol/boards-service';
 import { BoardsServiceProvider } from './boards-service-provider';

Diff for: arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { inject, injectable, postConstruct } from 'inversify';
-import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@phosphor/widgets';
 import { Message } from '@phosphor/messaging';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';

Diff for: arduino-ide-extension/src/browser/dialogs/cloud-share-sketch-dialog.tsx

@@ -3,11 +3,8 @@ import { inject, injectable } from 'inversify';
 import { Widget } from '@phosphor/widgets';
 import { Message } from '@phosphor/messaging';
 import { clipboard } from 'electron';
-import {
-  AbstractDialog,
-  ReactWidget,
-  DialogProps,
-} from '@theia/core/lib/browser';
+import { ReactWidget, DialogProps } from '@theia/core/lib/browser';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
 import { CreateApi } from '../create/create-api';
 
 const RadioButton = (props: {

Diff for: arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { inject, injectable, postConstruct } from 'inversify';
-import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@phosphor/widgets';
 import { Message } from '@phosphor/messaging';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';

Diff for: arduino-ide-extension/src/browser/library/library-list-widget.ts

@@ -1,7 +1,8 @@
 import { injectable, postConstruct, inject } from 'inversify';
 import { Message } from '@phosphor/messaging';
 import { addEventListener } from '@theia/core/lib/browser/widgets/widget';
-import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
 import {
   LibraryPackage,
   LibraryService,

Diff for: arduino-ide-extension/src/browser/settings.tsx

@@ -17,7 +17,6 @@ import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/fil
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 import {
-  AbstractDialog,
   DialogProps,
   PreferenceService,
   PreferenceScope,
@@ -33,6 +32,7 @@ import {
   Network,
   ProxySettings,
 } from '../common/protocol';
+import { AbstractDialog } from './theia/dialogs/dialogs';
 
 const EDITOR_SETTING = 'editor';
 const FONT_SIZE_SETTING = `${EDITOR_SETTING}.fontSize`;

Diff for: arduino-ide-extension/src/browser/style/fonts.css

@@ -9,7 +9,7 @@
   font-display: block;
 }
 
-i {
+.fa {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'FontAwesome' !important;
   speak: never;

Diff for: arduino-ide-extension/src/browser/theia/dialogs/dialogs.ts

@@ -0,0 +1,17 @@
+import { injectable, inject } from 'inversify';
+
+import {
+  AbstractDialog as TheiaAbstractDialog,
+  codiconArray,
+  DialogProps,
+} from '@theia/core/lib/browser';
+
+@injectable()
+export abstract class AbstractDialog<T> extends TheiaAbstractDialog<T> {
+  constructor(@inject(DialogProps) protected readonly props: DialogProps) {
+    super(props);
+
+    this.closeCrossNode.classList.remove(...codiconArray('close'));
+    this.closeCrossNode.classList.add('fa', 'fa-close');
+  }
+}