new design with templating system done

i18n/en.i18n.json

@@ -533,7 +533,7 @@
   "domain": "Domain",
   "email-valid-domain": "Verified E-mail Domain",
   "electorate-sentence-anyone": "Anyone",
-  "electorate-sentence-anyone-textonly": "Anyone logged in can vote on this proposal.",
+  "electorate-sentence-anyone-textonly": "You are allowed to vote on this proposal.",
   "cancel": "Cancel",
   "electorate-requisites": "Election Requisites",
   "electorate-sentence-only": "{{setting0}}",

imports/ui/templates/components/decision/editor/editor.html

@@ -9,7 +9,7 @@
             </div>
           {{/with}}
           <div class="data data-feed">
-            <img class="url-icon" src="{{pathFor route='home'}}images/decision-draft.png">
+            <img class="url-icon" src="{{getImage 'decision-draft'}}">
             <div class="verifier verifier-live verifier-feed no-link">{{_ 'draft'}}</div>
           </div>
           <div class="title-input title-input-void title-input-compressed">
@@ -31,18 +31,18 @@
             {{/each}}
             <div class="data data-feed data-identity">
               <div class="margin-both">
-                <img src="{{pathFor route='home'}}images/clock.png" class="clock-icon">
+                <img src="{{getImage 'clock'}}" class="clock-icon">
                 <div class="verifier verifier-live verifier-feed verifier-mini">{{sinceDate}}</div>
               </div>
               <div class="margin-both">
-                <img src="{{pathFor route='home'}}images/block.png" class="clock-icon">
+                <img src="{{getImage 'block'}}" class="clock-icon">
                 <a id="blockchain-explorer" title="{{blockchainFullAddress}}" href="{{blockchainLink}}" target="_blank">
                   <div class="verifier verifier-live verifier-feed verifier-mini">{{blockchainAddress}}</div>
                 </a>
               </div>
             </div>
             <div class="data data-feed">
-              <img class="url-icon" src="{{pathFor route='home'}}images/decision-draft.png">
+              <img class="url-icon" src="{{getImage 'decision-draft'}}">
               <div class="verifier verifier-live verifier-feed no-link">{{_ 'draft'}}</div>
             </div>
           </div>

imports/ui/templates/components/decision/editor/editor.js

@@ -5,6 +5,7 @@ import { $ } from 'meteor/jquery';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { TAPi18n } from 'meteor/tap:i18n';
 
+import { templetize, getImage } from '/imports/ui/templates/layout/templater';
 import { stripHTMLfromText } from '/imports/ui/modules/utils';
 import { timers } from '/lib/const';
 import { Contracts } from '/imports/api/contracts/Contracts';
