From 2e9d522ae7fc89721f3a6fe130796318aae26805 Mon Sep 17 00:00:00 2001
From: jerome <mail@jeromelacote.com>
Date: Sat, 6 Jul 2019 13:08:17 -0700
Subject: [PATCH] UI polish

CSS and HTML UI polish: tidied up font sizes, margins and paddings.
Used more gradients to make the app less "flat"
---
 public/partialClient.html                     |  6 +-
 .../views/acceptCorrespondentInvitation.html  |  2 +-
 public/views/backup.html                      |  2 +-
 public/views/copayers.html                    |  2 +-
 public/views/correspondentDevice.html         |  4 +-
 public/views/correspondentDevices.html        | 10 ++--
 public/views/editCorrespondentDevice.html     |  2 +-
 public/views/export.html                      |  2 +-
 public/views/import.html                      |  2 +-
 public/views/includes/copayers.html           |  2 +-
 public/views/includes/password.html           |  4 +-
 public/views/includes/topbar.html             |  5 +-
 public/views/includes/transaction.html        |  2 +-
 public/views/modals/destination-address.html  |  2 +-
 public/views/modals/offer-contract.html       |  2 +-
 public/views/modals/select-subwallet.html     |  4 +-
 public/views/modals/vote.html                 |  2 +-
 public/views/paperWallet.html                 |  4 +-
 public/views/preferencesAlias.html            |  2 +-
 public/views/preferencesDeviceName.html       |  2 +-
 .../views/preferencesEditAttestorAddress.html |  2 +-
 .../preferencesEditRealNameAttestors.html     |  2 +-
 public/views/preferencesEditWitness.html      |  2 +-
 public/views/preferencesEmail.html            |  2 +-
 public/views/preferencesHub.html              |  2 +-
 public/views/preferencesInformation.html      |  4 +-
 public/views/preferencesTor.html              |  2 +-
 public/views/recoveryFromSeed.html            |  2 +-
 public/views/splash.html                      |  8 +--
 public/views/translators.html                 |  4 +-
 public/views/walletHome.html                  | 59 ++++++++++---------
 src/css/main.css                              | 33 ++++++++---
 src/css/mobile.css                            | 22 ++++---
 33 files changed, 117 insertions(+), 90 deletions(-)

diff --git a/public/partialClient.html b/public/partialClient.html
index 8b4b3a381..81b439e7f 100644
--- a/public/partialClient.html
+++ b/public/partialClient.html
@@ -32,7 +32,7 @@
               </section>
               <section class="middle tab-bar-section">
                 <h1 class="title ellipsis" id="name1Color"
-                    style="color: rgb(74, 144, 226);">
+                    style="color: '#E4E8EC';">
                   <span id="name1"></span>
                 </h1>
               </section>
@@ -50,7 +50,7 @@
                     </div>
                     <div class="pr columns line-b">
                       <div class="avatar-wallet left" id="subStrName"
-                           style="background-color: rgb(74, 144, 226);">S
+                           style="background-color: '#E4E8EC';">
                       </div>
                       <div class="wallet-info">
                         <p class="m0" id="name2"></p>
@@ -78,4 +78,4 @@
   <div>
     <img style="width: auto;height: 75px;" src="img/icons/obyte-logo-negative.svg">
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/views/acceptCorrespondentInvitation.html b/public/views/acceptCorrespondentInvitation.html
index 63c0708d2..90a62a4e6 100644
--- a/public/views/acceptCorrespondentInvitation.html
+++ b/public/views/acceptCorrespondentInvitation.html
@@ -45,7 +45,7 @@ <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4A90E2' : index.backg
     <div class="columns m20t m20b" >
         <form name="pairingCodeForm" class="p10" no-validate>
 		  <span translate>Enter the pairing code received from the other device, or use your camera (icon at the upper right corner) to scan the QR code displayed on the other device.</span>
-          <div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
+          <div class="text-warning size-13 m10b" ng-show="error">{{error|translate}}</div>
           <input type="text" placeholder="{{'Pairing code'|translate}}" id="code" name="code" ng-model="code" required>
           <div class="row">
             <div>
diff --git a/public/views/backup.html b/public/views/backup.html
index e9d29759f..f54a77d87 100644
--- a/public/views/backup.html
+++ b/public/views/backup.html
@@ -83,7 +83,7 @@ <h4></h4>
 
     <div class="row" ng-show="wordsC.show">
         <div class="m10t text-center columns">
-          <div class="size-12 text-gray">
+          <div class="size-13 text-gray">
             <span translate>
               Once you have written your wallet seed down, it is recommended to delete it from this device.
             </span>
diff --git a/public/views/copayers.html b/public/views/copayers.html
index 00e49817b..57ebd3308 100644
--- a/public/views/copayers.html
+++ b/public/views/copayers.html
@@ -28,7 +28,7 @@ <h4 class="title oh m0">
     </h4>
     <div class="p10 line-b" ng-include="'views/includes/copayers.html'"></div>
     <div ng-if="!index.isComplete" class="p10 line-b m20b">
-      <p class="size-12 m0">
+      <p class="size-13 m0">
       <i class="fi-loop"></i>
       <span translate>Waiting...</span>
       </p>
diff --git a/public/views/correspondentDevice.html b/public/views/correspondentDevice.html
index 2c5890b04..c53760387 100644
--- a/public/views/correspondentDevice.html
+++ b/public/views/correspondentDevice.html
@@ -306,7 +306,7 @@ <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4A90E2' : index.backg
 	  </div>
 	</div>
 
-      <div class="message-log size-12 enable_text_select" scroll-bottom="messageEvents" when-scrolled="loadMoreHistory" bind-to-height="['bottom','form[name=chatForm]']" ng-mousemove="newMsgCounterEnabled ?'': newMessagesCount[correspondent.device_address] = 0">
+      <div class="message-log size-13 enable_text_select" scroll-bottom="messageEvents" when-scrolled="loadMoreHistory" bind-to-height="['bottom','form[name=chatForm]']" ng-mousemove="newMsgCounterEnabled ?'': newMessagesCount[correspondent.device_address] = 0">
         <div class="chat-message" ng-repeat="messageEvent in messageEvents">
             <!--div style="width:100%" ng-style="messageEvent.bIncoming ? {'text-align': 'left'} : {'text-align': 'right'}"-->
               <!--div style="max-width: 70%; text-align: left; display: inline-block" ng-bind-html="messageEvent.message"></div-->
