Merge pull request #3588 from bechi/feat/style-09

Feat/style 09

public/views/create.html

@@ -6,7 +6,7 @@
 
 
 
-<div class="content p20v" ng-controller="createController as create" ng-init="create.setTotalCopayers(1)">
+<div class="content p20b" ng-controller="createController as create" ng-init="create.setTotalCopayers(1)">
 
   <div class="onGoingProcess" ng-show="create.loading && !create.hwWallet">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">

public/views/import.html

@@ -4,7 +4,7 @@
   ng-init="titleSection='Import wallet';  goBackToState = 'add'; noColor = true">
 </div>
 
-<div class="content p20v" ng-controller="importController as import" ng-init="type='12'">
+<div class="content p20b" ng-controller="importController as import" ng-init="type='12'">
   <div class="onGoingProcess" ng-show="import.loading  && !import.hwWallet">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
     <div class="spinner">

public/views/modals/destination-address.html

@@ -22,7 +22,7 @@
     </section>
   </nav>
 
-  <div class="modal-content fix-modals-touch p20v">
+  <div class="modal-content fix-modals-touch p20b">
     <div class="create-tab small-only-text-center">
       <div class="row">
         <div class="tab-container small-6 medium-3 large-2" 
@@ -84,14 +84,18 @@
             ng-click="toggleSelectAddressbook(addr)">
             <i class="fi-trash"></i></a> 
           <div ng-click="selectAddressbook(addr)"> 
-            {{label}}
+
-            <div class="size-10 text-gray ellipsis">{{addr}}</div>
+            <i class="icon-contact left size-42 m10r text-gray"></i> 
+            <div class="">
+              <span>{{label}}</span>
+              <div class="size-12 text-gray ellipsis">{{addr}}</div>
+            </div>
           </div> 
         </li>
-        <li class="m10t" ng-show="!editAddressbook">
+        <li class="p10" ng-show="!editAddressbook">
-          <a ng-click="toggleAddAddressbookEntry()" class="p10">
+          <a ng-click="toggleAddAddressbookEntry()" class="p0i">
-            <i class="fi-plus size-18 m10r"></i> 
+            <i class="fi-plus size-24 m20r lh icon"></i> 
-            <span class="text-close size-12" translate>Add a new entry</span>
+            <span class="size-12 tu text-bold" translate>Add a new entry</span>
             <span ng-show="!list[newAddress] && newAddress">({{newAddress}})</span>
           </a>
         </li>

public/views/modals/tx-details.html

@@ -17,6 +17,19 @@
      ng-swipe-right="cancel()">
   <div class="header-modal size-36 text-center">
     <div ng-show="btx.action != 'invalid'">
+      <div ng-show="btx.action == 'received'">
+        <img src="img/icon-receive.svg" alt="sync" width="50">
+        <p class="m0 text-gray size-14"> Received</p>
+      </div>
+      <div ng-show="btx.action == 'sent'">
+        <img src="img/icon-sent.svg" alt="sync" width="50">
+        <p class="m0 text-gray size-14"> Sent</p>
+      </div>
+      <div ng-show="btx.action == 'moved'">
+        <img src="img/icon-moved.svg" alt="sync" width="50">
+        <p class="m0 text-gray size-14"> Moved</p>
+      </div>
+      
       <span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amountStr}}
     </div>
     <div ng-show="btx.action == 'invalid'">

public/views/modals/txp-details.html

@@ -22,8 +22,8 @@
     <i class="db fi-arrow-down size-24 m10v"></i>
     <span class="payment-proposal-to"
       ng-click="copyAddress(tx.toAddress)">
-      <i class="fi-bitcoin"></i>
+      <i class="fi-bitcoin left"></i>
-      <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select" address="{{tx.toAddress}}"></contact>
+      <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t size-14" address="{{tx.toAddress}}"></contact>
       <span ng-if="tx.hasMultiplesOutputs" translate>
         Multiple recipients
       </span>
@@ -41,15 +41,15 @@
       The payment was removed by creator
     </div>
 
-    <div class="row p20t white" ng-if="tx.pendingForUs">
+    <div class="oh p20t white" ng-if="tx.pendingForUs">
-      <div class="large-5 medium-5 small-6 columns">
+      <div class="large-6 medium-6 small-6 columns">
         <button class="button outline round dark-gray expand" ng-click="reject(tx);"
                                                               ng-disabled="loading">
           <i class="fi-x"></i>
           <span translate>Reject</span>
         </button>
       </div>
-      <div class="large-5 medium-5 small-6 columns text-right" ng-show="canSign">
+      <div class="large-6 medium-6 small-6 columns text-right" ng-show="canSign">
         <button class="button primary round expand" ng-click="sign(tx)"
                                                     ng-style="{'background-color':color}"
                                                     ng-disabled="loading">

src/css/main.css

@@ -691,7 +691,7 @@ input[type="color"], input[type="date"], input[type="datetime-local"], input[typ
   border: none;
   padding-left: 0.1rem;
   font-size: 13px;
-  border-bottom: 1px solid #F1F3F5;
+  border-bottom: 1px solid #E9EDF0;
 }
 
 input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {

src/css/mobile.css

@@ -121,6 +121,10 @@ _:-ms-fullscreen, :root .main {
   color: #FFFFFF;
 }
 
+.backup .right-small a, .backup .left-small a {
+  color: #7A8C9E;
+}
+
 .tab-bar .icon-back {
   font-size: 2.5rem;
   position: absolute;
@@ -293,7 +297,7 @@ a.missing-copayers {
   background: #2C3E50;
 }
 
-.sidebar .icon {
+.sidebar .icon, .modal-content .icon {
   width:  39px;
   text-align: center;
   margin-right: 15px;
@@ -754,8 +758,9 @@ textarea:focus
 }
 
 .payment-proposal-to {
+  width: 100%;
   display: inline-block;
-  padding: 3px 15px;
+  padding: 5px 15px;
   background-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -763,8 +768,8 @@ textarea:focus
   margin-right: 10px;
   padding-right: 10px;
   border-right: 1px solid;
-  border-color: rgba(0, 0, 0, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
-  font-size: 25px;
+  font-size: 20px;
   vertical-align: middle;
 }
 
@@ -806,6 +811,7 @@ textarea:focus
 }
 
 .create-tab {
+  background-color: #fff;
   width: 100%;
   border-bottom: 1px solid #DEDFE1;
   margin-bottom: 25px;
@@ -820,17 +826,13 @@ textarea:focus
 
 .create-tab a {
   font-size: .7rem;
-  padding: 0 .2rem .6rem .2rem;
+  padding: 1.2rem .2rem .6rem .2rem;
-  color: #929396;
+  color: #7A8C9E;
   text-transform: uppercase;
   font-weight: 500;
   display: block;
 }
 
-.tab-container:hover a {
-  color: #7A8C9E;
-}
-
 .tab-container.selected,
 .tab-container:active {
   border-bottom: 3px solid #4B6178;
@@ -838,7 +840,6 @@ textarea:focus
 
 .tab-container.selected a {
   color: #2C3E50;
-  font-weight: 600;
 }
 
 /* removes 300ms in IE */