Setup page based on #228

css/main.css

@@ -149,6 +149,12 @@ h3 {
   border-right: 2px dashed #E3E3E3;
 }
 
+@media (max-width: 1025px) {
+  .line-dashed-v {
+    border: none;
+  }
+}
+
 .line-dashed-h {
   margin: 1rem 0;
   border-bottom: 2px dashed #E3E3E3;
@@ -224,6 +230,7 @@ hr { margin: 2.25rem 0;}
 .size-60 { font-size: 60px; }
 .size-72 { font-size: 72px; }
 .m10t {margin-top: 10px;}
+.m10b {margin-bottom: 10px;}
 .m10r {margin-right: 10px;}
 .m10 {margin: 10px !important;}
 .m15 {margin: 15px !important;}
@@ -301,6 +308,63 @@ hr { margin: 2.25rem 0;}
   padding: 2.7px;
 }
 
+.box-setup {
+  padding: 20px 30px;
+  border: 1px solid #eee;
+  background: #fff;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.box-setup-copayers {
+	position: relative;
+	background: #ffffff;
+	border: 2px solid #eee;
+}
+
+.box-setup-copayers:after, .box-setup-copayers:before {
+	bottom: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.box-setup-copayers:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-bottom-color: #ffffff;
+	border-width: 30px;
+	margin-left: -30px;
+}
+
+.box-setup-copayers:before {
+	border-color: rgba(238, 238, 238, 0);
+	border-bottom-color: #eee;
+	border-width: 33px;
+	margin-left: -33px;
+}
+
+.box-setup-copayers-fix {
+  overflow: hidden;
+  padding: 10px 10px 0 10px;
+}
+
+.box-setup-copay {
+  width: 60px;
+  height: 60px;
+  float: left;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  border: 3px solid #eee;
+}
+
+.box-setup-copay-required {
+  border: 3px solid green;
+}
+
 .tx-copayers {
   background: #F8F8F8;
   -moz-box-shadow:    inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);

index.html

@@ -207,36 +207,44 @@
         </div>
         <div ng-show="!loading">
           <div class="row">
-            <div class="large-6 large-centered columns">
-              <h3>Create new multisig wallet</h3>
-              <hr>
+            <div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
+            <div class="large-6 columns line-dashed-v">
               <h6>Select total number of copayers</h6>
               <select ng-model="totalCopayers" 
                 ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
               </select>
             </div>
-          </div>
-          <div class="row">
-            <div class="large-6 large-centered columns m30v">
+            <div class="large-6 columns">
               <h6>Select required number of signatures</h6>
               <select ng-model="requiredCopayers" 
                 ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
               </select>
             </div>
-            <div class="large-6 large-centered columns m30v">
-              <h6>Wallet name (optional)</h6>
-                <input ng-model="walletName" placeholder="My multisig wallet" class="size-24" style="width:100%">
             </div>
- 
-            <div class="large-6 large-centered columns m30v">
-              <hr>
+          </div>
+          <div class="row">
+            <div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
+              <div class="box-setup-copayers">
+                <div class="box-setup-copayers-fix">
+                  <img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index" src="./img/satoshi.gif" alt="Copayer {{$index+1}}-{{totalCopayers}}" ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
+              <h6>Wallet name (optional)</h6>
+                <input type="text" class="form-control" ng-model="walletName" placeholder="Enter wallet name">
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="large-12 columns line-dashed">
               <button class="button primary radius right" type="button"
                ng-click="create(totalCopayers, requiredCopayers, walletName)">
                Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
               </button>
-              <div class="left">
-                <a href="#signin">Go back</a>
-              </div>
+              <a class="button secondary radius" href="#signin">Go back</a>
             </div>
           </div>
         </div>

js/controllers/setup.js

@@ -5,6 +5,11 @@ angular.module('copay.setup').controller('SetupController',
 
     $scope.loading = false;
 
+    // ng-repeat defined number of times instead of repeating over array?
+    $scope.getNumber = function(num) {
+      return new Array(num);   
+    }
+
     $scope.totalCopayers = config.wallet.totalCopayers;
     $scope.TCValues = [];
     for (var n = 1; n <= config.limits.totalCopayers; n++)