@@ -319,7 +319,7 @@ <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4A90E2' : index.backg
       </div>
         
         <form name="chatForm" class="send-form columns" no-validate ng-mousemove="newMsgCounterEnabled ?'': newMessagesCount[correspondent.device_address] = 0">
-          <div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
+          <div class="text-warning size-13 m10b" ng-show="error">{{error|translate}}</div>
            <button
           	class="chatbutton left"
                      dropdown-toggle="#drop" data-options="align:top"><i class="size-18 icon-dots-three-horizontal"></i></button>
diff --git a/public/views/correspondentDevices.html b/public/views/correspondentDevices.html
index 35b4f2cfa..e49d6c86e 100644
--- a/public/views/correspondentDevices.html
+++ b/public/views/correspondentDevices.html
@@ -49,7 +49,7 @@
 
 	.bots-orders-list.f-dropdown li,
 	.contacts-orders-list.f-dropdown li { fo5nt-size: 12px }
-	
+
 	.contacts-orders-list.f-dropdown li a .check, .bots-orders-list.f-dropdown li a .check {
 		position: inherit;
 	}
@@ -150,13 +150,13 @@
 				<li class="m10t" ng-show="!editCorrespondentList">
 					<a ng-click="beginAddCorrespondent()" class="p10">
 						<i class="fi-plus size-18 m10r" style="vertical-align: middle;"></i>
-						<span class="text-close size-12" translate>Add a new device</span>
+						<span class="text-close size-14" translate>Add a new device</span>
 					</a>
 				</li>
 				<li class="m10t m30b" ng-show="!editCorrespondentList" style="padding-bottom: env(safe-area-inset-bottom);">
 					<a ng-click="hideRemove = !hideRemove" class="p10">
 						<i class="fi-minus size-18 m10r" style="vertical-align: middle;"></i>
-						<span class="text-close size-12" translate>Remove a device</span>
+						<span class="text-close size-14" translate>Remove a device</span>
 					</a>
 				</li>
 			</ul>
@@ -195,9 +195,9 @@
 					</div>
 				</li>
 			</ul>
-			<div class="text-warning size-12 m10b" ng-show="botsError">{{botsError|translate}}</div>
+			<div class="text-warning size-13 m10b" ng-show="botsError">{{botsError|translate}}</div>
 		</div>
 	</div>
 
 </div>
-<div ng-include="'views/includes/menu.html'" ng-show="!index.noFocusedWallet"></div>
\ No newline at end of file
+<div ng-include="'views/includes/menu.html'" ng-show="!index.noFocusedWallet"></div>
diff --git a/public/views/editCorrespondentDevice.html b/public/views/editCorrespondentDevice.html
index 404d103e6..609517ea8 100644
--- a/public/views/editCorrespondentDevice.html
+++ b/public/views/editCorrespondentDevice.html
@@ -38,7 +38,7 @@ <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4A90E2' : index.backg
 	  </div>
 		
         <form name="editForm" class="m20t" no-validate>
-          <div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
+          <div class="text-warning size-13 m10b" ng-show="error">{{error|translate}}</div>
 		  <span translate>Rename:</span>
 	      <input type="text" id="name" name="name" ng-model="name" required>
 		  <span translate>Change hub:</span>
diff --git a/public/views/export.html b/public/views/export.html
index c57b78659..678cbb6f1 100644
--- a/public/views/export.html
+++ b/public/views/export.html
@@ -52,7 +52,7 @@ <h4></h4>
 				</div>
 			</div>
 		</form>
-		<div class="text-alert size-12 columns">
+		<div class="text-alert size-13 columns">
 			<span translate>WARNING:</span>
 			<ul class="warnings">
 				<li translate>If you plan to restore the wallet on another device, stop using it on the current one immediately after creating the backup.  Never clone wallets.  If you need access from several devices, use multisig.</li>
diff --git a/public/views/import.html b/public/views/import.html
index 69da4d34f..86e1ae044 100644
--- a/public/views/import.html
+++ b/public/views/import.html
@@ -40,7 +40,7 @@ <h4></h4>
 				   value="{{'Import'|translate}}" ng-style="{'background-color':index.backgroundColor}">
 		</form>
 	</div>
-	<div class="text-alert size-12 columns">
+	<div class="text-alert size-13 columns">
 		<span translate>WARNINGS:</span>
 		<ul class="warnings">
 			<li translate>This will permanently delete all your existing wallets!</li>
diff --git a/public/views/includes/copayers.html b/public/views/includes/copayers.html
index 3bdcf5104..1b28f2e7f 100644
--- a/public/views/includes/copayers.html
+++ b/public/views/includes/copayers.html
@@ -3,7 +3,7 @@
   <span class="size-12" ng-show="copayer.me">
     <i class="fi-check m5r"></i> {{'Me'|translate}}
   </span>
-  <span class="size-12 text-gray" ng-show="!copayer.me">
+  <span class="size-13 text-gray" ng-show="!copayer.me">
     <i class="m5r" ng-class="copayer.approval_date ? 'fi-check' : 'fi-clock'"></i> {{copayer.name}} ({{copayer.device_address.substr(0,4)}}...)
   </span>
   </li>
diff --git a/public/views/includes/password.html b/public/views/includes/password.html
index 04611aa23..5e11fc92a 100644
--- a/public/views/includes/password.html
+++ b/public/views/includes/password.html
@@ -13,7 +13,7 @@
       <span translate>Enter your password</span>
     </label>
 
-    <div class="text-warning size-12 m10b" ng-show="index.askPassword.error">{{index.askPassword.error|translate}}</div>
+    <div class="text-warning size-13 m10b" ng-show="index.askPassword.error">{{index.askPassword.error|translate}}</div>
     <div class="input m20t">
       <input type="password" placeholder="{{'Your password'|translate}}"
       id="passwordInput" name="password" ng-model="pass.password">
