Signin, join and create layouts.

css/main.css

@@ -77,6 +77,7 @@ h2 {
 h3 {
   font-weight: 300;
   font-size: 16px;
+  color: #fff;
 }
 
 h4 {
@@ -86,10 +87,17 @@ h4 {
 body, html{
   height:100%;
   width:100%;
-  background: #F8F8FB;
 }
 
-.page, .main, .sidebar {
+.page, .main {
+  height:100%;
+  overflow-y: auto;
+  overflow-x: none;
+  background-color: #2C3E50;
+  color: #fff;
+}
+
+.sidebar {
   height:100%;
   overflow-y: auto;
   overflow-x: none;
@@ -139,7 +147,38 @@ body, html{
 
 .main {
   margin-left: 250px;
-  padding: 1.5rem
+  padding: 1.5rem;
+  background-color: #F8F8FB;
+}
+
+.signin, .setup {
+  margin-top: 10%;
+}
+
+.logo-setup {
+  height: 100%;
+}
+
+.content-setup {
+  height: 100%;
+  border-left: 1px dashed #ccc;
+}
+
+.button-setup a {
+  display: block;
+  padding: 30px 20px;
+  background: #384D6B;
+  color: #eee;
+  margin-bottom: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  border-radius: 20px;
+
+}
+
+.footer-setup {
+  overflow: hidden;
 }
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
@@ -214,7 +253,6 @@ body, html{
 
 .name-wallet {
   font-size: 16px;
-  color: #D4D4D4;
   line-height: 16px;
 }
 
@@ -548,8 +586,6 @@ button[disabled].warning:focus,
   color: #E6E6E6;
 }
 
-.text-gray { color: #999 !important;}
-
 .side-nav li {
   font-size: 16px;
   line-height: 40px;
@@ -612,10 +648,6 @@ button[disabled].warning:focus,
   padding: 1.5rem;
 }
 
-.row {
-  margin-left: -0.9375rem;
-}
-
 .has-error {
   color: #C0392A;
 }

views/setup.html

@@ -3,10 +3,16 @@
     <i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
     Creating wallet...
   </div>
-  <div ng-show="!loading">
+  <div class="setup" ng-show="!loading">
     <form name="setupForm" ng-submit="create(setupForm)" novalidate>
       <div class="row">
-        <div class="large-8 medium-12 columns large-centered medium-centered">
+        <div class="large-4 columns logo-setup">
+          <img src="../img/logo-negative-beta.svg" alt="Copay">
+          <p class="size-12 m10t">
+          Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
+          </p>
+        </div>
+        <div class="large-8 columns content-setup">
           <h3>Create new wallet</h3>
           <label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small>
             <input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName">
@@ -65,11 +71,6 @@
               ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}">
             </div>
           </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="large-8 medium-12 columns large-centered medium-centered">
-          <div class="line-dashed">
             <a ng-show="!isSetupWalletPage" class="back-button" href="/signin">&laquo; Back</a>
             <a ng-show="isSetupWalletPage" class="back-button"
               ng-click="setupWallet()">&laquo; Back</a>
@@ -80,7 +81,6 @@
               ng-click="setupWallet()">Next</a>
         </div>
       </div>
-      </div>
     </form>
   </div>
 </div>

views/signin.html

@@ -1,9 +1,16 @@
-<div class="signin" ng-controller="SigninController">
+<div ng-controller="SigninController">
   <div data-alert class="alert-box info" ng-show="loading && !failure">
     <i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
     Authenticating and looking for peers...
   </div>
-  <div ng-show="!loading">
+  <div class="row signin" ng-show="!loading">
+    <div class="large-4 columns logo-setup">
+      <img src="../img/logo-negative-beta.svg" alt="Copay">
+      <p class="size-12 m10t">
+      Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
+      </p>
+    </div>
+    <div class="large-8 columns content-setup">
       <div ng-show="!isHome && isOpen">
         <h3>Open Wallet</h3>
         <form name="openForm" ng-submit="open(openForm)" novalidate>
@@ -15,12 +22,14 @@
         </form>
       </div>
       <div ng-show="isHome && wallets.length">
-      <h3>Open a wallet</h3>
+        <div class="button-setup">
-      <a ng-click="openWallet()" class="button secondary radius">Open</a>
+          <a ng-click="openWallet()">Open a wallet</a>
+        </div>
       </div>
       <div ng-show="isHome && !wallets.length">
-      <h3>Create a new wallet</h3>
+        <div class="button-setup">
-      <a href="/setup" class="button secondary radius">Create</a>
+          <a href="/setup">Create a new wallet</a>
+        </div>
       </div>
       <div ng-show="!isHome && isJoin">
         <h3>Join a Wallet in Creation</h3>
@@ -46,21 +55,20 @@
         </form>
       </div>
       <div ng-show="isHome && !isJoin">
-      <h3>Join a Wallet in Creation</h3>
+        <div class="button-setup">
-      <a ng-click="joinWallet()" class="button secondary
+          <a ng-click="joinWallet()">Join a Wallet in Creation</a>
-        radius">Join</a>
+        </div>
       </div>
       <div ng-show="isHome && wallets.length">
-      <h5>Create a wallet</h5>
+        <div class="button-setup">
-      <a href="/setup" class="button secondar radius">Create</a>
+          <a href="/setup">Create a wallet</a>
+        </div>
       </div>
 
-    <div ng-show="isHome">
+      <div class="footer-setup" ng-show="isHome">
-      <p class="text-gray">
+        <a class="right size-12" href="/settings">Settings</a>
-      Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
+        <a class="size-12" href="/import">Import a backup</a>
-      </p>
+      </div>
-      <a href="/settings">Settings</a> &middot;
-      <a href="/import">Import a backup</a>
     </div>
   </div> <!-- End !loading -->
 </div>