Merge pull request #3 from ryankeairns/empty-screen-redesign

Update dashboard empty styles

src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss

@@ -6,13 +6,23 @@
 
 .dshStartScreen {
   text-align: center;
-  padding: $euiSizeS;
+}
+
+.dshStartScreen__pageContent {
+  padding: $euiSizeXXL;
+}
+
+.dshStartScreen__panelDesc {
+  max-width: 260px;
+  margin: 0 auto;
 }
 
 .dshEmptyWidget {
-  border: 2px dashed $euiColorLightShade;
-  padding: 4 * $euiSize;
-  max-width: 20em;
-  margin-left: 10px;
+  border: $euiBorderThin;
+  border-style:  dashed;
+  border-radius: $euiBorderRadius;
+  padding: $euiSizeXXL * 2;
+  max-width: 400px;
+  margin-left: $euiSizeS;
   text-align: center;
 }

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.tsx

@@ -48,7 +48,7 @@ export function DashboardEmptyScreen({
 }: DashboardEmptyScreenProps) {
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
   const emptyStateGraphicURL = IS_DARK_THEME
-    ? '/plugins/kibana/home/assets/welcome_graphic_light_2x.png'
+    ? '/plugins/kibana/home/assets/welcome_graphic_dark_2x.png'
     : '/plugins/kibana/home/assets/welcome_graphic_light_2x.png';
   const linkToVisualizeParagraph = (
     <p data-test-subj="linkToVisualizeParagraph">
@@ -99,27 +99,28 @@ export function DashboardEmptyScreen({
     constants.addExistingVisualizationLinkAriaLabel
   );
   const viewMode = (
-    <EuiPage className="dshStartScreen" restrictWidth="36em">
+    <EuiPage className="dshStartScreen" restrictWidth="500px">
       <EuiPageBody>
-        <EuiPageContent verticalPosition="center" horizontalPosition="center">
-          <EuiImage
-            style={{ width: 480 }}
-            url={http.basePath.prepend(emptyStateGraphicURL)}
-            alt=""
-          />
+        <EuiPageContent
+          verticalPosition="center"
+          horizontalPosition="center"
+          paddingSize="none"
+          className="dshStartScreen__pageContent"
+        >
+          <EuiImage url={http.basePath.prepend(emptyStateGraphicURL)} alt="" />
           <EuiText size="m">
             <p style={{ fontWeight: 'bold' }}>{constants.fillDashboardTitle}</p>
           </EuiText>
           <EuiSpacer size="m" />
-          {enterEditModeParagraph}
+          <div className="dshStartScreen__panelDesc">{enterEditModeParagraph}</div>
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
   );
   const editMode = (
     <div data-test-subj="emptyDashboardWidget" className="dshEmptyWidget">
       {enterViewModeParagraph}
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       {linkToVisualizeParagraph}
     </div>
   );

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen_constants.tsx

@@ -32,7 +32,7 @@ export const howToStartWorkingOnNewDashboardDescription1: string = i18n.translat
 export const howToStartWorkingOnNewDashboardDescription2: string = i18n.translate(
   'kbn.dashboard.howToStartWorkingOnNewDashboardDescription2',
   {
-    defaultMessage: 'button in the menu bar above to start working on your new dashboard.',
+    defaultMessage: 'in the menu bar above to start adding panels.',
   }
 );
 export const howToStartWorkingOnNewDashboardEditLinkText: string = i18n.translate(
@@ -63,7 +63,7 @@ export const addExistingVisualizationLinkAriaLabel: string = i18n.translate(
 export const addNewVisualizationDescription: string = i18n.translate(
   'kbn.dashboard.addNewVisualizationText',
   {
-    defaultMessage: 'or a new object to this dashboard',
+    defaultMessage: 'or new object to this dashboard',
   }
 );
 export const createNewVisualizationButton: string = i18n.translate(