@@ -167,6 +168,9 @@ Template.editor.onCreated(function () {
   Template.instance().ready = new ReactiveVar(true);
   Template.instance().contract = new ReactiveVar(contract);
   Template.instance().reply = new ReactiveVar();
+
+  Template.instance().imageTemplate = new ReactiveVar();
+  templetize(Template.instance());
 });
 
 Template.editor.onDestroyed(() => {
@@ -279,6 +283,9 @@ Template.editor.helpers({
     }
     return undefined;
   },
+  getImage(pic) {
+    return getImage(Template.instance().imageTemplate.get(), pic);
+  },
   menu() {
     return [
       {

imports/ui/templates/components/identity/login/EmailLogin.jsx

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import React, { Component } from 'react';
 import { TAPi18n } from 'meteor/tap:i18n';
 
+import { getImageTemplate } from '/imports/ui/templates/layout/templater';
 import { clearPopups } from '/imports/ui/modules/popup';
 import Warning from '../../../widgets/warning/Warning.jsx';
 import Signup from '../signup/Signup.jsx';
@@ -15,6 +16,7 @@ export default class EmailLogin extends Component {
       loginScreen: true,
       passwordKnown: true,
       incorrectUser: false,
+      images: {},
     };
 
     this.handleLoginRender = this.handleLoginRender.bind(this);
@@ -24,13 +26,8 @@ export default class EmailLogin extends Component {
     this.handleFocus = this.handleFocus.bind(this);
   }
 
-  handleFacebookLogin() {
-    Meteor.call('updateAPIKeys');
-    Meteor.loginWithFacebook({}, function (err) {
-      if (err.reason) {
-        throw new Meteor.Error('Facebook login failed ', err.reason);
-      }
-    });
+  async componentWillMount() {
+    await getImageTemplate().then((resolved) => { this.setState({ images: resolved }); });
   }
 
   handleLoginRender() {
@@ -49,6 +46,15 @@ export default class EmailLogin extends Component {
     this.setState({ incorrectUser: true });
   }
 
+  handleFacebookLogin() {
+    Meteor.call('updateAPIKeys');
+    Meteor.loginWithFacebook({}, function (err) {
+      if (err.reason) {
+        throw new Meteor.Error('Facebook login failed ', err.reason);
+      }
+    });
+  }
+
   handleSubmit(event) {
     event.preventDefault();
 
@@ -66,6 +72,7 @@ export default class EmailLogin extends Component {
             // User not found or incorrect password
             this.handleSigninError();
             break;
+          default:
         }
       } else {
         // Successful login
@@ -85,10 +92,10 @@ export default class EmailLogin extends Component {
             <div className="w-clearfix paper-header card-header">
               <div className="card-title">
                 {loginScreen ?
-                  <img src="/images/fingerprint-white.png" className="section-icon" alt="lock" />
+                  <img src={this.state.images.fingerprint} className="section-icon" alt="lock" />
                   :
                   <div id="card-back">
-                    <img src="/images/back.png" className="section-icon section-icon-active" alt="lock" />
+                    <img src={this.state.images.back} className="section-icon section-icon-active" alt="lock" />
                   </div>
                 }
                 {TAPi18n.__('authenticate-self')}

imports/ui/templates/layout/templater.js

@@ -22,6 +22,15 @@ const _getImageTemplate = async () => {
   return template.images;
 };
 
+/**
+* @summary gets image but for react calls
+* @param {string} pic to use
+*/
+const _getReactImage = async (pic) => {
+  const template = await promise;
+  return template.images[pic];
+};
+
 /**
 * @summary gets the right image given by template
 * @param {object} imageTemplate that is getting the images from
@@ -69,4 +78,5 @@ export const getCSS = _getStyles;
 export const getHeader = _getHeader;
 export const getImageTemplate = _getImageTemplate;
 export const getImage = _getImage;
+export const getReactImage = _getReactImage;
 export const templetize = _templetize;

lib/token.js

@@ -4,6 +4,23 @@ let _token;
 // TODO: maxSupply and supply numbers need to be updated via a trusted API.
 const _tokenRinkeby = {
   coin: [
+    {
+      code: 'VOTE',
+      format: '0,0',
+      emoji: '',
+      unicode: '',
+      name: 'Democracy Earth',
+      maxSupply: 500000000,
+      supply: 2500000,
+      decimals: 18,
+      inflationary: true,
+      title: 'Universal Basic Income token for verified citizens of the Democracy Earth Network.',
+      color: '#5a0075',
+      type: 'ERC20',
+      blockchain: 'ETHEREUM',
+      contractAddress: '0xf9f8587544471dcf00a48b0d4231ce7ca9b03487',
+      defaultVote: '1',
+    },
     {
       code: 'ETH',
       subcode: 'WEI',
@@ -23,21 +40,20 @@ const _tokenRinkeby = {
       defaultVote: '0.0001',
     },
     {
-      code: 'VOTE',
-      format: '0,0',
+      code: 'DAI',
+      format: '0,0.0a',
       emoji: '',
       unicode: '',
-      name: 'Democracy Earth',
-      maxSupply: 500000000,
-      supply: 2500000,
+      name: 'Maker',
       decimals: 18,
-      inflationary: true,
-      title: 'Universal Basic Income token for verified citizens of the Democracy Earth Network.',
-      color: '#00c091',
+      maxSupply: 74560600,
+      supply: 1050141509,
+      color: '#faa700',
+      title: 'DAI is a stable coin based on Collateral Debt Positions created with Maker DAO.',
       type: 'ERC20',
       blockchain: 'ETHEREUM',
-      contractAddress: '0xf9f8587544471dcf00a48b0d4231ce7ca9b03487',
-      defaultVote: '1',
+      contractAddress: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
+      defaultVote: '0.1',
     },
     {
       code: 'MANA',

public/templates/sovereign/extra.css

@@ -149,9 +149,6 @@ html {
 textarea, select, input, button, #titleContent { outline: none; }
 
 video {
-  display: inline-block;
-  vertical-align: baseline;
-  border: 1px solid #4e3767;
   border-radius: 5px;
 }
 

public/templates/sovereign/sovereign.css

@@ -1098,7 +1098,7 @@ blockquote {
 .button-icon {
   width: 24px;
   height: 24px;
-  margin: 0px -12px -10px -10px;
+  margin: 2px -17px -10px -7px;
   float: left;
 }
 
@@ -4076,8 +4076,7 @@ blockquote {
 }
 
 .navbar-button.navbar-button-active.navbar-button-action:hover {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f04), to(#ff9a74));
-  background-image: linear-gradient(180deg, #f04, #ff9a74);
+  background-color: #ff0085;
 }
 
 .navbar-button.navbar-button-active.navbar-button-action.navbar-button-action-disabled {
@@ -4286,10 +4285,14 @@ blockquote {
   margin-right: auto;
   margin-left: auto;
   padding: 18px 12px;
+  border-color: #f3f3f3 #e0e0e0 #e0e0e0 #f3f3f3;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-left-style: solid;
+  border-left-width: 1px;
   border-radius: 5px;
-  background-color: #5c5c6e;
-  box-shadow: 0 3px 8px -4px #000;
-  color: #fff;
+  background-color: #eaeaea;
+  box-shadow: 0 6px 20px 4px rgba(0, 0, 0, .13);
   font-size: 16px;
   text-align: center;
 }

public/templates/sovereign/sovereign.json

@@ -21,6 +21,7 @@
     "forward": "/templates/sovereign/images/forward.png",
     "token": "/templates/sovereign/images/token.png",
     "domain": "/templates/sovereign/images/domain.png",
+    "decision-draft": "/templates/sovereign/images/decision-draft.png",
     "blockchain-address": "/templates/sovereign/images/blockchain-address.png",
     "fingerprint": "/templates/sovereign/images/fingerprint.png",
     "logout": "/templates/sovereign/images/logout.png",