From 6637643772e81614e026ee0eae63b788da37b0fe Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Tue, 9 Dec 2014 17:03:24 -0300
Subject: [PATCH] fix forms, show advanced option as button, fix shadows

---
 css/src/main.css   | 25 ++-----------------------
 views/create.html  | 28 ++++++++++++++++++----------
 views/import.html  | 22 ++++++++++++----------
 views/join.html    | 19 ++++++++++++-------
 views/more.html    |  5 +++--
 views/profile.html | 24 +++++++++++-------------
 6 files changed, 58 insertions(+), 65 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index c1f1c83ab..a20a227e3 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -975,24 +975,13 @@ table tr.deleting {
   background: #FCD5D5;
 }
 
-/* SECONDARY */
-
-input[type='submit']
-{
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    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: #343c43;
   margin-bottom: 1.3rem;
   height: 40px;
-  border-radius: 3px;
   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);
+  -moz-box-shadow: none;
+  box-shadow: none;
   border: none;
   padding-left: 45px;
 }
@@ -1001,8 +990,6 @@ button.secondary,
 .button.secondary { 
   color: #fff;
   background: #008CC1;
-  -moz-box-shadow:    1px 1px 0px 0px #10769D;
-  box-shadow:         1px 1px 0px 0px #10769D;
 }
 button.secondary:hover, 
 button.secondary:focus, 
@@ -1034,8 +1021,6 @@ button.primary,
   color: #fff;
   border-radius: 3px;
   border-radius: 3px;
-  -moz-box-shadow:    1px 1px 0px 0px #16A085;
-  box-shadow:         1px 1px 0px 0px #16A085;
 }
 button.primary:hover, 
 button.primary:focus, 
@@ -1056,8 +1041,6 @@ button[disabled].primary:focus,
 .button.disabled.primary:focus, 
 .button[disabled].primary:hover, 
 .button[disabled].primary:focus {
-  -moz-box-shadow:    1px 1px 0px 0px #687D80;
-  box-shadow:         1px 1px 0px 0px #687D80;
   background-color: #95a5a6;
   color: #E6E6E6;
 }
@@ -1068,8 +1051,6 @@ button.warning,
   background-color: #C0392A;
   color: #fff;
   border-radius: 3px;
-  -moz-box-shadow:    1px 1px 0px 0px #A02F23;
-  box-shadow:         1px 1px 0px 0px #A02F23;
 }
 button.warning:hover, 
 button.warning:focus, 
@@ -1128,8 +1109,6 @@ button[disabled].white:focus,
 /* BLACK */
 button.black, 
 .button.black { 
-  -moz-box-shadow:    1px 1px 0px 0px #1B2937;
-  box-shadow:         1px 1px 0px 0px #1B2937;
   background-color: #2C3E50;
   color: #fff;
 }
diff --git a/views/create.html b/views/create.html
index 2b61e5873..b1c33c403 100644
--- a/views/create.html
+++ b/views/create.html
@@ -30,7 +30,7 @@
     
 
           <div class="panel">
-            <label><span translate>Wallet name (*)</span>
+            <label><span translate>Wallet name</span>
               <div class="input">
                 <input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" ng-model="walletName" ng-required="true">
                 <i class="icon-wallet"></i>
@@ -59,10 +59,10 @@
             </div>
             <p translate class="comment" ng-show="totalCopayers>1">(*) The limits are imposed by the bitcoin network.</p>
 
-            <div class="line-dashed-h"></div>
+            <div class="line-dashed-h m20b"></div>
 
-            <div class="m20t m20b">
-              <a class="small" ng-click="hideAdv=!hideAdv">
+            <div class="m20b oh">
+              <a class="small left button-setup" ng-click="hideAdv=!hideAdv">
                 <i class="fi-widget m3r"></i>
                 <span translate ng-hide="!hideAdv">Show</span> 
                 <span translate ng-hide="hideAdv">Hide</span> 
@@ -72,17 +72,25 @@
               </a>
             </div>
             <div ng-hide="hideAdv" class="row">
-              <input id="network-name" type="checkbox" ng-model="networkName" ng-true-value="'testnet'"
-              ng-false-value="'livenet'" class="form-control" ng-checked="networkName == 'testnet' ? true : false">
-              <label for="network-name" translate>Use test network</label>
+              <div class="large-12 columns">
 
-              <p>
-              <input type="text" placeholder="BIP32 master extended private key (hex)" name="private" ng-model="private">
+                <label for="network-name">
+                  <input id="network-name" type="checkbox" ng-model="networkName" ng-true-value="'testnet'"
+                  ng-false-value="'livenet'" class="form-control" ng-checked="networkName == 'testnet' ? true : false">
+                  Use test network
+                </label>
+
+                <label for="ext-master">Master extended private key
+                <input id="ext-master" 
+                  type="text" 
+                  placeholder="BIP32 master extended private key (hex)" 
+                  name="private" ng-model="private">
+              </div>
             </div>
 
 
             <div class="text-right">
-              <button translate  type="submit" class="button primary m0" ng-disabled="setupForm.$invalid || loading">
+              <button translate  type="submit" class="button primary expand m0" ng-disabled="setupForm.$invalid || loading">
                 Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
               </button>
             </div>
diff --git a/views/import.html b/views/import.html
index 58d5d4bec..81dbb5498 100644
--- a/views/import.html
+++ b/views/import.html
@@ -57,16 +57,18 @@
               <i class="icon-locked"></i>
             </div>
 
-            <div class="line-dashed-h m10b m20t"></div>
+            <div class="line-dashed-h m20b"></div>
 
