From 3eb19cac4a66eef54678fb7a736dc1d6a2c1e264 Mon Sep 17 00:00:00 2001
From: Vasily Malykhin <malykhinvi@gmail.com>
Date: Sat, 9 Mar 2019 13:07:03 +0300
Subject: [PATCH] Fix #5785 - welcome component in dark theme

---
 .../storyshot.enzyme.test.js.snap             |   4 +-
 ...t.snapshotWithOptionsFunction.test.js.snap |   4 +-
 .../__snapshots__/Welcome.stories.foo         |   4 +-
 .../__snapshots__/Welcome.stories.storyshot   |   4 +-
 app/angular/src/demo/welcome.component.ts     |   4 +-
 app/react/src/demo/Welcome.js                 |   4 +-
 .../stories/__snapshots__/welcome.storyshot   |   2 +-
 examples/ember-cli/app/styles/app.css         |   4 +-
 .../html-kitchen-sink/stories/welcome.css     |   4 +-
 examples/mithril-kitchen-sink/src/Welcome.js  |   4 +-
 .../other-demo.stories.storyshot              |   2 +-
 examples/preact-kitchen-sink/src/Welcome.js   |   4 +-
 .../__snapshots__/index.stories.storyshot     |   4 +-
 .../riot-kitchen-sink/src/stories/Welcome.tag |   4 +-
 .../src/stories/__snapshots__/index.storyshot |  16 +-
 .../src/stories/views/WelcomeView.svelte      |   4 +-
 .../vue-kitchen-sink/src/stories/Welcome.vue  |   4 +-
 .../MITHRIL/template/stories/Welcome.js       |   4 +-
 .../PREACT/template/stories/Welcome.js        |   4 +-
 .../RIOT/template/stories/Welcome.tag         | 186 +++++++++---------
 .../SFC_VUE/template/src/stories/Welcome.vue  |   4 +-
 .../VUE/template/stories/Welcome.js           |   4 +-
 .../stories/Welcome.js                        |   4 +-
 23 files changed, 141 insertions(+), 141 deletions(-)

diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
index 47f926ed977e..cae5deca1852 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -120,10 +120,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     <article
       style={
         Object {
+          "backgroundColor": "#fff",
           "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
           "lineHeight": 1.4,
-          "margin": 15,
-          "maxWidth": 600,
+          "padding": 15,
         }
       }
     >
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
index 4fdce3e57188..dd98d76c66d5 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
@@ -100,10 +100,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
index de427853143f..1fda01fe66a0 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
@@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
index de427853143f..1fda01fe66a0 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
@@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >
diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts
index c8348edbcec8..3697700f54b8 100644
--- a/app/angular/src/demo/welcome.component.ts
+++ b/app/angular/src/demo/welcome.component.ts
@@ -46,10 +46,10 @@ import { Component, Output, EventEmitter } from '@angular/core';
   styles: [
     `
       main {
-        margin: 15px;
-        max-width: 600;
+        padding: 15px;
         line-height: 1.4;
         fontfamily: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+        background-color: #ffffff;
       }
 
       .note {
diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.js
index 687796bc5dfb..0c5a4cafaf5f 100644
--- a/app/react/src/demo/Welcome.js
+++ b/app/react/src/demo/Welcome.js
@@ -5,10 +5,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#fff',
     }}
   />
 );
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
index 2f536812779a..2408d8cf68a5 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Welcome to Storybook 1`] = `
 <article
-  style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
+  style="padding:15px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif;background-color:#fff"
 >
   <h1>
     Welcome to storybook
diff --git a/examples/ember-cli/app/styles/app.css b/examples/ember-cli/app/styles/app.css
index 82171a5b4ecc..30fa0b480d13 100644
--- a/examples/ember-cli/app/styles/app.css
+++ b/examples/ember-cli/app/styles/app.css
@@ -30,10 +30,10 @@ a {
 }
 
 .main {
-  margin: 15px;
-  max-width: 600;
+  padding: 15px;
   line-height: 1.4;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  background-color: #ffffff;
 }
 
 .logo {
diff --git a/examples/html-kitchen-sink/stories/welcome.css b/examples/html-kitchen-sink/stories/welcome.css
index ea42a4983159..10b74ed6f9cc 100644
--- a/examples/html-kitchen-sink/stories/welcome.css
+++ b/examples/html-kitchen-sink/stories/welcome.css
@@ -1,8 +1,8 @@
 .main {
-    margin: 15px;
-    max-width: 600px;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
 }
 
 .logo {
diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js
index e85d5493797f..1363fa0cbe6b 100644
--- a/examples/mithril-kitchen-sink/src/Welcome.js
+++ b/examples/mithril-kitchen-sink/src/Welcome.js
@@ -6,10 +6,10 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        margin: '15px',
-        maxWidth: '600px',
+        padding: '15px',
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
       }}
     >
       {vnode.children}
diff --git a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
index 730eefa2fba7..49f1a87f0fc4 100644
--- a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
@@ -25,7 +25,7 @@ exports[`Storyshots Other|Demo/Button with text 1`] = `
 
 exports[`Storyshots Other|Demo/Welcome to Storybook 1`] = `
 <article
-  style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
+  style="padding:15px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif;background-color:#fff"
 >
   <h1>
     Welcome to storybook
diff --git a/examples/preact-kitchen-sink/src/Welcome.js b/examples/preact-kitchen-sink/src/Welcome.js
index b83a12e2c40b..53ec35fc114a 100644
--- a/examples/preact-kitchen-sink/src/Welcome.js
+++ b/examples/preact-kitchen-sink/src/Welcome.js
@@ -6,10 +6,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#ffffff',
     }}
   />
 );
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index 660d4bdf5710..9e0d000a05e2 100644
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -27,10 +27,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#ffffff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >
diff --git a/examples/riot-kitchen-sink/src/stories/Welcome.tag b/examples/riot-kitchen-sink/src/stories/Welcome.tag
index a3965f4ff449..ace441a10860 100644
--- a/examples/riot-kitchen-sink/src/stories/Welcome.tag
+++ b/examples/riot-kitchen-sink/src/stories/Welcome.tag
@@ -58,10 +58,10 @@
 
 <style>
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
index cc251a66639a..c9855acafb00 100644
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -105,7 +105,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="main svelte-1unvhkg"
+    class="main svelte-5n9a95"
   >
     <h1>
       Welcome to Storybook for Svelte
@@ -123,7 +123,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
       
 			    We've added some basic stories inside the 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         src/stories
       </code>
@@ -141,7 +141,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 
 			  
     <h1
-      class="logo svelte-1unvhkg"
+      class="logo svelte-5n9a95"
     >
       Svelte
     </h1>
@@ -157,14 +157,14 @@ exports[`Storyshots Welcome Welcome 1`] = `
       
 			    (Try editing the 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         Button
       </code>
        component
 			    located at 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         src/stories/views/Welcome.svelte
       </code>
@@ -181,7 +181,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    Have a look at the
 			    
       <a
-        class="link svelte-1unvhkg"
+        class="link svelte-5n9a95"
         href="https://storybook.js.org/basics/writing-stories"
         target="_blank"
       >
@@ -194,7 +194,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
     
 			  
     <p
-      class="note svelte-1unvhkg"
+      class="note svelte-5n9a95"
     >
       <b>
         NOTE:
@@ -206,7 +206,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    Have a look at the
 			    
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         .storybook/webpack.config.js
       </code>
diff --git a/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte b/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
index d401629d8a88..f3bfc9442b3d 100644
--- a/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
@@ -43,10 +43,10 @@
   @import url('https://fonts.googleapis.com/css?family=Rajdhani');
 
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {
diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue
index 20217f381ea7..6c5258652043 100644
--- a/examples/vue-kitchen-sink/src/stories/Welcome.vue
+++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@@ -65,10 +65,10 @@
 
 <style>
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {
diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.js b/lib/cli/generators/MITHRIL/template/stories/Welcome.js
index cef0d3127fd3..33ab199fc54e 100644
--- a/lib/cli/generators/MITHRIL/template/stories/Welcome.js
+++ b/lib/cli/generators/MITHRIL/template/stories/Welcome.js
@@ -7,10 +7,10 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        margin: '15px',
-        maxWidth: '600px',
+        padding: '15px',
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
       }}
     >
       {vnode.children}
diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.js b/lib/cli/generators/PREACT/template/stories/Welcome.js
index 097111470e6f..d3d8d1253fbe 100644
--- a/lib/cli/generators/PREACT/template/stories/Welcome.js
+++ b/lib/cli/generators/PREACT/template/stories/Welcome.js
@@ -5,10 +5,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#ffffff',
     }}
   />
 );
