Add 'theia-widget-noInfo' css class to fix message inconsistencies

Fixes #5716

- fixed the inconsistent padding present in the `outline` and `problems` view when no information is present.
- added a new `widget.css` file which will be used to describe widget specific styling
- added the new css class `theia-widget-noInfo` used for widget messages

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

packages/core/src/browser/style/index.css

@@ -196,3 +196,4 @@ textarea {
 @import './notification.css';
 @import './alert-messages.css';
 @import './icons.css';
+@import './widget.css';

packages/core/src/browser/style/widget.css

@@ -0,0 +1,19 @@
+/********************************************************************************
+ * Copyright (C) 2019 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.theia-widget-noInfo {
+    padding: 10px;
+}

packages/markers/src/browser/problem/problem-widget.tsx

@@ -96,7 +96,7 @@ export class ProblemWidget extends TreeWidget {
         if (MarkerRootNode.is(model.root) && model.root.children.length > 0) {
             return super.renderTree(model);
         }
-        return <div className='noMarkers'>No problems have been detected in the workspace so far.</div>;
+        return <div className='theia-widget-noInfo noMarkers'>No problems have been detected in the workspace so far.</div>;
     }
 
     protected renderCaption(node: TreeNode, props: NodeProps): React.ReactNode {

packages/markers/src/browser/style/index.css

@@ -19,10 +19,6 @@
     color: var(--theia-ui-font-color1);
 }
 
-.theia-marker-container .noMarkers {
-    padding: 5px;
-}
-
 .theia-side-panel .theia-marker-container .noMarkers {
     padding-left: 19px;
 }

packages/outline-view/src/browser/outline-view-widget.tsx

@@ -126,7 +126,7 @@ export class OutlineViewWidget extends TreeWidget {
 
     protected renderTree(model: TreeModel): React.ReactNode {
         if (CompositeTreeNode.is(this.model.root) && !this.model.root.children.length) {
-            return <div className='no-outline'>No outline information available.</div>;
+            return <div className='theia-widget-noInfo no-outline'>No outline information available.</div>;
         }
         return super.renderTree(model);
     }

packages/outline-view/src/browser/styles/index.css

@@ -20,7 +20,6 @@
 
 .no-outline {
     color: var(--theia-ui-font-color0);
-    padding: 10px;
     text-align: left;
 }