Merge pull request #1119 from poanetwork/feature/#1083-2.0-restyling

(Feature) Add assets to support new design

.gitmodules

@@ -9,7 +9,7 @@
 [submodule "submodules/token-wizard-test-automation"]
 	path = submodules/token-wizard-test-automation
 	url = https://github.com/poanetwork/token-wizard-test-automation
-	branch = e2e-wizard2.0
+	branch = 2.0-newDesign
 [submodule "submodules/auth-os-applications"]
 	path = submodules/auth-os-applications
 	url = https://github.com/poanetwork/auth-os-applications/

gulpfile.js

@@ -5,35 +5,33 @@ const sass = require("gulp-sass");
 const sassGlob = require("gulp-sass-glob");
 const autoprefixer = require("gulp-autoprefixer");
 const uglifycss = require("gulp-uglifycss");
-const include = require("gulp-include");
-const addsrc = require("gulp-add-src");
-const order = require("gulp-order");
-const concat = require("gulp-concat");
-const uglify = require("gulp-uglify");
-const gutil = require("gulp-util");
 
-gulp.task("javascript", function() {
-  return gulp.src("assets/javascripts/application/*.js")
-    .pipe(addsrc("assets/javascripts/vendor/index.js"))
-    .pipe(order([
-      "assets/javascripts/vendor/index.js",
-      "assets/javascripts/application/*.js"
-    ], {base: "."}))
-    .pipe(include())
-    .pipe(concat("application.js"))
-    //.pipe(uglify())
-    .pipe(gulp.dest("public"));
+gulp.task("sass", function () {
+  return gulp.src(["src/assets/stylesheets/*.scss"])
+    .pipe(sassGlob())
+    .pipe(sass().on("error", sass.logError))
+    .pipe(autoprefixer({
+      remove: false
+    }))
+    .pipe(uglifycss({
+      "uglyComments": true
+    }))
+    .pipe(gulp.dest("src/assets/stylesheets/"));
 });
 
-gulp.task("sass", function() {
-  return gulp.src(["src/assets/stylesheets/*.scss"])
+gulp.task("sass_v2.0", function () {
+  return gulp.src(["src/assets/stylesheets/v2.0/*.scss"])
     .pipe(sassGlob())
     .pipe(sass().on("error", sass.logError))
-    .pipe(autoprefixer())
-    .pipe(uglifycss())
+    .pipe(autoprefixer({
+      remove: false
+    }))
+    .pipe(uglifycss({
+      "uglyComments": true
+    }))
     .pipe(gulp.dest("src/assets/stylesheets/"));
 });
 
-gulp.task("watch", function() {
-  gulp.watch("src/assets/stylesheets/**/*.scss", ["sass"]);
+gulp.task("watch", function () {
+  gulp.watch("src/assets/stylesheets/**/*.scss", ["sass", "sass_v2.0"]);
 });

package.json

@@ -75,7 +75,6 @@
     "final-form": "^4.3.1",
     "final-form-arrays": "^1.0.4",
     "final-form-calculate": "^1.1.0",
-    "font-awesome": "^4.7.0",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "immutability-helper": "^2.5.0",

src/favicons/browserconfig.xml → public/favicons/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#5c3698</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/index.html

@@ -5,40 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <base href="/" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
+    <link
+        crossorigin="anonymous"
+        href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
+        integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
+        rel="stylesheet"
+    >
     <title>Token Wizard</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
     <script src="./application.js"></script>
     <script src="./bundle.js"></script>
   </body>

src/App.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { inject, observer } from 'mobx-react'
-import './assets/stylesheets/application.css'
 import {
   Header,
   Footer,
@@ -23,9 +22,25 @@ import { TOAST } from './utils/constants'
 import { toast } from './utils/utils'
 import { Web3Provider } from './react-web3'
 
+// import './assets/stylesheets/application.css'
+
 @inject('deploymentStore')
 @observer
 class App extends Component {
+  componentWillMount() {
+    // temporary code to switch ui styling versions
+    // obviously delete this when we get the v2.0 up and running
+    const uiversion = getQueryVariable('uiversion')
+
+    if (uiversion === '2') {
+      require('./assets/stylesheets/styles.css')
+    } else if (uiversion === '1') {
+      require('./assets/stylesheets/application_styles.css')
+    } else {
+      require('./assets/stylesheets/application_styles.css')
+      require('./assets/stylesheets/styles.css')
+    }
+  }
   render() {
     const { deploymentStore } = this.props
     var crowdsaleAddr = getQueryVariable('addr')

src/assets/stylesheets/application/base.scss

@@ -7,7 +7,6 @@ body {
 p, h1, h2, h3, h4 {
   margin: 0;
   padding: 0;
-  font-family: 'Open Sans', sans-serif;
 }
 
 html {

src/assets/stylesheets/application/controls.scss

@@ -102,7 +102,6 @@
   padding: 0 10px;
   color: #333;
   font-size: 14px;
-  font-family: 'Open Sans', sans-serif;
 
   &:focus {
     border-color: #08b3f2;

src/assets/stylesheets/application.scss → src/assets/stylesheets/application_styles.scss

@@ -1,10 +1,10 @@
 @import './application/variables';
 @import './application/mixins';
 @import './application/placeholders';
-@import './application/fonts';
 @import './application/base';
 @import './application/header';
 @import './application/footer';
+@import './application/fonts';
 @import './application/socials';
 @import './application/step-icons';
 @import './application/controls';

src/assets/stylesheets/v2.0/GUIDELINES.md

@@ -0,0 +1,43 @@
+#ECSS (Enduring CSS) will be used
+
+http://ecss.io/
+
+##ECSS naming convention
+
+.namespace-ModuleOrComponent_ChildNode-variant {}
+
+- namespace: This is a required part of every selector. The micro-namespace should be all lowercase/train-case. It is typically an abbreviation to denote context or originating logic.
+
+- ModuleOrComponent: This is a upper camel case/pascal case. It should always be preceded by a hyphen character (-).
+
+- ChildNode: This is an optional section of the selector. It should be upper camel case/pascal case and preceded by an underscore (_).
+
+- variant: This is a further optional section of the selector. It should be written all lowercase/train-case.
+
+For example:
+
+.hm-Item_Header {}
+.hm-Item_Header-bg1 {} /* Image background 1 */
+
+##ECSS component states
+
+.is-Suspended {}
+.is-Live {}
+.is-Selected {}
+.is-Busy {}
+
+etc.
+
+#CSS Overrides
+
+Should be self contained.
+
+For example:
+
+.ip-Carousel {
+    font-size: $text13;
+    /* The override is here for when this key-selector sits within a ip-HomeCallouts element */
+    .ip-HomeCallouts & {
+        font-size: $text15;
+    }
+}

src/assets/stylesheets/v2.0/base/README.md

@@ -0,0 +1 @@
+Holds what we might call the boilerplate stuff for the project: reset (or Normalize.css, or whatever), typography, etc.

src/assets/stylesheets/v2.0/base/_index.scss

@@ -0,0 +1,2 @@
+@import 'normalize';
+@import 'typography';