-            <a class="expand small" ng-click="hideAdv=!hideAdv">
-              <i class="fi-widget m3r"></i>
-              <span translate ng-hide="!hideAdv">Show</span> 
-              <span translate ng-hide="hideAdv">Hide</span> 
-              <span translate>advanced options</span>
-              <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-              <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-            </a>
+            <div class="m20b oh">
+              <a class="small left button-setup" ng-click="hideAdv=!hideAdv">
+                <i class="fi-widget m3r"></i>
+                <span translate ng-hide="!hideAdv">Show</span> 
+                <span translate ng-hide="hideAdv">Hide</span> 
+                <span translate>advanced options</span>
+                <i ng-if="hideAdv" class="icon-arrow-down4"></i>
+                <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
+              </a>
+            </div>
 
             <div ng-hide="hideAdv" class="m10t">
               <label>
@@ -88,7 +90,7 @@
 
 
             <div class="text-right m20t">
-              <button translate type="submit" class="button black m0" ng-disabled="importForm.$invalid">
+              <button translate type="submit" class="button expand black m0" ng-disabled="importForm.$invalid">
                 Import backup
               </button>
             </div>
diff --git a/views/join.html b/views/join.html
index cbd22bce7..3c4123e64 100644
--- a/views/join.html
+++ b/views/join.html
@@ -52,10 +52,10 @@
                 ng-include="'views/includes/scanner.html'">
               </div>
 
-            <div class="line-dashed-h"></div>
+            <div class="line-dashed-h m20b"></div>
 
-            <div class="m20t m20b left">
-              <a class="expand small" ng-click="hideAdv=!hideAdv">
+            <div class="m20b oh">
+              <a class="small left button-setup" ng-click="hideAdv=!hideAdv">
                 <i class="fi-widget m3r"></i>
                 <span translate ng-hide="!hideAdv">Show</span> 
                 <span translate ng-hide="hideAdv">Hide</span> 
@@ -64,13 +64,18 @@
                 <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
               </a>
             </div>
-            <div ng-hide="hideAdv">
-              <p>
-              <input class="columns" type="text" placeholder="BIP32 master extended private key (hex)" name="private" ng-model="$parent.private">
+            <div ng-hide="hideAdv" class="row">
+              <div class="large-12 columns">
+                <label for="ext-master">Master extended private key
+                  <input id="ext-master" 
+                  type="text" 
+                  placeholder="BIP32 master extended private key (hex)" name="private" ng-model="$parent.private">
+                </label>
+              </div>
             </div>
 
             <div class="text-right m20t">
-              <button translate type="submit" class="button secondary m0" ng-disabled="joinForm.$invalid">Join</button>
+              <button translate type="submit" class="button expand secondary m0" ng-disabled="joinForm.$invalid">Join</button>
             </div>
           </div>
         </form>
diff --git a/views/more.html b/views/more.html
index 8d5940974..d6af76cd0 100644
--- a/views/more.html
+++ b/views/more.html
@@ -27,7 +27,7 @@
   
   <div class="m20b row">
     <div class="large-12 columns">
-      <a class="size-12" ng-click="hideAdv=!hideAdv">
+      <a class="small left button-setup" ng-click="hideAdv=!hideAdv">
         <i class="fi-widget m3r"></i>
         <span translate ng-hide="!hideAdv">Show</span> 
         <span translate ng-hide="hideAdv">Hide</span> 
@@ -89,7 +89,8 @@
     <div class="large-12 columns">
       <div class="panel">
         <h2><i class="fi-minus-circle m10r"></i> 
-          <span translate>Join Secret</span> </h2>
+          <span translate>Join Secret</span>
+        </h2>
         <p translate class="text-gray">
         This is the initial secret join string. Since your wallet it is already complete, this is only useful to rejoin peers that lost their backup BUT have the extended private key stored (they will be rejected on other case). They need to enter their extended private key during the join process (in advanced options).
         </p>
diff --git a/views/profile.html b/views/profile.html
index 5309927df..4ea689d2d 100644
--- a/views/profile.html
+++ b/views/profile.html
@@ -108,9 +108,9 @@
 
   <div class="line-dashed-h m20b"></div>
   
-  <div class="m20b row">
+  <div class="m20b row oh">
     <div class="large-12 columns">
-      <a class="size-12" ng-click="hideAdv=!hideAdv">
+      <a class="small left button-setup" ng-click="hideAdv=!hideAdv">
         <i class="fi-widget m3r"></i>
         <span translate ng-hide="!hideAdv">Show</span> 
         <span translate ng-hide="hideAdv">Hide</span> 
@@ -122,17 +122,15 @@
   </div>
 
   <div ng-hide="hideAdv" class="row">
-    <div class="row">
-      <div class="large-12 columns">
-        <div class="panel">
-          <h2><i class="fi-minus-circle m10r"></i> 
-            <span translate>Delete Profile</span>
-          </h2>
-          <p translate class="text-gray">Permanently delete this profile and all its wallets. WARNING: this action cannot be reversed.</p>
-          <a translate class="button warning m0" ng-really-message="{{'Are you sure you want to delete this profile?' | translate}}" 
-            ng-really-click="deleteProfile()">Delete Profile
-          </a>
-        </div>
+    <div class="large-12 columns">
+      <div class="panel">
+        <h2><i class="fi-minus-circle m10r"></i> 
+          <span translate>Delete Profile</span>
+        </h2>
+        <p translate class="text-gray">Permanently delete this profile and all its wallets. WARNING: this action cannot be reversed.</p>
+        <a translate class="button warning m0" ng-really-message="{{'Are you sure you want to delete this profile?' | translate}}" 
+          ng-really-click="deleteProfile()">Delete Profile
+        </a>
       </div>
     </div>
   </div>