Merge pull request #3560 from bechi/feat/style-01

add icon & change bg color

public/views/preferencesGlobal.html

@@ -7,10 +7,8 @@
 
 
 <div class="content preferences" ng-controller="preferencesGlobalController as prefGlobal" ng-init="prefGlobal.init()">
-
+  <h4></h4>
   <ul class="no-bullet m0 ">
-    <h4></h4>
-
     <li ng-click="$root.go('preferencesLanguage')">
       <div class="right text-gray">
         {{prefGlobal.currentLanguageName|translate}}
@@ -19,8 +17,8 @@
       <div translate>Language</div>
     </li>
   </ul> 
+  <h4></h4>
   <ul class="no-bullet m0 ">
-    <h4></h4>
     <li ng-click="$root.go('preferencesUnit')">
       <div class="right text-gray">
         {{prefGlobal.unitName}}
@@ -36,8 +34,8 @@
       <div translate>Alternative Currency</div>
     </li>
   </ul>
+  <h4></h4>
   <ul class="no-bullet m0 ">
-    <h4></h4>
     <li ng-click="$root.go('preferencesFee')"
       ng-show="(index.network == 'livenet' ? index.feeLevels.livenet : index.feeLevels.testnet)">
       <div class="right text-gray">
@@ -51,8 +49,8 @@
       <div translate>Use Unconfirmed Funds</div>
     </li>
   </ul>
+  <h4></h4>
   <ul class="no-bullet m0 ">
-    <h4></h4>
     <li>
       <switch id="glidera-enabled" name="glideraEnabled" ng-model="glideraEnabled" class="green right"></switch>
       <div>Enable Glidera Service</div>
@@ -65,8 +63,8 @@
     </li>
     -->
   </ul>
+  <h4></h4>
   <ul class="no-bullet m0">
-    <h4></h4>
     <li ng-click="$root.go('about')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
       <div translate>About Copay</div>

public/views/walletHome.html

@@ -311,9 +311,10 @@
                 <div class="addressbook-input" ng-show="!sendForm.address.$invalid && _address">
                   {{index.addressbook[_address] || _address}}
                 </div>
-                <a class="postfix size-12 m0 text-gray"
+                <a class="postfix button" 
+                ng-style="{'background-color':index.backgroundColor}"
                 ng-click="openDestinationAddressModal(index.otherWallets, _address)">
-                  <i class="icon-wallet size-18"></i>
+                  <i class="fi-plus size-14 lh"></i>
                 </a>
               </div>
             </div>
@@ -350,7 +351,7 @@
                   <div class="input">
                     <input type="number" id="amount" ng-disabled="home.blockUx || home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount'|translate}}" ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
                     <input type="number" id="alternative"  name="alternative"  ng-model="_alternative" style="display:none">
-                    <a class="postfix" ng-click="home.showAlternative()">{{home.unitName}}</a>
+                    <a class="postfix button" ng-style="{'background-color':index.backgroundColor}" ng-click="home.showAlternative()">{{home.unitName}}</a>
                   </div>
                 </div>
                 <div ng-if="home.canShowAlternative()">
@@ -359,7 +360,7 @@
                   <div class="input">
                     <input type="number" id="alternative" ng-disabled="home.blockUx || !home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}" ng-model="_alternative" required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
                     <input type="number" id="amount" name="amount" ng-model="_amount" style="display:none">
-                    <a class="postfix" ng-click="home.hideAlternative()"> {{ home.alternativeIsoCode }}</a>
+                    <a class="postfix button black" ng-click="home.hideAlternative()"> {{ home.alternativeIsoCode }}</a>
                   </div>
                 </div>
               </div>

src/css/main.css

@@ -45,13 +45,15 @@ h4 {
   font-size: 0.875rem;
 }
 
-h4.title {
-  background: #F1F3F5;
+.send h4.title {
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.10);
+  background: #fff;
   padding: 0.8rem;
   text-transform: uppercase;
   color: #2C3E50;
   font-weight: 700;
   font-size: 0.7rem;
+  text-align: center;
 }
 
 h4.title a {
@@ -61,10 +63,6 @@ h4.title a {
   font-size: 12px;
 }
 
-.preferences {
-  background: #f1f3f5;
-}
-
 .preferences form {
   background: white;
   padding-top:10px;
@@ -77,7 +75,7 @@ h4.title a {
 
 
 .preferences h4 {
-  background: #F1F3F5;
+  background: #F6F7F9;
   padding: 25px 0px 5px 20px;
   text-transform: uppercase;
   color: #555;
@@ -227,7 +225,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 
 .page, .main {
   height:100%;
-  background-color: #fff;
+  background-color: #F6F7F9;
 }
 
 .button.small.side-bar {
@@ -244,7 +242,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 }
 
 .main {
-  background-color: #fff;
+  background-color: #F6F7F9;
   padding: 0 0 58px 0;
   position: relative;
 }
@@ -359,7 +357,7 @@ ul.tx-copayers {
 }
 
 .circle-icon {
-  background: #F1F3F5;
+  background: #fff;
   border-radius: 100%;
   padding: 1.5rem;
   width: 80px;
@@ -373,7 +371,6 @@ ul.tx-copayers {
 }
 
 .backup .circle-icon {
-  background: #fff;
   padding: 0.2rem;
   margin-bottom: 2rem;
 }
@@ -390,7 +387,7 @@ ul.tx-copayers {
 }
 
 .backup .tab-bar {
-  background: #f1f3f5;
+  background: #F6F7F9;
   border-bottom: none;
 }
 
@@ -924,15 +921,18 @@ ul.wallet-selection.wallets {
 }
 
 .postfix.button, .prefix.button {
-  position: absolute;
-  width: 38px;
-  height: 28px;
-  right: 7px;
-  top: 7px;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  line-height: 1.7rem;
-  border-radius: 2px;
+    position: absolute;
+    width: 35px;
+    height: 22px;
+    right: 7px;
+    top: 5px;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    font-size: 12px;
+    border-radius: 2px;
+    line-height: 2;
+    padding: 0;
+    font-weight: 500;
 }
 
 .postfix.button i, .prefix.button i {
@@ -958,6 +958,10 @@ label.postfix, a.postfix {
   width: 40px;
 }
 
+a.button.postfix {
+  color: #fff;
+}
+
 .pointer {
   cursor: pointer;
 }

src/css/mobile.css

@@ -193,10 +193,6 @@ _:-ms-fullscreen, :root .main {
   height:100%;
 }
 
-.walletHome {
-  background-color: #fff;
-}
-
 .walletHome .avatar-wallet {
   padding: 0.5rem;
   width: 75px;
@@ -600,7 +596,7 @@ to prevent collapsing during animation*/
   top: 45px;
   padding-bottom: 33px;
   -webkit-transform: translate3d(0,0,0);
-  background: #fff;
+  background: #f6f7f9;
 }
 
 body.modal-open {