fix: modify styles, logos, validations styles and add eye to show pas…

…sword

assets/js/main.js

@@ -52,3 +52,20 @@ $("#btn-modal-small").click(function() {
 $(".modal .close").click(function() {
   $(".modal").fadeOut();
 });
+
+
+// script to show and hide password
+$(".show-hide").click(function() {
+  $(this).toggleClass("ms-icon icon-hide");
+  var input = $($(this).attr("toggle"));
+
+  if (input.attr("type") == "password") {
+    input.attr("type", "text");
+    $('span.content-eye').text('Ocultar');
+    $(this).removeClass("ms-icon icon-view").addClass("ms-icon icon-hide");
+  } else {
+    input.attr("type", "password");
+    $('span.content-eye').text('Mostrar');
+    $(this).removeClass("ms-icon icon-hide").addClass("ms-icon icon-view");
+  }
+});

assets/scss/core/_base.scss

@@ -112,12 +112,17 @@ textarea {
 
     &__checkbox {
       cursor: pointer;
+      margin-bottom: $dp-spaces--lv3;
 
       label {
         font-weight: normal;
         vertical-align: middle;
         margin-left: $dp-spaces--lv4;
       }
+
+      &:nth-last-child(1) {
+        margin-bottom: $dp-spaces--lv4;
+      }
     }/* Field checkbox */
 
     &--50 {
@@ -127,6 +132,26 @@ textarea {
         padding-right: $dp-spaces--lv3;
       }
     }/* Field to 50% percent */
+
+
+    .show-hide {
+      float: right;
+      font-size: $dp-font-size-small;
+      font-weight: normal;
+      font-style: italic;
+      color: $dp-color-grey;
+      line-height: $dp-font-small-lineheight;
+      vertical-align: bottom;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    .content-eye {
+      font-family: $dp-font-family-proximanova;
+      font-size: $dp-font-size-small;
+    }
   }
 }
 
@@ -147,12 +172,24 @@ input[type='checkbox'] {
       }
     }
   }
+
+  &:focus {
+    & ~ .checkmark {
+      color: $dp-color-default;
+      border: 1px solid $dp-color-yellow;
+      border-radius: $dp-border-radius;
+      -webkit-box-shadow: 0 0 0 2px $dp-color-brown-brightness;
+      box-shadow: 0 0 0 2px $dp-color-brown-brightness;
+      outline: none;
+    }
+  }
 }
 
 input:not([type='checkbox']) {
   padding: 10px 12px;
   height: 40px;
   width: 100%;
+  color: $dp-color-grey;
   border: 1px solid $dp-color-lightgrey;
   border-radius: $dp-border-radius;
   background-color: $dp-color-white;
@@ -200,7 +237,8 @@ input[type="tel"] {
 .error {
   input,
   select,
-  textarea {
+  textarea,
+  .checkmark {
     border: 1px solid $dp-color-red;
   }
 

assets/scss/modules/_atomic-class.scss

@@ -42,3 +42,21 @@
 .m-bottom--lv8 {
   margin-bottom: $dp-spaces--lv8;
 }
+
+.logo-doppler-new {
+  display: inline-block;
+  background-image: url('../img/doppler-logo-new.svg');
+  background-repeat: no-repeat;
+  height: 40px;
+  width: 145px;
+  text-indent: -99em;
+}
+
+.logo-doppler-old {
+  display: inline-block;
+  background-image: url('../img/doppler-logo-old.svg');
+  background-repeat: no-repeat;
+  height: 30px;
+  width: 85px;
+  text-indent: -99em;
+}

assets/scss/modules/_forms.scss

@@ -46,7 +46,7 @@
     content: '';
     position: absolute;
     left: 4px;
-    bottom: 9px;
+    bottom: 10px;
     width: 4px;
     height: 7px;
     border: solid $check-color;

assets/scss/templates/_signup.scss

@@ -19,7 +19,7 @@
     .content-signin {
       float: right;
       display: inline-block;
-      margin-top: $dp-spaces--lv1;
+      margin-top: $dp-spaces--lv3;
       font-family: $dp-font-family-proximanova;
       font-style: italic;
 
@@ -54,7 +54,7 @@
     }
 
     .content-legal {
-      margin-top: $dp-spaces--lv5;
+      margin-top: $dp-spaces--lv4;
 
       p {
         font-size: $dp-font-size-rpgd;

assets/templates/signup.html

@@ -33,7 +33,7 @@
   <main class="panel-wrapper">
     <article class="main-panel">
       <header>
-        <img src="img/doppler-logo.svg" class="logo-doppler" alt="Doppler">
+        <h1 class="logo-doppler-new">Doppler</h1>
         <small class="content-signin">¿Ya tienes una cuenta? <a href="#" class="link-green" target="_blank">INGRESA</a></small>
       </header><!-- header -->
       <h5>Regístrate</h5>
@@ -46,14 +46,14 @@ <h5>Regístrate</h5>
               <ul class="field-group">
                 <li class="field-item field-item--50 error">
                   <label for="name">Nombre:</label>
-                  <input type="name" name="name" id="name" placeholder="Nombre">
+                  <input type="text" name="name" id="name" placeholder="Nombre">
                   <div class="wrapper-errors bounceIn">
                     <p class="error-message">¡Ouch! Este campo está vacío</p>
                   </div>
                 </li>
                 <li class="field-item field-item--50 error">
                   <label for="lastname">Apellido:</label>
-                  <input type="lastname" name="name" id="lastname" placeholder="Apellido">
+                  <input type="text" name="lastname" id="lastname" placeholder="Apellido">
                   <div class="wrapper-errors bounceIn">
                     <p class="error-message">¡Ouch! Este campo está vacío</p>
                   </div>
@@ -80,12 +80,12 @@ <h5>Regístrate</h5>
               </div>
             </li>
             <li class="field-item">
-              <label for="password">Contraseña:</label>
-              <input type="password" name="password" id="password" placeholder="Escribe tu clave secreta">
+              <label for="password">Contraseña: <a toggle="#password-field" class="ms-icon icon-view show-hide"> <span class="content-eye">Mostrar</a></label>
+              <input type="password" name="password" id="password-field" placeholder="Escribe tu clave secreta">
               <div class="wrapper-password">
                 <p class="password-message"><span class="waiting-message">8 caracteres como mínimo</span><span class="waiting-message">Un dígito</span></p>
-                <p class="password-message"><span class="lack-message">8 caracteres como mínimo</span><span class="waiting-message">Un dígito</span></p>
-                <p class="password-message"><span class="complete-message">8 caracteres como mínimo</span><span class="lack-message">Un dígito</span></p>
+                <p class="password-message"><span class="lack-message">8 caracteres como mínimo</span><span class="lack-message">Un dígito</span></p>
+                <p class="password-message"><span class="complete-message">8 caracteres como mínimo</span><span class="complete-message">Un dígito</span></p>
                 <p class="password-message"><span class="secure-message">¡Tu contraseña es segura!</span></p>
               </div><!-- the final container of message validations -->
             </li>