[#922] Adds css to account recovery

with @tayanefernandes

6 files changed, 30 insertions, 1 deletions

diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js
index e400dfae..c0d58e06 100644
--- a/web-ui/app/js/account_recovery/page.js
+++ b/web-ui/app/js/account_recovery/page.js
@@ -1,5 +1,10 @@
 import React from 'react'
 
-const Page = () => <h1>Hello world</h1>;
+import 'scss/account_recovery/page.scss'
+
+const Page = () => (
+  <div>
+  </div>
+);
 
 export default Page
diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss
new file mode 100644
index 00000000..b3b6b1c2
--- /dev/null
+++ b/web-ui/app/scss/account_recovery/page.scss
@@ -0,0 +1,11 @@
+@import "../vendor/reset";
+@import "../base/colors";
+@import "../base/scaffolding";
+
+body {
+  background: $dark_blue; /* For browsers that do not support gradients */
+  background: -webkit-linear-gradient(left top, $dark_blue, $middle_blue); /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to bottom right, $dark_blue, $middle_blue); /* Standard syntax */
+}
diff --git a/web-ui/config/alias-webpack.js b/web-ui/config/alias-webpack.js
index f4ea1b63..43b23836 100644
--- a/web-ui/config/alias-webpack.js
+++ b/web-ui/config/alias-webpack.js
@@ -7,6 +7,7 @@ module.exports = {
   'flight': path.join(__dirname, '../app/bower_components/flight'),
   'found': path.join(__dirname, '../app/bower_components/foundation'),
   'js': path.join(__dirname, '../app/js'),
+  'scss': path.join(__dirname, '../app/scss'),
   'mail_list': path.join(__dirname, '../app/js/mail_list'),
   'page': path.join(__dirname, '../app/js/page'),
   'feedback': path.join(__dirname, '../app/js/feedback'),
diff --git a/web-ui/package.json b/web-ui/package.json
index 52124c54..ec880270 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -13,6 +13,7 @@
     "babel-preset-react": "^6.22.0",
     "bower": "1.7.9",
     "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.26.1",
     "dompurify": "^0.8.4",
     "enzyme": "^2.7.1",
     "font-awesome": "^4.7.0",
@@ -42,11 +43,14 @@
     "karma-requirejs": "1.0.0",
     "minify": "^2.0.13",
     "modernizr": "^3.3.1",
+    "node-sass": "^4.5.0",
     "quoted-printable": "^1.0.1",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.2",
     "requirejs": "2.2.0",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
     "typeahead.js": "^0.11.1",
     "utf8": "^2.1.2",
     "watch": "0.19.1",
diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
index f0f605b0..59d2ae5b 100644
--- a/web-ui/webpack.config.js
+++ b/web-ui/webpack.config.js
@@ -26,6 +26,10 @@ module.exports = {
         exclude: /(node_modules|bower_components)/,
         loader: 'babel',
         query: { presets: ['es2015', 'react']}
+      },
+      {
+        test: /\.scss|css$/,
+        loader: "style-loader!css-loader!sass-loader"
       }
     ]
   },
diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js
index 55069c3f..bc10b90e 100644
--- a/web-ui/webpack.production.config.js
+++ b/web-ui/webpack.production.config.js
@@ -25,6 +25,10 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel',
         query: { presets: ['es2015', 'react']}
+      },
+      {
+        test: /\.scss|css$/,
+        loader: "style-loader!css-loader!sass-loader"
       }
     ]
   },