@@ -35,7 +35,7 @@
     </div>
   </div>
 
-    <p class="text-warning size-12 columns m20t text-center" ng-show="index.askPassword.isSetup">
+    <p class="text-warning size-13 columns m20t text-center" ng-show="index.askPassword.isSetup">
       <i class="fi-alert"></i>
       <span translate ng-show="!pass.error"> Your wallet key will be encrypted. Password cannot be recovered. Be sure to write it down</span>
 	  <br><br>
diff --git a/public/views/includes/topbar.html b/public/views/includes/topbar.html
index 85329dc93..e5ee6e518 100644
--- a/public/views/includes/topbar.html
+++ b/public/views/includes/topbar.html
@@ -19,10 +19,11 @@
   </section>
 
   <section class="middle tab-bar-section">
-    <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4A90E2' : index.backgroundColor, 'width': '100%'}">
+    <h1 class="title ellipsis" ng-style="{'color': noColor ? '#E4E8EC !important' : index.backgroundColor, 'width': '100%'}"
+        style="color: #E4E8EC !important;">
 		<span ng-if="index.arrBalances[index.assetIndex].shared === undefined && !index.shared_address || titleSection">{{(titleSection|translate) || (index.shared_address || index.alias || index.walletName)}}</span>
 		<span ng-if="(index.arrBalances[index.assetIndex].shared !== undefined || index.shared_address) && !titleSection">
-			<a ng-click="index.openSubwalletModal()" ng-style="{'color': noColor ? '#4A90E2' : index.backgroundColor, 'display':'flex', 'justify-content': 'center'}">
+			<a ng-click="index.openSubwalletModal()" ng-style="{'color': noColor ? '#E4E8EC' : index.backgroundColor, 'display':'flex', 'justify-content': 'center'}">
 				<span class="ellipsis" style="float: left;">
 					{{(index.shared_address || index.alias || index.walletName)}}
 				</span>
diff --git a/public/views/includes/transaction.html b/public/views/includes/transaction.html
index cdc76a55e..924a909a8 100644
--- a/public/views/includes/transaction.html
+++ b/public/views/includes/transaction.html
@@ -8,7 +8,7 @@
   <div class="small-10 columns">
       <div ng-if="!$root.updatingBalance">
         <span class="text-bold size-16"><span translate>Send</span> {{tx.amountStr}}</span>
