Improves styles for verification account

app/assets/stylesheets/participacion.scss

@@ -273,6 +273,10 @@ h6 {
   }
 }
 
+.moderator-actions {
+  margin: rem-calc(24) 0;
+}
+
 // 04. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -1494,16 +1498,6 @@ table {
     }
   }
 
-  .verify-account {
-    padding-right: rem-calc(12);
-
-    .verified {
-      color: $check;
-      font-weight: bold;
-      line-height: rem-calc(42);
-    }
-  }
-
   .date {
 
     select {
@@ -1517,24 +1511,38 @@ table {
   }
 
   .progress {
-    height: rem-calc(48);
+    height: rem-calc(72);
 
     @media (min-width: $small-breakpoint) {
-      height: rem-calc(24);
+      height: rem-calc(48);
-    }
-
-    .meter {
-      background: #63D1C4;
     }
   }
 
   .verification-step {
-    font-size: rem-calc(12);
+    font-weight: bold;
+    line-height: rem-calc(20);
     padding-top: rem-calc(6);
+    text-transform: uppercase;
+    vertical-align: top;
 
     @media (min-width: $small-breakpoint) {
-      line-height: $line-height;
+      line-height: rem-calc(48);
-      padding-top: 0;
+      padding: 0;
+    }
+
+    .number {
+      display: block;
+
+      @media (min-width: $small-breakpoint) {
+        background-color: white;
+        border-radius: rem-calc(30);
+        color: #43AC6A;
+        display: inline-block;
+        height: rem-calc(30);
+        line-height: rem-calc(30);
+        vertical-align: middle;
+        width: rem-calc(30);
+      }
     }
 
     &.active {
@@ -1543,6 +1551,10 @@ table {
 
     &.completed {
       color: rgba(255,255,255,.5);
+
+      .number {
+        opacity: .5;
+      }
     }
   }
 
@@ -1571,3 +1583,18 @@ table {
     }
   }
 }
+
+.verify-account {
+  padding-right: rem-calc(12);
+
+  .already-verified {
+    color: $check;
+    line-height: rem-calc(48);
+
+    .icon-check {
+      font-size: rem-calc(24);
+      line-height: rem-calc(45);
+      vertical-align: middle;
+    }
+  }
+}

app/views/account/show.html.erb

@@ -5,7 +5,7 @@
       <div>
         <span class="right verify-account">
           <% if current_user.level_three_verified? %>
-            <p class="verified">
+            <p class="already-verified">
               <i class="icon-check"></i>
               <%= t("account.show.verified_account") %>
             </p>

app/views/verification/letter/new.html.erb

@@ -3,16 +3,16 @@
 
     <div class="text-center">
       <div class="small-4 column verification-step completed">
-        <%= t("verification.step_1") %>
+        <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
       <div class="small-4 column verification-step completed">
-        <%= t("verification.step_2") %>
+        <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step active">
-        <%= t("verification.step_3") %>
+        <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
 
-      <div class="progress small-12 success round">
+      <div class="progress small-12 success radius">
         <span class="meter" style="width: 100%"></span>
       </div>
     </div>

app/views/verification/residence/new.html.erb

@@ -3,17 +3,17 @@
 
     <div class="text-center">
       <div class="small-4 column verification-step active">
-        <%= t("verification.step_1") %>
+        <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
       <div class="small-4 column verification-step">
-        <%= t("verification.step_2") %>
+        <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step">
-        <%= t("verification.step_3") %>
+        <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
     </div>
 
-    <div class="progress small-12 success round">
+    <div class="progress small-12 success radius">
       <span class="meter" style="width: 33%"></span>
     </div>
 

app/views/verification/sms/edit.html.erb

@@ -3,17 +3,17 @@
     <div class="text-center">
 
       <div class="small-4 column verification-step completed">
-        <%= t("verification.step_1") %>
+        <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
       <div class="small-4 column verification-step active">
-        <%= t("verification.step_2") %>
+        <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step">
-        <%= t("verification.step_3") %>
+        <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
     </div>
 
-    <div class="progress small-12 success round">
+    <div class="progress small-12 success radius">
       <span class="meter" style="width: 66%"></span>
     </div>
 

app/views/verification/sms/new.html.erb

@@ -3,17 +3,17 @@
     <div class="text-center">
 
       <div class="small-4 column verification-step completed">
-        <%= t("verification.step_1") %>
+        <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
       <div class="small-4 column verification-step active">
-        <%= t("verification.step_2") %>
+        <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step">
-        <%= t("verification.step_3") %>
+        <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
     </div>
 
-    <div class="progress small-12 success round">
+    <div class="progress small-12 success radius">
       <span class="meter" style="width: 66%"></span>
     </div>
 

config/locales/verification.en.yml

@@ -1,9 +1,9 @@
 en:
   verification:
     back: "Back to my account"
-    step_1: "1. Residence"
+    step_1: "Residence"
-    step_2: "2. Confirmation code"
+    step_2: "Confirmation code"
-    step_3: "3. Final verification"
+    step_3: "Final verification"
     alert:
       lock: "You have reached the maximum number of verification tries. Please try again later."
     residence:

config/locales/verification.es.yml

@@ -1,9 +1,9 @@
 es:
   verification:
     back: "Volver a mi cuenta"
-    step_1: "1. Residencia"
+    step_1: "Residencia"
-    step_2: "2. Código de confirmación"
+    step_2: "Código de confirmación"
-    step_3: "3. Verificación final"
+    step_3: "Verificación final"
     alert:
       lock: "Has llegado al máximo número de intentos. Por favor intentalo de nuevo más tarde."
     residence: