From bb7293aff3461dec8ad7998b629d3c1ccd0a7a17 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Thu, 27 Nov 2014 18:33:07 -0300
Subject: [PATCH] add icon on forms

---
 css/src/main.css         | 13 +++++++-
 views/createProfile.html | 48 ++++++++++++++--------------
 views/home.html          |  4 +--
 views/send.html          | 69 ++++++++++++++++++++++------------------
 4 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index 476f9bd0b..b1f045ee8 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -1181,13 +1181,22 @@ button.gray:focus,
   width: 38px;
   height: 28px;
   right: 7px;
-  top: 28px;
+  top: 7px;
   -moz-box-shadow: none;
   box-shadow: none;
   line-height: 1.7rem;
   border-radius: 2px;
 }
 
+.postfix.button i, .prefix.button i {
+  left: 12px;
+  top: 0;
+  border: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+}
+
 label.postfix, span.postfix {
   height: 40px;
   border: none;
@@ -1292,6 +1301,8 @@ a:hover .photo-container  {
   float: left;
 }
 
+.input { position: relative;}
+
 .input i {
   position: absolute;
   top: 25%;
diff --git a/views/createProfile.html b/views/createProfile.html
index bddc3738c..c06aa700f 100644
--- a/views/createProfile.html
+++ b/views/createProfile.html
@@ -28,31 +28,29 @@
         </span>
       </div>
       <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
-        <div class="row collapse">
-          <div class="row">
-            <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>
-          </div>
-          <div class="input pr">
-            <input type="email" ng-model="email" class="form-control fi-email"
-            name="email" placeholder="Email" required auto-focus>
-            <i class="fi-mail"></i>
-          </div>
+        <div class="row">
+          <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>
+        </div>
+        <div class="input">
+          <input type="email" ng-model="email" class="form-control fi-email"
+          name="email" placeholder="Email" required auto-focus>
+          <i class="fi-mail"></i>
         </div>
 
-          <label for="insightLivenet">Password</label>
-          <div class="input pr">
-            <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: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
-            <i class="fi-lock"></i>
-          </div>
+        <label for="insightLivenet">Password</label>
+        <div class="input">
+          <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: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
+          <i class="fi-lock"></i>
+        </div>
 
         <div class="row">
           <label class="left" for="insightLivenet">Confirm Password</label>
@@ -64,9 +62,9 @@
           <span class="icon-input right" ng-show="profileForm.repeatpassword.$dirty &&
             !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>  
         </div>
-        <div class="input pr">
+        <div class="input">
           <input type="password" ng-model="repeatpassword"
-          class="form-control" name="repeatpassword" 
+          class="input form-control" name="repeatpassword" 
           placeholder="{{'Repeat password'|translate}}"
           match="password" required>
           <i class="fi-lock"></i>
diff --git a/views/home.html b/views/home.html
index 92a969f89..f6003dfb3 100644
--- a/views/home.html
+++ b/views/home.html
@@ -56,12 +56,12 @@
           <i class="fi-x"></i> 
           {{error|translate}}
           </p>
-        <div class="input pr">
+        <div class="input">
           <input type="email" ng-model="email" class="form-control"
             name="email" placeholder="Email" required auto-focus>
           <i class="fi-mail"></i>
         </div>
-        <div class="input pr">
+        <div class="input">
         <input type="password" ng-model="password" class="form-control"
           name="password" placeholder="Password" required>
           <i class="fi-lock"></i>
diff --git a/views/send.html b/views/send.html
index 353dd5922..d16105a59 100644
--- a/views/send.html
+++ b/views/send.html
@@ -48,25 +48,27 @@
                 Not valid
               </span>
               <small class="icon-input right" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
-
-              <div class="pr">
-                <input class="columns" type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
-                placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
-                <div ng-hide="showScanner || disableScanner">
-                  <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
-                </div>
-                <div ng-show="showScanner">
-                  <a translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></a>
-                </div>
-              </div>
-
-              <div id="scanner" 
-                class="row" 
-                ng-if="showScanner"
-                ng-include="'views/includes/scanner.html'"></div>
-              
             </div>
 
+            <div class="input">
+              <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>
+              <i class="fi-address-book"></i>
+              <div ng-hide="showScanner || disableScanner">
+                <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
+              </div>
+              <div ng-show="showScanner">
+                <a translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></a>
+              </div>
+            </div>
+
+            <div id="scanner" 
+              class="row" 
+              ng-if="showScanner"
+              ng-include="'views/includes/scanner.html'">
+            </div>
+
+
             <div class="row">
               <div class="large-6 medium-6 columns">
                 <div class="row collapse">
@@ -80,20 +82,22 @@
                   <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">
+                    <div class="input">
+                      <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">
+                      <i class="fi-bitcoin"></i>
+                    </div>
                     <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>
@@ -103,12 +107,12 @@
                 <div class="row collapse">
                   <label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
                   <div class="small-9 columns">
-                    <input type="number" id="alternative_amount"
-                    ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
-                    name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
-                    required
-                    autocomplete="off"
-                    >
+                    <div class="input">
+                      <input type="number" id="alternative_amount"
+                      ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
+                      name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"requiredautocomplete="off">
+                      <i class="fi-dollar"></i>
+                    </div>
                   </div>
                   <div class="small-3 columns">
                     <span class="postfix">{{alternativeIsoCode}}</span>
@@ -158,8 +162,11 @@
                   <small translate ng-hide="!sendForm.comment.$pristine">optional</small>
                   <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
                 </label>
-                <textarea id="comment" ng-disabled="loading"
+                <div class="input">
+                  <textarea id="comment" ng-disabled="loading"
                   name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
+                  <i class="fi-page-edit"></i>
+                </div>
               </div>
             </div>