Merge pull request #128 from Kinto/101/welcome-background

Add a background image to the welcome screen
sbvhev · Jun 20, 2016 · 9949f49 · 9949f49
2 parents 8847156 + 2005866
commit 9949f49
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/formbuilder/assets/background.jpg b/formbuilder/assets/background.jpg
diff --git a/formbuilder/components/Welcome.js b/formbuilder/components/Welcome.js
@@ -10,7 +10,7 @@ export default function Welcome(props) {
 
   return (
     <div>
-      <div className="jumbotron">
+      <div className="jumbotron background">
         <div className="container">
         <h1>Create your own forms</h1>
         <p>

diff --git a/formbuilder/styles.css b/formbuilder/styles.css
@@ -128,3 +128,12 @@ textarea.json-viewer {
   margin-right: auto;
   margin-left: auto;
 }
+
+.background {
+  background-image: url(assets/background.jpg);
+  background-position: bottom;
+  color: white;
+}
+.background h1 {
+  color: white;
+}
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "extract-text-webpack-plugin": "^0.9.1",
     "gh-pages": "^0.4.0",
     "html": "0.0.10",
+    "image-webpack-loader": "^1.8.0",
     "jsdom": "^7.2.1",
     "mocha": "^2.3.0",
     "react-addons-test-utils": "^0.14.3",

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -57,6 +57,13 @@ module.exports = {
           path.join(__dirname, "formbuilder"),
           path.join(__dirname, "node_modules"),
         ],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loaders: [
+          "file?hash=sha512&digest=hex&name=[hash].[ext]",
+          "image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false"
+        ]
       }
     ]
   }