UI polish

CSS and HTML UI polish: tidied up font sizes, margins and paddings. Used more gradients to make the app less "flat"
byteball · Jul 6, 2019 · 2e9d522 · 2e9d522
1 parent 4c709ce
commit 2e9d522
Show file tree

Hide file tree

Showing 33 changed files with 117 additions and 90 deletions.
diff --git 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>
+</div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
+<div ng-include="'views/includes/menu.html'" ng-show="!index.noFocusedWallet"></div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>