Use application name for 'getting-started' title

- Set the title of the `getting-started` widget by getting the `application-name` which
has been recently supported
- Makes it much easier for theia applications to set their custom name, and reflect it in
the `getting-started` widget
- Minor css cleanup (remove unused class names, updated css to reflect updated name)

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>

packages/getting-started/src/browser/getting-started-widget.tsx

@@ -25,6 +25,7 @@ import { FileSystemUtils } from '@theia/filesystem/lib/common/filesystem-utils';
 import { KeymapsCommands } from '@theia/keymaps/lib/browser';
 import { CommonCommands } from '@theia/core/lib/browser';
 import { ApplicationInfo, ApplicationServer } from '@theia/core/lib/common/application-protocol';
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
 
 @injectable()
 export class GettingStartedWidget extends ReactWidget {
@@ -33,6 +34,7 @@ export class GettingStartedWidget extends ReactWidget {
     static readonly LABEL = 'Getting Started';
 
     protected applicationInfo: ApplicationInfo | undefined;
+    protected applicationName = FrontendApplicationConfigProvider.get().applicationName;
 
     protected stat: FileStat | undefined;
     protected home: string | undefined;
@@ -104,7 +106,7 @@ export class GettingStartedWidget extends ReactWidget {
 
     protected renderHeader(): React.ReactNode {
         return <div className='gs-header'>
-            <h1>Theia <span className='gs-sub-header'>Getting Started</span></h1>
+            <h1>{this.applicationName}<span className='gs-sub-header'> Getting Started</span></h1>
         </div>;
     }
 
@@ -182,7 +184,7 @@ export class GettingStartedWidget extends ReactWidget {
     protected renderVersion(): React.ReactNode {
         return <div className='gs-section'>
             <div className='gs-action-container'>
-                <p className='gs-sub-header gs-version' >
+                <p className='gs-sub-header' >
                     {this.applicationInfo ? 'Version ' + this.applicationInfo.version : ''}
                 </p>
             </div>

packages/getting-started/src/browser/style/index.css

@@ -46,7 +46,6 @@ html, body {
     color: var(--theia-ui-font-color0);
     flex: 1;
     font-weight: 600;
-    text-transform: uppercase;
 }
 
 .gs-hr {
@@ -84,7 +83,7 @@ html, body {
 }
 
 .gs-sub-header {
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-ui-font-color2);
     text-transform: capitalize;
     font-weight: 400;
 }