-        <time class="right size-12 text-gray m5t">{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
+        <time class="right size-13 text-gray m5t">{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
       </div>
       <div class="ellipsis size-14">
         <span ng-if="tx.hasMultiplesOutputs">
diff --git a/public/views/modals/destination-address.html b/public/views/modals/destination-address.html
index 87700b90f..ce45e3968 100644
--- a/public/views/modals/destination-address.html
+++ b/public/views/modals/destination-address.html
@@ -106,7 +106,7 @@ <h1 ng-show="(editAddressbook || !wallets[0]) && !addAddressbookEntry" class="ti
       <div ng-show="addAddressbookEntry">
         <h4 class="title m0" translate>Add a new entry</h4>
         <form name="addressbookForm" class="p10" no-validate>
-          <div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
+          <div class="text-warning size-13 m10b" ng-show="error">{{error|translate}}</div>
           <span ng-hide="addressbookForm.address.$pristine">
             <span class="has-error right size-12" ng-show="addressbookForm.address.$invalid && addressbook.address">
               <i class="icon-close-circle size-14"></i>
diff --git a/public/views/modals/offer-contract.html b/public/views/modals/offer-contract.html
index 4decb3410..76d3b370f 100644
--- a/public/views/modals/offer-contract.html
+++ b/public/views/modals/offer-contract.html
@@ -113,7 +113,7 @@ <h4 class="m0 row" translate>Who signs:</h4>
 		<div class="row columns large-12 medium-12">
 			<ul class="no-bullet m20b whopays">
 			  <li class="" ng-repeat="copayer in index.copayers">
-				  <span class="size-12 text-gray" ng-show="copayer.me">
+				  <span class="size-13 text-gray" ng-show="copayer.me">
 					  <i class="icon-contact size-24 m10r"></i>{{'Me'|translate}} <i class="fi-check m5 right"></i>
 				  </span>
 				  <div class="size-12" style="width: 100%" ng-show="!copayer.me" ng-click="copayer.signs = !copayer.signs">
diff --git a/public/views/modals/select-subwallet.html b/public/views/modals/select-subwallet.html
index 2dd2756c7..bb6da1c6a 100644
--- a/public/views/modals/select-subwallet.html
+++ b/public/views/modals/select-subwallet.html
@@ -34,8 +34,8 @@ <h1 class="title ellipsis" ng-style="{'color':color}" translate>
 						<span ng-if="sw.totalStr">{{sw.totalStr}}</span>
 						<span ng-if="!sw.totalStr">{{sw.total.toLocaleString()}}</span>
 					</div>
-					<div class="size-12 ellipsis"><span translate>with</span> {{sw.shared_address_cosigners}}</div>
-					<div class="size-12 ellipsis">
+					<div class="size-13 ellipsis"><span translate>with</span> {{sw.shared_address_cosigners}}</div>
+					<div class="size-13 ellipsis">
 						<span translate>created</span> 
 						<time>{{ sw.creation_ts * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
 						<time>({{ sw.creation_ts * 1000 | amTimeAgo}})</time>
diff --git a/public/views/modals/vote.html b/public/views/modals/vote.html
index dd2d46303..4e7813c7d 100644
--- a/public/views/modals/vote.html
+++ b/public/views/modals/vote.html
@@ -49,6 +49,6 @@ <h4 class="title m0 row columns" translate>Who signs:</h4>
     </div>
   </div>
 
-  <div class="text-gray size-12 text-center" translate>The vote will be signed by all your funded addresses</div>
+  <div class="text-gray size-13 text-center" translate>The vote will be signed by all your funded addresses</div>
 
 </div>
diff --git a/public/views/paperWallet.html b/public/views/paperWallet.html
index a4d277e4f..22ac4e347 100644
--- a/public/views/paperWallet.html
+++ b/public/views/paperWallet.html
@@ -37,7 +37,7 @@
               <span translate>Passphrase</span>
             </label>
             <input id="passphrase" type="password" name="passphrase" placeholder="{{'Passphrase'|translate}}" ng-model="passphrase">
-            <p ng-show="index.isCordova" translate class="size-12 text-gray">
+            <p ng-show="index.isCordova" translate class="size-13 text-gray">
               Decrypting a paper wallet could take around 5 minutes on this device. please be patient and keep the app open.
             </p>
           </div>
@@ -70,7 +70,7 @@ <h4 class="text-bold" translate>Funds found</h4>
       </button>
     </div>
   </div>
-  <div class="text-center size-12 text-gray">
+  <div class="text-center size-13 text-gray">
     <span translate>Funds will be transferred to</span>:
     <b>{{index.alias || index.walletName}}</b>
   </div-->
diff --git a/public/views/preferencesAlias.html b/public/views/preferencesAlias.html
index 622d285af..0ccf1df1a 100644
--- a/public/views/preferencesAlias.html
+++ b/public/views/preferencesAlias.html
@@ -13,7 +13,7 @@ <h4></h4>
     <input type="text" id="alias2" type="text" name="alias2" ng-model="prefAlias.alias">
     <input type="submit" class="button expand black round" value="{{'Save'|translate}}" ng-style="{'background-color':index.backgroundColor}">
   </form>
-    <div class="text-gray size-12 text-center" translate>Changing wallet alias only affects the local wallet name.
+    <div class="text-gray size-13 text-center" translate>Changing wallet alias only affects the local wallet name.
   </div>
 </div>
 <div class="extra-margin-bottom"></div>
diff --git a/public/views/preferencesDeviceName.html b/public/views/preferencesDeviceName.html
index 53c30d6b7..d96c10358 100644
--- a/public/views/preferencesDeviceName.html
+++ b/public/views/preferencesDeviceName.html
@@ -13,7 +13,7 @@ <h4></h4>
     <input type="text" id="deviceName" type="text" name="deviceName" ng-model="prefDeviceName.deviceName">
     <input type="submit" class="button expand black round" value="{{'Save'|translate}}" ng-style="{'background-color':index.backgroundColor}">
   </form>
-    <div class="text-gray size-12 text-center" translate>Device name is visible to other devices you communicate with.
+    <div class="text-gray size-13 text-center" translate>Device name is visible to other devices you communicate with.
   </div>
 </div>
 <div class="extra-margin-bottom"></div>
diff --git a/public/views/preferencesEditAttestorAddress.html b/public/views/preferencesEditAttestorAddress.html
index 77449af2a..7508ca4f3 100644
--- a/public/views/preferencesEditAttestorAddress.html
+++ b/public/views/preferencesEditAttestorAddress.html
@@ -8,7 +8,7 @@
 
 	<h4></h4>
 	<form name="editAttestorAddressForm" ng-submit="ctrl.save()" class="columns">
-		<div class="text-warning size-12 m10b" ng-show="ctrl.error">{{ctrl.error|translate}}</div>
+		<div class="text-warning size-13 m10b" ng-show="ctrl.error">{{ctrl.error|translate}}</div>
 		<label><span>{{ctrl.title|translate}}</span></label>
 		<input type="text" type="text" name="attestorAddress" ng-model="ctrl.attestorAddress">
 		<input type="submit" class="button expand black round" value="{{'Save'|translate}}"
diff --git a/public/views/preferencesEditRealNameAttestors.html b/public/views/preferencesEditRealNameAttestors.html
index 0b7ebb1d4..5892671c3 100644
--- a/public/views/preferencesEditRealNameAttestors.html
+++ b/public/views/preferencesEditRealNameAttestors.html
@@ -8,7 +8,7 @@
 
 	<h4></h4>
 	<form name="editAttestorAddressForm" ng-submit="ctrl.save()" class="columns">
-		<div class="text-warning size-12 m10b" ng-show="ctrl.error">{{ctrl.error|translate}}</div>
+		<div class="text-warning size-13 m10b" ng-show="ctrl.error">{{ctrl.error|translate}}</div>
 
 		<div class="row m20t">
 			<label>
diff --git a/public/views/preferencesEditWitness.html b/public/views/preferencesEditWitness.html
index d16ec71c9..7979b6761 100644
--- a/public/views/preferencesEditWitness.html
+++ b/public/views/preferencesEditWitness.html
@@ -9,7 +9,7 @@
 
   <h4></h4>
   <form name="editWitnessForm" ng-submit="ewc.save()" class="columns">
-      <div class="text-warning size-12 m10b" ng-show="ewc.error">{{ewc.error|translate}}</div>
+      <div class="text-warning size-13 m10b" ng-show="ewc.error">{{ewc.error|translate}}</div>
     <label><span translate>Witness address</span></label>
     <input type="text" id="witness" type="text" name="witness" ng-model="ewc.witness">
     <input type="submit" class="button expand black round" value="{{'Save'|translate}}" ng-style="{'background-color':index.backgroundColor}">
diff --git a/public/views/preferencesEmail.html b/public/views/preferencesEmail.html
index 8d615cb60..eba845217 100644
--- a/public/views/preferencesEmail.html
+++ b/public/views/preferencesEmail.html
@@ -35,7 +35,7 @@ <h4></h4>
     <input type="submit" class="button expand black round" value="{{'Save'|translate}}"
     ng-style="{'background-color':index.backgroundColor}" ng-disabled="emailForm.$invalid && !index.preferencesGlobal.preferencesEmail">
   </form>
-    <div class="text-gray size-12 text-center" donttranslate>Setting up email notifications could weaken your privacy, if the email service provider is compromised. Information available to an attacker would include your wallet addresses and its balance, but no more.
+    <div class="text-gray size-13 text-center" donttranslate>Setting up email notifications could weaken your privacy, if the email service provider is compromised. Information available to an attacker would include your wallet addresses and its balance, but no more.
   </div>
 </div>
 <div class="extra-margin-bottom"></div>
diff --git a/public/views/preferencesHub.html b/public/views/preferencesHub.html
index f85fad2c0..1e7486488 100644
--- a/public/views/preferencesHub.html
+++ b/public/views/preferencesHub.html
@@ -17,7 +17,7 @@ <h4></h4>
 	  </div>
     <input type="submit" class="button expand black round" value="{{'Save'|translate}}" ng-style="{'background-color':index.backgroundColor}">
   </form>
-    <div class="text-gray size-12 text-center" translate>The hub for receiving messages from other devices.
+    <div class="text-gray size-13 text-center" translate>The hub for receiving messages from other devices.
   </div>
 </div>
 <div class="extra-margin-bottom"></div>
diff --git a/public/views/preferencesInformation.html b/public/views/preferencesInformation.html
index 2d448c653..c6f3b6ff8 100644
--- a/public/views/preferencesInformation.html
+++ b/public/views/preferencesInformation.html
@@ -75,7 +75,7 @@ <h4 class="title m0" translate>Co-signers</h4>
         <span class="size-12" ng-show="copayer.me">
           <i class="icon-contact size-24 m10r"></i>{{'Me'|translate}} <i class="fi-check m5 right"></i>
         </span>
-        <span class="size-12 text-gray" ng-show="!copayer.me">
+        <span class="size-13 text-gray" ng-show="!copayer.me">
           <i class="icon-contact size-24 m10r"></i> {{copayer.name}}<i class="fi-check m5 right"></i>
         </span>
       </li>
@@ -97,7 +97,7 @@ <h4 class="title m0" translate>All Wallet Addresses</h4>
           <div class="enable_text_select ellipsis">
             {{a.address}} 
           </div>
-          <div class="text-gray size-12 right enable_text_select">
+          <div class="text-gray size-13 right enable_text_select">
             {{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}
           </div>
       </li>
diff --git a/public/views/preferencesTor.html b/public/views/preferencesTor.html
index acce43f09..8695ec98d 100644
--- a/public/views/preferencesTor.html
+++ b/public/views/preferencesTor.html
@@ -14,7 +14,7 @@ <h4></h4>
 		<label><span translate>Host</span></label>
 		<input type="text" id="host" name="host" ng-model="socksHost" placeholder="127.0.0.1">
 		<label><span translate>Port</span></label>
-		<div class="text-warning size-12 m10b" ng-show="errorPortInput">{{errorPortInput}}</div>
+		<div class="text-warning size-13 m10b" ng-show="errorPortInput">{{errorPortInput}}</div>
 		<input type="text" id="port" name="port" ng-model="socksPort" placeholder="9150">
 		<input type="submit" class="button expand black round" value="{{'Save'|translate}}"
 			   ng-style="{'background-color':index.backgroundColor}">
diff --git a/public/views/recoveryFromSeed.html b/public/views/recoveryFromSeed.html
index e0e8d6e3f..e59caba6e 100644
--- a/public/views/recoveryFromSeed.html
+++ b/public/views/recoveryFromSeed.html
@@ -33,7 +33,7 @@ <h4></h4>
 			<input ng-show="!recFromSeed.scanning" type="submit" class="button expand black round"
 				   value="{{'Recover'|translate}}" ng-style="{'background-color':index.backgroundColor}">
 		</form>
-		<div class="text-alert size-12 columns">
+		<div class="text-alert size-13 columns">
 			<span translate>WARNINGS:</span>
 			<ul class="warnings">
 				<li translate>This will permanently delete all your existing wallets!</li>
diff --git a/public/views/splash.html b/public/views/splash.html
index 6c6c54fb5..c61da6b8e 100644
--- a/public/views/splash.html
+++ b/public/views/splash.html
@@ -40,7 +40,7 @@
 						</p>
 					</div>
 					
-					<button ng-click="splash.setWalletType()" class="button black expand round size-12 text-spacing m20t" translate>
+					<button ng-click="splash.setWalletType()" class="button black expand round size-13 text-spacing m20t" translate>
 						CONTINUE
 					</button>
 				</div>
@@ -60,7 +60,7 @@
 					<logo negative="true" height="126"></logo>
 				</div>
 			</div>
-			<div class="text-center size-12 text-warning" ng-show="splash.error && !splash.creatingProfile">
+			<div class="text-center size-13 text-warning" ng-show="splash.error && !splash.creatingProfile">
 				{{splash.error|translate}}. <span translate>Retrying...</span>
 			</div>
 			<div class="onGoingProcess" ng-show="splash.creatingProfile">
@@ -82,14 +82,14 @@
 						<label><span class="text-gray" translate>Please name this device</span></label>
 						<input type="text" id="deviceName" type="text" name="deviceName" ng-model="splash.deviceName" class="text-gray dark-centered-input">
 
-						<button ng-click="splash.saveDeviceName()" class="button black expand round size-12 text-spacing" ng-disabled="!splash.deviceName" translate>
+						<button ng-click="splash.saveDeviceName()" class="button black expand round size-13 text-spacing" ng-disabled="!splash.deviceName" translate>
 							CONTINUE
 						</button>
 					</div>
 					<div ng-show="splash.bDeviceNameSet">
 						<p class="text-gray size-14 m0 text-light m20b" translate>Your wallet will be created on this device, keep it safe.  See your backup options in the Settings menu.</p>
 						<p class="text-gray size-14 m0 text-light m20b" translate>Also in the Settings menu, you will find security options such as setting a password.</p>
-						<button ng-click="splash.create()" class="button black expand round size-12 text-spacing" translate>
+						<button ng-click="splash.create()" class="button black expand round size-13 text-spacing" translate>
 							GET STARTED
 						</button>
 					</div>
diff --git a/public/views/translators.html b/public/views/translators.html
index d58c91264..dacc4d91f 100644
--- a/public/views/translators.html
+++ b/public/views/translators.html
@@ -48,11 +48,11 @@ <h4 class="title m0" translate>Translation Credits</h4>
   </ul>
   <div class="row m20t">
     <div class="columns text-center">
-      <p class="size-12 text-black">
+      <p class="size-13 text-black">
         <span translate>All contributions to Obyte's translation are welcome. Sign up at crowdin.com and join the O<sub>byte</sub> project at</span> 
         <a href ng-click="$root.openExternalLink('https://crowdin.com/project/byteball')">https://crowdin.com/project/byteball</a>.
       </p>
-      <span class="size-12 text-gray" translate>
+      <span class="size-13 text-gray" translate>
         Don't see your language on Crowdin? Contact the Owner on Crowdin! We'd love to support your language.
       </span>
     </div>
diff --git a/public/views/walletHome.html b/public/views/walletHome.html
index ed1fedbbb..2d4eab4e6 100644
--- a/public/views/walletHome.html
+++ b/public/views/walletHome.html
@@ -12,9 +12,10 @@
 }
 #send .mtab-title, .modal-content .mtab-title {
 	padding: 5px;
-	font-weight: bold;
-	font-size: 11px;
+	/* font-weight: bold; */
+	font-size: 12px;
 	text-transform: uppercase;
+  text-align: center;
 }
 #send .mtab-title.active, .modal-content .mtab-title.active {
 	color: #34495E;
@@ -110,10 +111,12 @@
     <div id="walletHome" class="walletHome tab-view tab-in">
 	  <div style="position:absolute; width: 100%; left: 0px; top: 15px; text-align: center; color: white; z-index: 1" ng-if="home.isTestnet">{{home.testnetName}}</div>
       <div class="oh">
-        <div class="amount" ng-style="{'background-color':index.backgroundColor}" ng-swipe-right="index.suspendSwipe()">
+        <div class="amount" ng-style="{'background-color':index.backgroundColor}"
+        ng-swipe-right="index.suspendSwipe()"
+        style="background-image: linear-gradient( rgb(124, 194, 276), rgb(44, 124, 206));">
           <div ng-if="!index.anyOnGoingProcess || 1" style="position: relative;">
             <div ng-show="index.updateError" ng-click='index.openWallet(); index.updateTxHistory()'>
-              <span class="size-12 db m10b">{{index.updateError|translate}}</span>
+              <span class="size-13db m10b">{{index.updateError|translate}}</span>
               <button class="outline white tiny round" translate>Tap to retry</button>
             </div>
 
@@ -188,7 +191,7 @@
             ng-style="{'background-color':index.backgroundColor}">{{ (index.alias || index.walletName) | limitTo: 1}}
           </div>
           <div class="right">
-            <a ng-click="$root.go('preferences')" class="button outline round light-gray tiny preferences-icon m0" ng-if="!index.shared_address">
+            <a ng-click="$root.go('preferences')" class="button outline round light-gray tiny preferences-icon m0" style="margin-top:6px" ng-if="!index.shared_address">
               <i class="fi-widget size-18 vm wallet-settings"></i>
               <span class="show-for-medium-up" translate>Preferences</span>
             </a>
@@ -197,11 +200,11 @@
               <span class="show-for-medium-up" translate>Definition</span>
             </a>
           </div>
-          <div class="wallet-info">
-              <p class="m0">
+          <div class="wallet-info" >
+              <p class="m0" style="margin-top: 12px;">
               {{(index.alias || index.walletName)}}<span ng-if="index.shared_address" style="overflow:hidden; text-overflow: ellipsis; white-space: nowrap;"><br>Smart wallet: {{index.shared_address | limitTo: 6}}...</span>
               </p>
-              <div class="size-12 text-gray" ng-if="!index.shared_address">
+              <div class="size-13 text-gray" ng-if="!index.shared_address">
                 <span ng-include="'views/includes/walletInfo.html'"></span>
               </div>
           </div>
@@ -217,7 +220,7 @@ <h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsen
           ng-include="index.txTemplateUrl">
         </div>
 
-        <div class="text-gray text-center size-12 p10t"
+        <div class="text-gray text-center size-13p10t"
           ng-show="index.lockedBalanceBytes && !index.updatingStatus">
           <span translate>Total Locked Balance</span>:
           <b>{{index.lockedBalanceStr}} </b>
@@ -293,7 +296,7 @@ <h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
                   <span translate>Share address</span>
                 </span>
               </div>
-              <div class="line-t size-12 text-center">
+              <div class="line-t size-13 text-center">
 				<span ng-if="index.shared_address" translate>This address is shared with {{index.shared_address_cosigners}}.</span>
 				<span ng-if="!index.shared_address" translate>Share this wallet address to receive payments.</span>
 				<span ng-if="!index.shared_address && 0" translate>To protect your privacy, new addresses are generated automatically once you use them.</span>
@@ -356,10 +359,10 @@ <h4 class="title m0">
             <div class="box-notification" ng-show="home.error" ng-click="home.resetError()">
               <span class="text-warning">
                 {{home.error|translate}}
-              </span> 
+              </span>
               <a class="close-notification text-warning">&#215;</a>
             </div>
-			  
+
             <div class="row"  ng-hide="home.hideAmount">
               <div class="large-12 medium-12 columns">
                 <div class="right" ng-hide="sendPaymentForm.amount.$pristine && !sendPaymentForm.amount.$modelValue ">
@@ -428,11 +431,11 @@ <h4 class="title m0">
 	                <!--<div class="addressbook-input" ng-show="!sendPaymentForm.address.$invalid && _address">
 	                  {{index.addressbook[_address] || _address}}
 	                </div>-->
-	                <a class="postfix size-12 m0 text-gray" ng-hide="home.blockUx || home.lockAddress || home.send_multiple" ng-click="openDestinationAddressModal(index.otherWallets, _address)">
-	                  <i class="icon-wallet size-18" style="margin-right: -3px;vertical-align: baseline;"></i>
+	                <a class="postfix size-13 m0 text-gray" ng-hide="home.blockUx || home.lockAddress || home.send_multiple" ng-click="openDestinationAddressModal(index.otherWallets, _address)">
+	                  <i class="icon-wallet size-21" style="margin-right: -3px;vertical-align: baseline;"></i>
 	                </a>
 	              </div>
-				  <div ng-if="home.deviceAddressIsKnown()" style="font-size: 11px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem;">
+				  <div ng-if="home.deviceAddressIsKnown()" style="font-size: 12px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem;">
 					  <a ng-click="home.openBindModal()">
 						  <span ng-if="!home.binding" translate>Bind the payment to a condition...</span>
 						  <span ng-if="home.binding" translate>This payment is bound to a condition...</span>
@@ -444,8 +447,8 @@ <h4 class="title m0">
 						  <span ng-if="!home.send_multiple" translate ng-click="home.resetForm(sendPaymentForm)">switch to multi-address</span>
 					  </a>
 				  </div>
-				  <div id="binding-drop" class="f-dropdown" data-dropdown-content style="padding: 10px;" translate>To bind the payment to a condition, please click the peer's address in chat</div>  
-				  <div ng-if="!home.deviceAddressIsKnown()" style="font-size: 11px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem">
+				  <div id="binding-drop" class="f-dropdown" data-dropdown-content style="padding: 10px;" translate>To bind the payment to a condition, please click the peer's address in chat</div>
+				  <div ng-if="!home.deviceAddressIsKnown()" style="font-size: 12px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem">
 					  <a dropdown-toggle="#binding-drop" data-options="align:top">
 						  <span translate class="text-gray">Bind the payment to a condition</span>
 					  </a>
@@ -479,7 +482,7 @@ <h4 class="title m0">
 
               <div class="row" ng-if="home.feedvaluespairs.length === 0">
                   <div class="large-12 columns m30b">
-                      <a style="font-size: 11px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem;" ng-click="home.feedvaluespairs.push({})" translate>Also send data...</a>
+                      <a style="font-size: 12px; font-weight: bold; margin-top: -1.5rem; margin-bottom: 1rem;" ng-click="home.feedvaluespairs.push({})" translate>Also send data...</a>
 	                </div>
 	            </div>
 
@@ -494,8 +497,8 @@ <h4 class="title m0">
                     </span>
                     <div class="clear"></div>
                     <a ng-click="home.feedvaluespairs.push({})" style="padding:10px 0;" ng-show="home.feedvaluespairs.length < 20">
-                      <i class="fi-plus size-18 m10r" style="vertical-align: middle;"></i> 
-                      <span class="text-close size-12" translate>Add fields</span> 
+                      <i class="fi-plus size-18 m10r" style="vertical-align: middle;"></i>
+                      <span class="text-close size-12" translate>Add fields</span>
                     </a>
                   </div>
                 </div>
@@ -598,8 +601,8 @@ <h4 class="title m0">
 					<i data-trans="{{'Add answer' | translate}}" data-trans="{{'Add fields' | translate}}" data-trans="{{'Options for answering' | translate}}" data-trans="{{'Values' | translate}}" data-trans="{{'Answer' | translate}}" data-trans="{{'Field' | translate}}" data-trans="{{'Profile field' | translate}}" data-trans="{{'Datafeed name' | translate}}" data-trans="{{'Profile field value' | translate}}" data-trans="{{'Value' | translate}}" data-trans="{{'Datafeed value' | translate}}" data-trans="{{'confirmed' | translate}}" data-trans="{{'available' | translate}}" ></i>
 					<div class="clear"></div>
 					<a ng-click="home.feedvaluespairs.push({})" style="padding:10px 0;" ng-show="home.feedvaluespairs.length < 20">
-						<i class="fi-plus size-18 m10r" style="vertical-align: middle;"></i> 
-						<span class="text-close size-12">{{(assetIndexSelectorValue == -5 ? 'Add answer' : 'Add fields')|translate}}</span> 
+						<i class="fi-plus size-18 m10r" style="vertical-align: middle;"></i>
+						<span class="text-close size-12">{{(assetIndexSelectorValue == -5 ? 'Add answer' : 'Add fields')|translate}}</span>
 					</a>
 				</div>
 
@@ -650,7 +653,7 @@ <h4 class="title m0" style="padding:0 10px;">
         <div class="large-12 columns">
           <div class="oh text-center">
             <span ng-show="index.txHistoryError" ng-click='index.updateTxHistory()'>
-              <p class="size-12 m10b db text-gray" translate>Could not fetch transaction history</p>
+              <p class="size-13m10b db text-gray" translate>Could not fetch transaction history</p>
               <button class="outline round light-gray tiny" translate>Tap to retry</button>
             </span>
             <span ng-if="!index.txHistoryError" translate>
@@ -669,12 +672,12 @@ <h4 class="title m0" style="padding:0 10px;">
             <div class="rect5"></div>
           </div>
         </div>
-        <div ng-show="index.txProgress > 6" translate class="size-12 text-gray m20t">
+        <div ng-show="index.txProgress > 6" translate class="size-13 text-gray m20t">
           Initial transaction history synchronization can take some minutes for wallets with many transactions.<br/>
           Please stand by.
         </div>
         <div ng-show="index.txProgress > 6" class="size-14 text-gray m20t">
-          <b>{{index.txProgress}}</b> 
+          <b>{{index.txProgress}}</b>
           <span translate>Transactions<br> Downloaded</span>
         </div>
       </div>
@@ -704,7 +707,7 @@ <h4 class="title m0" style="padding:0 10px;">
             </span>
           </div>
           <div class="large-4 medium-4 small-4 columns text-right">
-            <div class="m5t size-12 text-gray">
+            <div class="m5t size-13 text-gray">
               <time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
               <span translate class="text-warning"
                 ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
@@ -718,7 +721,7 @@ <h4 class="title m0" style="padding:0 10px;">
           <div class="size-14 text-gray columns m5t" ng-if="btx.message || btx.addressTo">
             <div ng-show="btx.message"><span translate>Note</span>: {{btx.message}}</div>
             <div ng-show="!btx.message">
-              <span translate>To</span>: {{index.addressbook[btx.addressTo] || btx.addressTo}} 
+              <span translate>To</span>: {{index.addressbook[btx.addressTo] || btx.addressTo}}
             </div>
             <span ng-show="btx.textAddress || btx.original_address" class="small-10">
               <span>{{index.getToAddressLabel(btx.textAddress || btx.original_address)}}</span>: {{index.getAddressValue(btx.textAddress || btx.original_address)}}
@@ -740,7 +743,7 @@ <h4 class="title m0" style="padding:0 10px;">
             </div>
           </div>
         </div>
-  
+
         <div class="row m20t">
           <div class="large-6 medium-6 small-6 columns">
             <button type="submit" class="button black round expand" ng-show="index.historyShowShowAll" ng-click="index.showAllHistory()" ng-style="{'background-color':index.backgroundColor}"  translate>
diff --git a/src/css/main.css b/src/css/main.css
index b7c0b4f77..d39403c3c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -93,11 +93,13 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
   font-weight: 100;
   font-size: 24px;
+  padding: 15px;
 }
 
 h2 {
   font-size: 20px;
   font-weight: 100;
+  padding: 10px;
 }
 h3 {
   font-weight: 300;
@@ -135,17 +137,27 @@ h4.title a {
 }
 
 .preferences .switch {
-  top:-5px !important;
+  top:0px !important;
+  width:33px !important;
+  height:20px !important;
+
+}
+.preferences .switch small{
+  width:20px !important;
+  height:20px !important;
+}
+.preferences .switch.checked small{
+  left:12px !important;
 }
 
 
 .preferences h4 {
   background: #F1F3F5;
-  padding: 25px 0px 5px 20px;
+  padding: 25px 0px 25px 20px;
   text-transform: uppercase;
   color: #555;
-  font-size: 12px;
-  font-weight:300;
+  font-size: 13px;
+  font-weight:500;
   margin:0;
 }
 
@@ -502,7 +514,8 @@ ul.manage li {
 .p0i {padding: 0 !important;}
 .db {display: block;}
 .size-10 { font-size: 10px; }
-.size-12 { font-size: 12px; }
+.size-12{ font-size: 12px; }
+.size-13 { font-size: 13px; }
 .size-14 { font-size: 14px; }
 .size-16 { font-size: 16px; }
 .size-18 { font-size: 18px; }
@@ -579,6 +592,7 @@ ul.manage li {
 
 .line-t {
   border-top: 1px solid #E9E9EC;
+  padding:10px;
 }
 
 .line-b {
@@ -594,6 +608,8 @@ ul.manage li {
 .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
   /*line-height: 2.7rem;*/
   line-height: 3rem; /* tested on mac and win */
+  padding:0px;
+  color: #ffffff !important;
 }
 
 .wallet-settings{
@@ -715,7 +731,7 @@ input[type="color"], input[type="date"], input[type="datetime-local"], input[typ
   background: transparent;
   border: none;
   padding-left: 0.1rem;
-  font-size: 13px;
+  font-size: 14px;
   border-bottom: 1px solid #A5B2BF;
 }
 
@@ -1203,6 +1219,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 	justify-content: space-between;
 	height: 100%;
   vertical-align: top;
+  line-height: 25px;
 }
 
 .mtab-title {
@@ -1216,7 +1233,9 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   	border-radius: 3px 3px 0 0;
 	font-size: 14px;
 	font-weight: 500;
-	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
+	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  margin-top:8px;
+  padding:5px;
 }
 .mtab-title.disabled {
 	cursor: not-allowed;
diff --git a/src/css/mobile.css b/src/css/mobile.css
index 69af4aac4..f6a5a7297 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -90,15 +90,15 @@ _:-ms-fullscreen, :root .main {
 }
 
 .tab-bar {
-  background: #FFFFFF;
+  background: #2C3E50; /*#FFFFFF;*/
   z-index: 5;
   border-bottom: 1px solid #E9E9EC;
 }
 
 .tab-bar h1 {
-  color: #7A8C9E;
-  font-weight: 500;
-  font-size: 14px;
+  color: #E4E8EC;
+  font-weight: 300;
+  font-size: 16px;
   display: inline-block;
 }
 
@@ -276,7 +276,7 @@ ul.copayer-list img {
 
 
 .right-small a, .left-small a {
-  color: #A5B2BF;
+   color: #E4E8EC; /* #A5B2BF; */
 }
 
 a.missing-copayers {
@@ -306,7 +306,8 @@ a.missing-copayers {
 }
 
 .sidebar {
-  background: #2C3E50;
+  /* background: #2C3E50; */
+  background-image: linear-gradient(#122232,#425d78);
 }
 
 .sidebar .icon {
@@ -638,7 +639,7 @@ to prevent collapsing during animation*/
   overflow-y: auto;
   bottom: 0;
   width: 100%;
-  top: 45px;
+  top: 85px;
   padding-bottom: 33px;
   -webkit-transform: translate3d(0,0,0);
   background: #fff;
@@ -856,7 +857,8 @@ textarea:focus
 .rn-carousel-control.rn-carousel-control-next, .rn-carousel-control.rn-carousel-control-prev {
 	opacity: 0.6;
 	font-size: 80px;
-	background-color: rgb(74, 144, 226);
+	background-color: rgba(0, 0, 0, 0);
+
 }
 .rn-carousel-control.rn-carousel-control-next {
 	right: -0.2em;
@@ -940,6 +942,7 @@ touch-action: manipulation; /* IE11+ */
 
 #splash{
   background-color: #283c4f;
+  background-image: linear-gradient(#122232,#425d78);
   position: absolute;
   left: 0;
   top: 0;
@@ -958,6 +961,7 @@ touch-action: manipulation; /* IE11+ */
 	font-size: 12px;
 	color: gray;
 	white-space: normal;
+  padding-top: 10px;
 }
 i.validation-icon {
 	padding: 3px;
@@ -968,4 +972,4 @@ i.validation-icon {
 }
 .keyboard-open .send-form {
 	padding-bottom: 0px;
-}
\ No newline at end of file
+}