all icons and submenus ready

i18n/en.i18n.json

@@ -626,5 +626,7 @@
   "home": "Home",
   "paper": "Paper",
   "code": "Code",
-  "foundation": "Foundation"
+  "foundation": "Foundation",
+  "edit-profile": "Edit Profile",
+  "configure-keys": "Configure Keys"
 }

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

@@ -5,7 +5,7 @@
         <label for="name" class="login-label login-label-form">
           {{_ 'voting-token'}}
         </label>
-        <img src="{{pathFor route='home'}}images/token.png" class="login-icon">
+        <img src="{{getImage 'token'}}" class="login-icon">
         <input type="text" placeholder="{{_ 'erc20-tokens'}}" autocomplete="false" value="{{token}}" class="w-input login-input token-search">
         {{#if showTokens}}
           {{> suggest tokenList=true}}
@@ -15,7 +15,7 @@
         <label for="name" class="login-label login-label-form">
           {{_ 'blockchain-address'}}
         </label>
-        <img src="{{pathFor route='home'}}images/blockchain-address.png" class="login-icon">
+        <img src="{{getImage 'blockchain-address'}}" class="login-icon">
         <input type="text" id="editBlockchainAddress" placeholder="{{_ 'blockchain-address-placeholder'}}" value="{{address}}" autocomplete="false" class="w-input login-input login-input-domain">
         {{#if wrongAddress}}
           <div class="margin-top">

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

@@ -1,6 +1,8 @@
 import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
+import { ReactiveVar } from 'meteor/reactive-var';
 
+import { templetize, getImage } from '/imports/ui/templates/layout/templater';
 import { animatePopup } from '/imports/ui/modules/popup';
 import { searchJSON } from '/imports/ui/modules/JSON';
 import { token } from '/lib/token';
@@ -56,6 +58,9 @@ const _checkInputs = () => {
 Template.coin.onCreated(() => {
   Session.set('showTokens', false);
   Session.set('suggestDisplay', '');
+
+  Template.instance().imageTemplate = new ReactiveVar();
+  templetize(Template.instance());
 });
 
 Template.coin.onRendered(function () {
@@ -108,6 +113,9 @@ Template.coin.helpers({
     }
     return '';
   },
+  getImage(pic) {
+    return getImage(Template.instance().imageTemplate.get(), pic);
+  },
 });
 
 Template.coin.events({

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

@@ -5,7 +5,7 @@
         <label for="name" class="login-label login-label-form">
           {{_ 'voter-nationality'}}
         </label>
-        <img src="{{pathFor route='home'}}images/flag.png" class="login-icon">
+        <img src="{{getImage 'flag'}}" class="login-icon">
         <input type="text" id="editCountry" placeholder="{{_ 'earth'}}" autocomplete="false" value="{{country}}" class="w-input login-input country-search">
         {{#if showNations}}
           {{> suggest}}
@@ -15,7 +15,7 @@
         <label for="name" class="login-label login-label-form">
           {{_ 'email-valid-domain'}}
         </label>
-        <img src="{{pathFor route='home'}}images/domain.png" class="login-icon">
+        <img src="{{getImage 'domain'}}" class="login-icon">
         <input type="text" id="editDomain" placeholder="{{_ 'email-domain-placeholder'}}" autocomplete="false" class="w-input login-input login-input-domain">
         {{#if wrongAddress}}
           <div class="margin-top">

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

@@ -1,7 +1,9 @@
 import { Template } from 'meteor/templating';
 import { $ } from 'meteor/jquery';
 import { Session } from 'meteor/session';
+import { ReactiveVar } from 'meteor/reactive-var';
 
+import { templetize, getImage } from '/imports/ui/templates/layout/templater';
 import { animatePopup } from '/imports/ui/modules/popup';
 import { searchJSON } from '/imports/ui/modules/JSON';
 import { geo } from '/lib/geo';
@@ -90,6 +92,11 @@ Template.constituency.onRendered(function () {
   }
 });
 
+Template.constituency.onCreated(function () {
+  Template.instance().imageTemplate = new ReactiveVar();
+  templetize(Template.instance());
+});
+
 Template.constituency.helpers({
   showNations() {
     return (Session.get('suggestDisplay') === 'NATION');
@@ -109,6 +116,9 @@ Template.constituency.helpers({
   wrongAddress() {
     return !Session.get('domainSyntaxCheck');
   },
+  getImage(pic) {
+    return getImage(Template.instance().imageTemplate.get(), pic);
+  },
 });
 
 Template.constituency.events({

imports/ui/templates/components/identity/login/profile/profile.html

@@ -2,8 +2,8 @@
   {{#if configProfile}}
     {{> profileEditor}}
   {{else}}
-    <div class="login margin-bottom-dead">
-      {{> avatar includeName=true includeNation=true editable=true includeAddress=true}}
+    <div class="login">
+      {{> avatar includeName=true includeNation=true editable=false includeAddress=true}}
       {{#if isMultiTokenUser}}
         {{#with currentUser}}
           {{> multiTokenProfile}}
@@ -18,6 +18,12 @@
           </div>
         {{/unless}}
       {{/unless}}
+
+      <div id="edit-profile" class="button button-menu">
+        <img class="button-icon execute-icon execute-icon-menu" src="{{getImage 'forward'}}">
+        <div>{{_ 'edit-profile'}}</div>
+      </div>
+
     </div>
   {{/if}}
 </template>

imports/ui/templates/components/identity/login/profile/profile.js

@@ -1,6 +1,10 @@
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/tap:i18n';
+import { Session } from 'meteor/session';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+import { templetize, getImage } from '/imports/ui/templates/layout/templater';
 
 import './profile.html';
 import './profileEditor.js';
@@ -10,6 +14,11 @@ import '../../../../widgets/warning/warning.js';
 import './multiTokenProfile.html';
 import './multiTokenProfile.js';
 
+Template.profile.onCreated(function () {
+  Template.instance().imageTemplate = new ReactiveVar();
+  templetize(Template.instance());
+});
+
 Template.profile.helpers({
   configProfile() {
     return !Meteor.user().profile.configured;
@@ -48,6 +57,9 @@ Template.profile.helpers({
     }
     return false;
   },
+  getImage(pic) {
+    return getImage(Template.instance().imageTemplate.get(), pic);
+  },
 });
 
 Template.profile.events({
@@ -61,4 +73,10 @@ Template.profile.events({
       }
     });
   },
+  'click #edit-profile'() {
+    const data = Meteor.user().profile;
+    data.configured = false;
+    Meteor.users.update(Meteor.userId(), { $set: { profile: data } });
+    Session.set('cardNavigation', true);
+  },
 });

public/templates/sovereign/sovereign.css

@@ -495,7 +495,6 @@ blockquote {
   border: 1px solid #7d849f;
   border-radius: 100px;
   background-color: #f2f2f5;
-  cursor: pointer;
 }
 
 .symbol.profile-pic.profile-pic-navbar {
@@ -918,15 +917,16 @@ blockquote {
   padding-bottom: 9px;
   border: 1px solid #84849e;
   background-color: transparent;
+  color: #5a0075;
 }
 
 .button.login-button.button-secondary:hover {
   padding-top: 10px;
   padding-bottom: 10px;
   border-style: none;
-  border-color: rgba(132, 132, 158, 0);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f04), to(#ff9a74));
-  background-image: linear-gradient(180deg, #f04, #ff9a74);
+  border-color: #ff0085;
+  background-color: #ff0085;
+  color: #fff;
 }
 
 .button.login-button.button-half {
@@ -1056,7 +1056,7 @@ blockquote {
 }
 
 .button.button-upload:active {
-  background-color: rgba(88, 16, 115, .18);
+  background-color: rgba(255, 0, 133, .07);
 }
 
 .button.button-cta {
@@ -1077,6 +1077,20 @@ blockquote {
   background-color: #ff0085;
 }
 
+.button.button-menu {
+  margin-right: -5px;
+  margin-left: -5px;
+  background-color: #dedcdc;
+  color: #4b4b4b;
+  text-align: left;
+  text-transform: none;
+}
+
+.button.button-menu:hover {
+  background-color: rgba(93, 0, 119, .07);
+  color: #561072;
+}
+
 .button-label {
   float: left;
 }
@@ -1105,6 +1119,12 @@ blockquote {
   float: none;
 }
 
+.button-icon.execute-icon.execute-icon-menu {
+  margin-top: -2px;
+  margin-right: -10px;
+  margin-left: 0px;
+}
+
 .extra {
   display: block;
   margin-right: -5px;
@@ -5656,8 +5676,8 @@ blockquote {
 }
 
 .editor-button.editor-button-active {
-  border-color: #5c5d6e;
-  background-color: #5c5d6e;
+  border-color: #5a0075;
+  background-color: #5a0075;
   color: #fff;
 }
 

public/templates/sovereign/sovereign.json

@@ -18,6 +18,10 @@
     "vote": "/templates/sovereign/images/vote.png",
     "flag": "/templates/sovereign/images/flag.png",
     "camera": "/templates/sovereign/images/camera.png",
+    "forward": "/templates/sovereign/images/forward.png",
+    "token": "/templates/sovereign/images/token.png",
+    "domain": "/templates/sovereign/images/domain.png",
+    "blockchain-address": "/templates/sovereign/images/blockchain-address.png",
     "fingerprint": "/templates/sovereign/images/fingerprint.png",
     "logout": "/templates/sovereign/images/logout.png",
     "vote-icon-black": "/templates/sovereign/images/vote-icon-black.png"