new style share wallet

css/main.css

@@ -21,6 +21,15 @@ html, body {height: 100%;}
   padding-bottom: 28px !important;
 }
 
+.panel.input {
+  padding: 0.7rem 1rem;
+  margin-bottom: 0;
+  border-radius: 5px;
+  background: #F8F8F8;
+  -moz-box-shadow:    inset 0px 0px 3px 0px rgba(0,0,0,0.10);
+  box-shadow:         inset 0px 0px 3px 0px rgba(0,0,0,0.10);
+}
+
 #footer {
   position: fixed;
 	margin-top: -96px; /* negative value of footer height */
@@ -113,7 +122,7 @@ html, body {height: 100%;}
 }
 
 .panel {
-  padding: 0.7rem 1rem;
+  /* padding: 0.7rem 1rem; */
   border:0;
 }
 
@@ -248,7 +257,7 @@ hr { margin: 2.25rem 0;}
 }
 .dn {display: none;}
 .pr {position: relative;}
-.m0 {margin: 0;}
+.m0 {margin: 0 !important;}
 .db {display: block;}
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
@@ -262,6 +271,7 @@ hr { margin: 2.25rem 0;}
 .size-72 { font-size: 72px; }
 .m10t {margin-top: 10px;}
 .m10b {margin-bottom: 10px;}
+.m15b {margin-bottom: 20px !important;}
 .m10r {margin-right: 10px;}
 .m10 {margin: 10px !important;}
 .m15 {margin: 15px !important;}

css/tpl-default.css

@@ -34,7 +34,7 @@
 }
 
 body {
-  background: #F5F5F5;
+  background: #F8F8FB;
 }
 
 .logo {
@@ -48,7 +48,7 @@ body {
 }
 
 .top-bar-section li.active:not(.has-form) a:not(.button) {
-  background: #f5f5f5;
+  background: #F8F8FB;
   color: #111;
 }
 
@@ -263,7 +263,7 @@ button[disabled].warning:focus,
   color: #E6E6E6;
 }
 
-.text-gray { color: #999;}
+.text-gray { color: #999 !important;}
 
 #footer {
   background: #2C3E50;

index.html

@@ -66,14 +66,11 @@
       </div>
 
       <div class="row">
-        <div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading' data-alert class="alert-box  warn radius  size-18" >
-
-
-              <div style="float:left; margin:0 15px">
-                  <i class="fi-alert size-60"></i> 
-              </div>
+        <div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
+            <div class="alert-box error radius" data-alert>
               
               <div class="size-18">
+                  <i class="fi-alert"></i> 
                   Note: Your wallet is not complete yet. 
                   <span ng-show="$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers()>1">
                   {{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are 
@@ -83,13 +80,24 @@
                   </span>
                   missing. 
               </div>
+            </div>
 
-              <div class="size-18">
-                  Share this secret with your other copayers for them to join your wallet <br>
-              </div>
-              <div class="size-24">
-              <b>{{$root.wallet.getSecret()}}</b>
+            <div class="panel radius">
+              <h3 class="m15b">Share this secret with your other copayers
+                <small> for them to join your wallet</small>
+              </h3>
+              <div class="row">
+                <div class="large-9 columns line-dashed-v text-gray">
+                  <div class="panel input left">
+                    <p class="text-gray">{{$root.wallet.getSecret()}}</p>
+                  </div>
+                </div>
+                <div class="large-3 columns" ng-show="$root.wallet">
+                  <h5 class="m0">{{$root.getWalletDisplay()}}</h5>
+                  <p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
+                </div>
               </div>
+            </div>
         </div>
       </div>