Improve styling in about dialog

Author: krassowski

packages/completion-theme/src/about.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { ICompletionTheme, ILicenseInfo } from './types';
+import { ICompletionTheme, ILicenseInfo, COMPLETER_THEME_PREFIX  } from './types';
 import { LabIcon } from '@jupyterlab/ui-components';
 
 function render_licence(licence: ILicenseInfo): ReactElement {
@@ -32,7 +32,7 @@ function render_theme(
     );
   }
   return (
-    <div className={'lsp-completer-themes'}>
+    <div className={'lsp-completer-themes ' + COMPLETER_THEME_PREFIX + theme.id}>
       <h4>
         {theme.name}
         {is_current ? ' (current)' : ''}

packages/completion-theme/src/index.ts

@@ -10,7 +10,8 @@ import {
   ICompletionIconSet,
   ICompletionTheme,
   ILSPCompletionThemeManager,
-  PLUGIN_ID
+  PLUGIN_ID,
+  COMPLETER_THEME_PREFIX
 } from './types';
 import { render_themes_list } from './about';
 import '../style/index.css';
@@ -91,7 +92,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager {
   }
 
   protected get current_theme_class() {
-    return 'lsp-completer-theme-' + this.current_theme_id;
+    return COMPLETER_THEME_PREFIX + this.current_theme_id;
   }
 
   set_theme(id: string | null) {

packages/completion-theme/src/types.ts

@@ -1,6 +1,8 @@
 import { Token } from '@lumino/coreutils';
 import { LabIcon } from '@jupyterlab/ui-components';
 
+export const COMPLETER_THEME_PREFIX = 'lsp-completer-theme-';
+
 // TODO, once features are extracted to standalone packages,
 //  import the CompletionItemKindStrings from @feature-completer
 enum CompletionItemKind {