From 420d5f253cc10b4034d564712c449ef98c92615b Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Mon, 20 Oct 2014 20:46:49 -0300
Subject: [PATCH] fixes: createProfile, home and settings. Cleaning css

---
 css/src/main.css         | 118 +++++++++------------------------------
 css/src/mobile.css       |   2 +-
 views/createProfile.html |  32 +++++++----
 views/home.html          |  30 +++++-----
 views/settings.html      |  61 ++++++++++----------
 5 files changed, 95 insertions(+), 148 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index cff19084d..e3534341e 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -53,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-   color: #4D657C;
+  color: #B7C2CD;
 }
 
 :-moz-placeholder { /* Firefox 18- */
-   color: #4D657C;
+  color: #B7C2CD;
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
-   color: #4D657C;
+  color: #B7C2CD;
 }
 
 :-ms-input-placeholder {  
-   color: #4D657C;
+  color: #B7C2CD;
 }
 
 #qr-canvas { display: none; }
@@ -215,13 +215,6 @@ ul.side-nav.wallets .avatar-wallet{
   z-index: 9999;
 }
 
-.home label,
-.createProfile label {
-  font-size: 0.875rem;
-  color: #fff;
-  font-weight: 100;
-}
-
 .setup .comment {
   font-size: 0.875rem;
   color: #7A8C9E !important;
@@ -231,42 +224,6 @@ a:hover {
   color: #2980b9;
 }
 
-.home input,
-.box-setup input,
-.open input, 
-.join input, 
-.setup input,
-.settings input {
-  border-radius: 2px;
-  background: #EDEDED;
-  -moz-box-shadow:    0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
-  box-shadow:         0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
-  color: #2C3E42 !important;
-  padding: 1.2rem 0.7rem;
-  margin-bottom: 1.5rem;
-  border: 0;
-}
-
-.box-setup ::-webkit-input-placeholder {
-  color: #B7C2CD;
-}
-
-.box-setup :-ms-input-placeholder {
-  color: green !important;
-}
-
-.box-setup :-moz-placeholder {
-  color: red !important;
-}
-
-.home select,
-.createProfile select,
-.settings select {
-  background: #2C3E50 !important;
-  border: 0 !important;
-  color: #fff !important;
-}
-
 .page, .main {
   height:100%;
   overflow-y: auto;
@@ -317,48 +274,27 @@ a:hover {
   background-color: #F8F8FB;
 }
 
-.home, .createProfile, .settings {
-  margin-top: 8%;
-  color: #fff;
-}
-
-.settings label, 
-.settings label small {
-  color: #fff;
-}
-
 .logo-setup {
   text-align: center;
-  margin-bottom: 2rem;
-}
-
-.setup .logo-setup, .join .logo-setup {
-  margin-top: 16%;
+  padding: 2rem 0;
+  color: #fff;
 }
 
 .box-setup {
-  margin: 0 auto;
-  width: 310px;
   padding: 1.3rem; 
   border-radius: 2px;
   background: #FFFFFF;
-  -moz-box-shadow:    1px 1px 0px 0px #213140;
-  box-shadow:         1px 1px 0px 0px #213140;
+  -moz-box-shadow: 1px 1px 0px 0px #213140;
+  box-shadow: 1px 1px 0px 0px #213140;
 }
 
 .box-setup-footer {
   overflow: hidden;
-  margin-top: 2rem;
   padding: 1rem 0 0;
   border-top: 1px solid #E5E7EA;
   font-size: 12px;
 }
 
-.box-setup label small.has-error {
-  font-size: 11px;
-  color: #FFA59B;
-}
-
 .last-transactions {
   margin-bottom: 2rem;
   background-color: #E8EAEF;
@@ -816,15 +752,10 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
 }
 
 .tooltip { 
-  background: #1ABC9C; 
+  background-color: #1ABC9C; 
   color: #fff; 
-  font-weight: normal; 
-  font-size: 14px; 
-  padding: 3px 5px;
-  -webkit-border-radius: 3px; 
-  -moz-border-radius: 3px; 
-  border-radius: 3px; 
-  border: 1px solid #16A085;
+  font-size: 12px; 
+  border-color: #16A085;
 }
 
 .tooltip>.nub {
@@ -851,11 +782,27 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
   background-size: 130px 51px;
 }
 
+input {
+  border-radius: 2px;
+  background: #EDEDED;
+  -moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  color: #2C3E42;
+  padding: 1.2rem 0.7rem;
+  margin-bottom: 1.5rem;
+  border: 0;
+}
+
 button.radius, .button.radius {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
 
+label small.has-error {
+  font-size: 11px;
+  color: #FFA59B;
+}
+
 /* SECONDARY */
 
 input[type='submit']
@@ -1033,7 +980,6 @@ button.gray:focus,
 }
 
 .button, button {
-  color: #FFFFFF;
   text-transform: uppercase;
 }
 
@@ -1246,17 +1192,11 @@ a.text-warning:hover {color: #FD7262;}
 }
 
 .box-setup h1 {
-  font-weight: 100;
   font-size: 16px;
-  color: #2C3E50;
   text-transform: uppercase;
   text-align: center;
 }
 
-.box-setup form {
-  margin: 0;
-}
-
 .joyride-tip-guide {
   width: 150px;
   background: #213140;
@@ -1330,10 +1270,6 @@ a.text-warning:hover {color: #FD7262;}
   display: none;
 }
 
-fieldset legend {
-  background: transparent;
-}
-
 @media only screen and (min-width: 40.063em) {
   dialog.tiny, .reveal-modal.tiny {
     width: 50%;
diff --git a/css/src/mobile.css b/css/src/mobile.css
index 2e639bf2a..b36b42fbe 100644
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@@ -180,7 +180,7 @@
   }
 
   .box-setup {
-    width: 100%;
+    margin-bottom: 50px;
   }
 
   .footer-setup {
diff --git a/views/createProfile.html b/views/createProfile.html
index c3116642b..d457d66b3 100644
--- a/views/createProfile.html
+++ b/views/createProfile.html
@@ -1,10 +1,10 @@
 <div class="createProfile" ng-controller="CreateProfileController">
   <div data-alert class="loading-screen" ng-show="retreiving">
-    <i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
-    Retreiving information from storage...
+    <i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i> 
+    <span translate>Retreiving information from storage...</span>
   </div>
 
-  <div class="large-12 medium-6 medium-centered columns" ng-show="!loading && !retreiving">
+  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading && !retreiving">
     <div class="logo-setup">
       <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
       <div ng-include="'views/includes/version.html'"></div>
@@ -13,13 +13,13 @@
       <div class="left">
       <i class="size-36 fi-alert m10r"></i>
       </div>
-      <div class="size-12">
-        <b>Copay now needs a profile to access wallets. </b>
+      <div class="size-12" translate>
+        <b>Copay now needs a profile to access wallets.</b>
         You can import your current wallets after creating your frofile
       </div>
     </div>
     <div class="box-setup">
-      <h1 class="m20b" translate >Create Profile</h1>
+      <h1 translate>Create Profile</h1>
       <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
         <div class="row collapse">
           <div class="small-12 columns">
@@ -46,10 +46,10 @@
           <small class="icon-input"
             ng-show="profileForm.repeatpassword.$dirty &&
             profileForm.repeatpassword.$invalid"><i class="fi-x"></i></small>
-          <p class="m15b text-gray size-12"
+          <p class="text-warning size-12"
           ng-show="profileForm.repeatpassword.$dirty &&
           profileForm.repeatpassword.$invalid">
-          <i class="fi-x m5r"></i>
+          <i class="fi-x"></i> 
           {{'Passwords must match'|translate}}
           </p>
         </div>
@@ -62,12 +62,20 @@
       </form>
       <div class="box-setup-footer">
         <div class="left">
-          <a translate class="text-gray" href="#"><i class="m5r
-              size-14 fi-arrow-left"></i>Back to Copay.io</a>
+          <a ng-show="!anyProfile" class="text-gray" href="https://copay.io">
+            <i class="m5r fi-arrow-left"></i> 
+            <span translate>Back to</span> copay.io
+          </a>
+          <a ng-show="anyProfile" class="text-gray" href="#!/">
+            <i class="fi-arrow-left"></i> 
+            <span translate>Back</span>
+          </a>
         </div>
         <div class="right">
-          <a class="right size-12 text-gray" href="#!/settings"><i class="m5r
-              size-14 fi-wrench"></i><span translate>Settings</span></a>
+          <a class="right size-12 text-gray" href="#!/settings">
+            <i class="fi-wrench"></i> 
+            <span translate>Settings</span>
+          </a>
         </div>
       </div>
     </div>
diff --git a/views/home.html b/views/home.html
index eb8bb7812..2cb19606a 100644
--- a/views/home.html
+++ b/views/home.html
@@ -2,36 +2,38 @@
 
   <div data-alert class="loading-screen" ng-show="retreiving">
     <i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
-    Retreiving information from storage...
+    <span translate>Retreiving information from storage...</span>
   </div>
-  <div class="large-12 medium-6 medium-centered columns" ng-show="!loading && !retreiving">
+  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading && !retreiving">
     <div class="logo-setup">
       <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
       <div ng-include="'views/includes/version.html'"></div>
     </div>
     <div class="box-setup">
-      <h1 translate >Sign in to <b> Copay </b></h1>
+      <h1><span translate>Sign in to</span> <b>Copay</b></h1>
       <form name="loginForm" ng-submit="openProfile(loginForm)" novalidate>
         <input type="email" ng-model="email" class="form-control"
           name="email" placeholder="Email" required>
         <input type="password" ng-model="password" class="form-control"
           name="password" placeholder="Password" required>
           
-        <div class="text-right">
-          <button translate type="submit" class="button primary radius expand m0"
-            ng-disabled="loginForm.$invalid || loading">
-            Sign in 
-          </button>
-        </div>
+        <button translate type="submit" class="button primary radius expand m0"
+          ng-disabled="loginForm.$invalid || loading">
+          Sign in 
+        </button>
       </form>
       <div class="box-setup-footer">
         <div class="left">
-          <a translate class="button-setup text-gray" href="#!/createProfile"><i class="m5r
-              size-14 fi-torso"></i>Create a profile</a>
+          <a class="button-setup text-gray" href="#!/createProfile">
+            <i class="fi-torso"></i> 
+            <span translate>Create a profile</span>
+          </a>
         </div>
-        <div class="right m5t">
-          <a class="right size-12 text-gray" href="#!/settings"><i class="m5r
-              size-14 fi-wrench"></i><span translate>Settings</span></a>
+        <div class="right m10t">
+          <a class="text-gray" href="#!/settings">
+            <i class="fi-wrench"></i> 
+            <span translate>Settings</span>
+          </a>
         </div>
       </div>
     </div>
diff --git a/views/settings.html b/views/settings.html
index 3b076405a..5c3169805 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -1,39 +1,40 @@
 <div class="settings" ng-controller="SettingsController">
-  <div class="row">
-    <div class="large-4 columns logo-setup">
+  <div class="large-4 large-centered medium-6 medium-centered columns">
+    <div class="logo-setup">
       <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
       <div ng-include="'views/includes/version.html'"></div>
     </div>
-    <div class="large-8 columns line-dashed-setup-v">
-      <div class="box-setup">
-        <h1 class="text-white line-sidebar-b">{{title|translate}}</h1>
-        <form name="settingsForm">
-          <fieldset>
-            <legend translate>Language</legend>
-            <select class="form-control" ng-model="selectedLanguage" ng-options="o.name for o in availableLanguages" required>
-            </select>
-          </fieldset>
-          <fieldset>
-            <legend translate>Insight API server</legend>
-            <label for="insightLivenet">Livenet</label>
-            <small translate class="has-error" ng-show="settingsForm.insightLivenet.$invalid">not valid</small>
-            <input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
-            
-            <label for="insightTestnet">Testnet</label>
-            <small translate class="has-error" ng-show="settingsForm.insightTestnet.$invalid">not valid</small>
-            <input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
+    <div class="box-setup">
+      <h1>{{title|translate}}</h1>
+      <form name="settingsForm">
+        <fieldset>
+          <legend translate>Language</legend>
+          <select class="form-control" ng-model="selectedLanguage" ng-options="o.name for o in availableLanguages" required>
+          </select>
+        </fieldset>
+        <fieldset>
+          <legend translate>Insight API server</legend>
+          <label for="insightLivenet">Livenet</label>
+          <small translate class="has-error" ng-show="settingsForm.insightLivenet.$invalid">not valid</small>
+          <input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
 
-            <p translate class="small">
-              Insight API server is open-source software. You can run your own instances, check <a href="http://insight.is" target="_blank">Insight API Homepage</a>
-            </p>
-          </fieldset>
-          <div class="text-right m20t">
-            <a class="back-button text-white m20r" href="#!/">&laquo; <span translate>Back</span></a>
-            <button translate type="submit" class="button primary m0 ng-binding" ng-disabled="settingsForm.$invalid || loading" ng-click="save()">
-              Save
-            </button>
+          <label for="insightTestnet">Testnet</label>
+          <small translate class="has-error" ng-show="settingsForm.insightTestnet.$invalid">not valid</small>
+          <input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
+
+          <div translate class="small">
+          Insight API server is open-source software. You can run your own instances, check <a href="http://insight.is" target="_blank">Insight API Homepage</a>
           </div>
-        </form>
+        </fieldset>
+        <button translate type="submit" class="button primary radius expand m0" ng-disabled="settingsForm.$invalid || loading" ng-click="save()">
+          Save
+        </button>
+      </form>
+      <div class="box-setup-footer">
+        <a class="text-gray" href="#!/">
+          <i class="fi-arrow-left"></i> 
+          <span translate>Back</span>
+        </a>
       </div>
     </div>
   </div>