diff --git a/lib/cli/generators/RIOT/template/stories/Welcome.tag b/lib/cli/generators/RIOT/template/stories/Welcome.tag
index 0866a54e125b..73149469a7a3 100644
--- a/lib/cli/generators/RIOT/template/stories/Welcome.tag
+++ b/lib/cli/generators/RIOT/template/stories/Welcome.tag
@@ -1,93 +1,93 @@
-<welcome>
-  <div class="main">
-    <h1>Welcome to STORYBOOK</h1>
-    <p>
-      This is a UI component dev environment for your app.
-    </p>
-    <p>
-      We've added some basic stories inside the
-      <br />
-      <code class="code">src/stories</code>
-      <br /> directory.
-      <br /> A story is a single state of one or more UI components. You can have as many stories as you want.
-      <br /> (Basically a story is like a visual test case.)
-    </p>
-    <p>
-      See these sample
-      <br />
-      <a class="link" onclick={onClick} role="button" tabIndex="0">stories</a>
-      <br /> for a component called
-      <br />
-      <code class="code">Button</code> .
-    </p>
-    <p>
-      Just like that, you can add your own components as stories.
-      <br /> You can also edit those components and see changes right away.
-      <br /> (Try editing the
-      <code class="code">Button</code> component located at
-      <code class="code">src/stories/Button.js</code>.)
-    </p>
-    <p>
-      This is just one thing you can do with Storybook.
-      <br /> Have a look at the
-      <br />
-      <a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer">
-        Storybook
-      </a>
-      <br /> repo for more information.
-    </p>
-    <p class="note">
-      <b>NOTE:</b>
-      <br /> Have a look at the
-      <br />
-      <code class="code">.storybook/webpack.config.js</code>
-      <br /> to add webpack loaders and plugins you are using in this project.
-    </p>
-  </div>
-
-  <style>
-    main {
-      margin: 15;
-      max-width: 600;
-      line-height: 1.4;
-      font-family: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif'
-    }
-
-    logo {
-      width: 200
-    }
-
-    link {
-      color: '#1474f3';
-      text-decoration: 'none';
-      border-bottom: '1px solid #1474f3';
-      padding-bottom: 2
-    }
-
-    code {
-      font-size: 15;
-      font-weight: 600;
-      padding: '2px 5px';
-      border: '1px solid #eae9e9';
-      border-radius: 4;
-      background-color: '#f3f2f2';
-      color: '#3a3a3a';
-    }
-
-    note {
-      opacity: 0.5
-    }
-  </style>
-
-  <script>
-    console.log('Welcome to storybook!');
-
-    onClick(event) {
-      return function (e) {
-        event.preventDefault();
-        this.opts.showApp();
-      }.bind(this)
-    };
-  </script>
-
-</welcome>
+<welcome>
+  <div class="main">
+    <h1>Welcome to STORYBOOK</h1>
+    <p>
+      This is a UI component dev environment for your app.
+    </p>
+    <p>
+      We've added some basic stories inside the
+      <br />
+      <code class="code">src/stories</code>
+      <br /> directory.
+      <br /> A story is a single state of one or more UI components. You can have as many stories as you want.
+      <br /> (Basically a story is like a visual test case.)
+    </p>
+    <p>
+      See these sample
+      <br />
+      <a class="link" onclick={onClick} role="button" tabIndex="0">stories</a>
+      <br /> for a component called
+      <br />
+      <code class="code">Button</code> .
+    </p>
+    <p>
+      Just like that, you can add your own components as stories.
+      <br /> You can also edit those components and see changes right away.
+      <br /> (Try editing the
+      <code class="code">Button</code> component located at
+      <code class="code">src/stories/Button.js</code>.)
+    </p>
+    <p>
+      This is just one thing you can do with Storybook.
+      <br /> Have a look at the
+      <br />
+      <a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer">
+        Storybook
+      </a>
+      <br /> repo for more information.
+    </p>
+    <p class="note">
+      <b>NOTE:</b>
+      <br /> Have a look at the
+      <br />
+      <code class="code">.storybook/webpack.config.js</code>
+      <br /> to add webpack loaders and plugins you are using in this project.
+    </p>
+  </div>
+
+  <style>
+    main {
+      padding: 15;
+      line-height: 1.4;
+      font-family: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif';
+      background-color: #ffffff;
+    }
+
+    logo {
+      width: 200
+    }
+
+    link {
+      color: '#1474f3';
+      text-decoration: 'none';
+      border-bottom: '1px solid #1474f3';
+      padding-bottom: 2
+    }
+
+    code {
+      font-size: 15;
+      font-weight: 600;
+      padding: '2px 5px';
+      border: '1px solid #eae9e9';
+      border-radius: 4;
+      background-color: '#f3f2f2';
+      color: '#3a3a3a';
+    }
+
+    note {
+      opacity: 0.5
+    }
+  </style>
+
+  <script>
+    console.log('Welcome to storybook!');
+
+    onClick(event) {
+      return function (e) {
+        event.preventDefault();
+        this.opts.showApp();
+      }.bind(this)
+    };
+  </script>
+
+</welcome>
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue
index afdf3b3a26a3..d87d5f04650f 100644
--- a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue
+++ b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue
@@ -87,10 +87,10 @@
 
 <style>
   .main {
-    margin: 15px;
-    max-width: 600px;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {
diff --git a/lib/cli/generators/VUE/template/stories/Welcome.js b/lib/cli/generators/VUE/template/stories/Welcome.js
index 42b614121bdd..4c10fb179087 100644
--- a/lib/cli/generators/VUE/template/stories/Welcome.js
+++ b/lib/cli/generators/VUE/template/stories/Welcome.js
@@ -14,10 +14,10 @@ export default {
   data() {
     return {
       main: {
-        margin: 15,
-        maxWidth: 600,
+        padding: 15,
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
       },
 
       logo: {
diff --git a/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js b/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
index d126acbbed47..0c6ac3e87e89 100644
--- a/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
+++ b/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
@@ -2,10 +2,10 @@ import React from 'react';
 
 const styles = {
   main: {
-    margin: 15,
-    maxWidth: 600,
+    padding: 15,
     lineHeight: 1.4,
     fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+    backgroundColor: '#ffffff',
   },
 
   logo: {