Merge pull request #1809 from bechi/notification

WIP: Notification

css/src/main.css

@@ -77,6 +77,16 @@ header .alt-currency {
   background: #16A085;
 }
 
+.panel h3, .box-setup h3 {
+  font-weight: 700;
+  font-size: 16px;
+  color: #2C3E50;
+  text-transform: uppercase;
+  border-bottom: 1px solid #E5E7EA;
+  margin-bottom: 1.5rem;
+  padding: 0 0 0.8rem;
+}
+
 .alt-currency {
   background: #2C3E50;
   padding: 0.05rem 0.2rem;
@@ -324,6 +334,7 @@ a:hover {
 }
 
 .box-setup {
+  margin-bottom: 7rem;
   padding: 1.3rem; 
   border-radius: 2px;
   background: #FFFFFF;
@@ -338,6 +349,35 @@ a:hover {
   font-size: 12px;
 }
 
+.box-notification {
+  height: 41px;
+  position: relative;
+  font-size: 12px;
+  width: 70%;
+  padding: 0.9rem 0.7rem 0.7rem 3rem;
+  border-radius: 4px;
+  background: #F2F5F8;
+  margin: 0 auto;
+  margin-bottom: 1.6rem;
+}
+
+.box-notification .box-icon {
+  margin-right: 77px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: white;
+  background-color: #1ABC9C;
+  padding: 0.5rem;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.box-notification .box-icon.error {
+  background-color: #C0392A;
+}
+
+
 .last-transactions {
   margin-bottom: 2rem;
   background-color: #E8EAEF;
@@ -824,6 +864,14 @@ input {
   border: 0;
 }
 
+label {
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 11px;
+  color: #34495E;
+  padding: 0 0.2rem 0.3rem;
+}
+
 button.radius, .button.radius {
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -884,6 +932,18 @@ input[type='submit']
     appearance: none;
 }
 
+
+input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
+  color: #7A8C9E;
+  margin-bottom: 1.3rem;
+  height: 40px;
+  border-radius: 2px;
+  background: #F2F5F8;
+  -moz-box-shadow:    inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  box-shadow:         inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  border: none;
+}
+
 button.secondary, 
 .button.secondary { 
   color: #fff;
@@ -1116,6 +1176,28 @@ button.gray:focus,
   color: #CA5649;
 }
 
+.postfix.button, .prefix.button {
+  position: absolute;
+  width: 38px;
+  height: 28px;
+  right: 7px;
+  top: 29px;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  line-height: 1.7rem;
+  border-radius: 2px;
+}
+
+label.postfix, span.postfix {
+  height: 40px;
+  border: none;
+  background-color: #DFE5EB;
+  font-weight: 700;
+  font-size: 10px;
+  color: #7A8C9E;
+  text-transform: uppercase;
+}
+
 .photo-container {
   margin-right: 3px;
   display: inline-block;
@@ -1211,21 +1293,22 @@ a:hover .photo-container  {
 }
 
 .icon-input {
-  position: absolute;
+  font-size: 9px;
-  top: 11px;
-  right: 20px;
-  font-size: 16px;
   color: #fff;
+  vertical-align: middle;
+  margin-right: 3px;
 }
 
 .icon-input .fi-check {
+  padding: .1rem .3rem;
   background-color: #1ABC9C;
-  padding: 0.2rem 0.4rem;
+  border-radius: 100%;
 }
 
 .icon-input .fi-x {
+  padding: .1rem .3rem;
   background-color: #C0392A;
-  padding: 0.2rem 0.4rem;
+  border-radius: 100%;
 }
 
 .box-status {
@@ -1302,10 +1385,6 @@ a.text-warning:hover {color: #FD7262;}
   border: 0;
 }
 
-.box-setup h3 {
-  color: #fff;
-}
-
 .box-setup h1 {
   font-size: 16px;
   text-transform: uppercase;

views/createProfile.html

@@ -10,45 +10,49 @@
       <div ng-include="'views/includes/version.html'"></div>
     </div> 
     <div class="box-setup">
-      <h1 translate>Create Profile</h1>
+      <h3 class="text-center" translate>Create Profile</h3>
+      <div class="box-notification" ng-show="error">
+        <div class="box-icon error">
+          <i class="fi-x size-24"></i>
+        </div> 
+        <span class="text-warning size-14">
+          {{error|translate}}
+        </span>
+      </div>
       <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
         <div class="row collapse">
           <div class="small-12 columns">
+            <label class="left" for="insightLivenet">Email</label>
+            <span translate class="has-error right size-12" ng-show="profileForm.email.$invalid &&
+              !profileForm.email.$pristine || error">
+              <span class="icon-input"><i class="fi-x"></i></span>
+              Not valid
+            </span>
+            <span class="icon-input right" ng-show="!profileForm.email.$invalid &&
+              !profileForm.email.$pristine || error"><i class="fi-check"></i></span>
             <input type="email" ng-model="email" class="form-control fi-email"
             name="email" placeholder="Email" required>
-            <small class="icon-input" ng-show="!profileForm.email.$invalid &&
-              !profileForm.email.$pristine && !error"><i class="fi-check"></i></small>
-            <small class="icon-input" ng-show="profileForm.email.$invalid &&
-              !profileForm.email.$pristine || error"><i class="fi-x"></i></small>
           </div>
-          <p class="text-warning size-12"
-          ng-show="error">
-          <i class="fi-x"></i> 
-          {{error|translate}}
-          </p>
  
         </div>
+        <label class="left" for="insightLivenet">Password</label>
         <input id="password" type="password" ng-model="$parent.password"
         class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" 
         tooltip-html-unsafe="Password strength: <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
 
         <div class="pr">
+          <label class="left" for="insightLivenet">Confirm Password</label>
+          <span translate class="has-error right size-12" ng-show="profileForm.repeatpassword.$dirty &&
+            profileForm.repeatpassword.$invalid">
+            <span class="icon-input"><i class="fi-x"></i></span>
+            {{'Passwords must match'|translate}}
+          </span>
+          <span class="icon-input right" ng-show="profileForm.repeatpassword.$dirty &&
+            !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>
           <input type="password" ng-model="repeatpassword"
           class="form-control" name="repeatpassword" 
           placeholder="{{'Repeat password'|translate}}"
           match="password" required >  
-          <small class="icon-input"
-            ng-show="profileForm.repeatpassword.$dirty &&
-            !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></small>
-          <small class="icon-input"
-            ng-show="profileForm.repeatpassword.$dirty &&
-            profileForm.repeatpassword.$invalid"><i class="fi-x"></i></small>
-          <p class="text-warning size-12"
-          ng-show="profileForm.repeatpassword.$dirty &&
-          profileForm.repeatpassword.$invalid">
-          <i class="fi-x"></i> 
-          {{'Passwords must match'|translate}}
-          </p>
         </div>
         <button translate type="submit" class="button primary radius expand m0"
           ng-disabled="profileForm.$invalid || loading">

views/modals/address-book.html

@@ -1,12 +1,17 @@
 <h2 translate>Address Book</h2>
 <form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
-  <label for="newaddress"><span translate>Address</span>
+  <label for="newaddress" class="left"><span translate>Address</span>
     <small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
-    <small translate class="is-valid" ng-show="!addressBookForm.newaddress.$invalid && newaddress">Valid</small>
+  </label>
-    <small translate class="has-error" ng-show="addressBookForm.newaddress.$invalid && newaddress">Not valid</small>
+  <span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
+    <span class="icon-input"><i class="fi-x"></i></span>
+    Not valid
+  </span>
+  <small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
+
   <input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
     placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
-  </label>
+
   <label for="newlabel"><span translate>Label</span>
     <small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
     <input type="text" id="newlabel" name="newlabel" ng-disabled="loading"

views/send.html

@@ -14,6 +14,7 @@
     <h1 class="hide-for-large-up">{{$root.title}}</h1>
     <div class="row">
       <div class="large-6 columns">
+          <div class="panel">
           <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
             <p class="text-warning size-16"
             ng-show="error">
@@ -22,7 +23,7 @@
             </p>
 
             <div class="row collapse">
-            <label for="address">
+              <label for="address" class="left">
                 <span translate>To</span> 
                 <i class="fi-info size-12" href="#"
                   data-options="disable_for_touch:true"
@@ -31,20 +32,22 @@
                   tooltip-trigger="mouseenter"
                   tooltip-placement="right"></i>
                 <small translate ng-hide="!sendForm.address.$pristine || address">required</small>
-              <small translate class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
-              <small translate class="has-error" ng-show="sendForm.address.$invalid && address">not valid</small>
               </label>
-            <div class="small-10 columns">
+              <span translate class="has-error right size-12" ng-show="sendForm.address.$invalid && address">
+                <span class="icon-input"><i class="fi-x"></i></span>
+                Not valid
+              </span>
+              <small class="icon-input right" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
+
+              <div class="pr">
                 <input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
                 placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
-              <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
+                <div ng-hide="showScanner || disableScanner">
-              <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
+                  <button class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></button>
                 </div>
-            <div class="small-2 columns" ng-hide="showScanner || disableScanner">
+                <div ng-show="showScanner">
-              <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
+                  <button translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></button>
                 </div>
-            <div class="small-2 columns" ng-show="showScanner">
-              <a translate class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
               </div>
             </div>
             <div id="scanner" ng-if="showScanner">
@@ -68,31 +71,30 @@
             <div class="row">
               <div class="large-6 medium-6 columns">
                 <div class="row collapse">
-                <label for="amount"><span translate>Amount</span>
+                  <label for="amount" class="small-7 columns m5b"><span translate>Amount</span>
                     <small translate ng-hide="!sendForm.amount.$pristine">required</small>
-                  <small translate class="is-valid"
-                    ng-show="!sendForm.amount.$invalid &&
-                    !sendForm.amount.$pristine">valid!</small>
-                  <small translate class="has-error"
-                    ng-show="(sendForm.amount.$invalid || notValidAmount) &&
-                    !sendForm.amount.$pristine">not valid
-                  </small>
                   </label>
+                  <span translate class="has-error right size-12" ng-show="(sendForm.amount.$invalid || notValidAmount) && !sendForm.amount.$pristine">
+                    <span class="icon-input"><i class="fi-x"></i></span>
+                    Not valid
+                  </span>
+                  <small class="icon-input right" ng-show="!sendForm.amount.$invalid &&
+                    !sendForm.amount.$pristine"><i class="fi-check"></i></small>
+                  
+                  <div class="pr">
                   <div class="small-9 columns">
                     <input type="number" id="amount"
                     ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
                     name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
                     min="0.00000001" max="10000000000" valid-amount required
                     autocomplete="off">
-                  <small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
-                  <small class="icon-input" ng-show="sendForm.amount.$invalid &&
-                    !sendForm.amount.$pristine && !notValidAmount"><i class="fi-x"></i></small>
                     <a class="small input-note" title="{{'Send all funds'|translate}}"
                       ng-show="topAmount && (!$root.merchant || +$root.merchant.total === 0)"
                       ng-click="setTopAmount(sendForm)">
                       <span translate>Use all funds</span> {{$root.wallet.settings.unitName}}
                     </a>
                   </div>
+                  </div>
                   <div class="small-3 columns">
                     <span class="postfix">{{$root.wallet.settings.unitName}}</span>
                   </div>
@@ -172,7 +174,7 @@
               </div>
             </div>
           </form>
-
+        </div>
       </div>
     </div><!--  end of row -->
     <div class="row m20b" ng-show="$root.alternativeConversionRate > 0">

views/settings.html

@@ -7,7 +7,14 @@
     <div class="box-setup">
       <h1>{{title|translate}}</h1>
       <form name="settingsForm">
-
+        <div class="box-notification" ng-show="message">
+          <div class="box-icon">
+            <i class="fi-check size-24"></i>
+          </div> 
+          <span class="text-primary size-14">
+            {{message|translate}}
+          </span>
+        </div>
         <fieldset>
           <legend translate>Language</legend>
           <select class="form-control" ng-model="selectedLanguage" ng-options="o.name for o in availableLanguages" required>
@@ -15,15 +22,21 @@
         </fieldset>
         <fieldset>
           <legend translate>Insight API server</legend>
-          <label for="insightLivenet">Livenet</label>
+          <label class="left" for="insightLivenet">Livenet</label>
-          <small translate class="has-error" ng-show="settingsForm.insightLivenet.$invalid">not valid</small>
+            <div translate class="has-error right size-12" ng-show="settingsForm.insightLivenet.$invalid">
+              <span class="icon-input"><i class="fi-x"></i></span>
+              Not valid
+            </div>
           <input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
 
-          <label for="insightTestnet">Testnet</label>
+          <label class="left" for="insightTestnet">Testnet</label>
-          <small translate class="has-error" ng-show="settingsForm.insightTestnet.$invalid">not valid</small>
+          <div translate class="has-error right size-12" ng-show="settingsForm.insightTestnet.$invalid">
+            <span class="icon-input"><i class="fi-x"></i></span>
+            Not valid
+          </div>
           <input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
 
-          <div translate class="small">
+          <div translate class="small text-gray">
           Insight API server is open-source software. You can run your own instances, check <a href="http://insight.is" target="_blank">Insight API Homepage</a>
           </div>
         </fieldset>
@@ -32,7 +45,7 @@
           <label for="insightTestnet">Store wallet and profiles on</label>
           <select class="form-control" ng-model="selectedStorage" ng-options="o.name for o in availableStorages" required>
           </select>
-          <div translate class="small">
+          <div translate class="small text-gray">
           Wallets and profiles are stored encrypted using your password as a key. You can store the encrypted data locally, on your platform, or remotely on the Insight Server. <a target="_blank" href="https://github.com/bitpay/copay/tree/master/js/plugins">More pluggins are welcomed!</a>
           </div>
         </fieldset>
@@ -40,7 +53,7 @@
           <legend translate>Log level</legend>
           <select class="form-control" ng-model="selectedLogLevel" ng-options="o.name for o in availableLogLevels" required>
           </select>
-          <div translate class="small">
+          <div translate class="small text-gray">
           Log level shows information on the console. This is usefull to find bugs and help users. 'debug' is the most verbose level while 'fatal' only shows unexcpected errors</a>
           </div>
         </fieldset>