Add recomendations to edit image page with english and spanish translations.

app/assets/stylesheets/_consul_settings.scss

@@ -42,6 +42,9 @@ $proposals-dark:    #794500;
 $budget:            #7e328a;
 $budget-hover:      #7571bf;
 
+$budget-investment-image:            #ffa42d;
+$budget-investment-image-hover:      #794500;
+
 $highlight:         #e7f2fc;
 $highlight-soft:    #f3f8fd;
 $light:             #f5f7fa;

app/assets/stylesheets/icons.scss

@@ -196,6 +196,9 @@
 .icon-budget::before {
   content: '\53';
 }
+.icon-budget-investment-image::before {
+  content: '\68';
+}
 
 .icon-notification::before {
   content: '\6e';

app/assets/stylesheets/participation.scss

@@ -251,12 +251,14 @@
 .spending-proposal-form,
 .document-form,
 .topic-new,
-.topic-form {
+.topic-form,
+.budget-investment-image-form {
 
   .icon-debates,
   .icon-proposals,
   .icon-budget,
-  .icon-documents {
+  .icon-documents,
+  .icon-budget-investment-image {
     font-size: rem-calc(50);
     line-height: $line-height;
     opacity: 0.5;
@@ -274,6 +276,10 @@
   .icon-budget {
     color: $budget;
   }
+
+  .icon-budget-investment-image {
+    color: $budget-investment-image;
+  }
 }
 
 .recommendations {
@@ -309,6 +315,13 @@
   }
 }
 
+.budget-investment-image-form {
+
+  .recommendations li::before {
+    color: $budget-investment-image;
+  }
+}
+
 // 03. Show participation
 // ----------------------
 

app/views/budgets/investments/edit_image.html.erb

@@ -1,10 +1,19 @@
-<div class="budget-investment-image-edit row">
+<div class="budget-investment-image-form row">
 
-  <div class="small-12 column">
+  <div class="small-12 medium-9 column">
     <%= render "shared/back_link" %>
 
     <h1><%= t("budgets.investments.edit_image.title") %></h1>
 
     <%= render "image_form" %>
   </div>
+
+  <div class="small-12 medium-3 column">
+    <span class="icon-budget-investment-image float-right"></span>
+    <h2><%= t("budgets.investments.edit_image.recommendation_title") %></h2>
+    <ul class="recommendations">
+      <li><%= t("budgets.investments.edit_image.recommendation_one") %></li>
+      <li><%= t("budgets.investments.edit_image.recommendation_two") %></li>
+    </ul>
+  </div>
 </div>

config/locales/en/budgets.yml

@@ -110,11 +110,14 @@ en:
         milestone_publish_date: "Published %{publish_date}"
         edit_image: Edit image
       edit_image:
-        title: Change your investment project image
+        title: Change your project image
         note: 'You are changing investment project image of: %{title}'
         form:
           image_title: Image title
           submit_button: Save image
+        recommendation_title: Image recomendations
+        recommendation_one: Projects that have images attract more attention than those that do not. If you have a picture suitable for your project upload.
+        recommendation_two: Give a descriptive title to the image.
       wrong_price_format: Only integer numbers
       investment:
         add: Vote

config/locales/es/budgets.yml

@@ -110,11 +110,14 @@ es:
         milestone_publish_date: "Publicado el %{publish_date}"
         edit_image: Editar imagen
       edit_image:
-        title: Cambia la imagen de tu proyecto de inversión
+        title: Cambia la imagen de tu proyecto
         note: 'Estas cambiando la imagen del proyecto de inversión: %{title}'
         form:
           image_title: 'Título de la imagen'
           submit_button: Guardar imagen
+        recommendation_title: Recomendaciones para cambiar la imagen
+        recommendation_one: Los proyectos que tienen imágenes llaman más la atención que las que no la tienen. Si tienes una imagen adecuada para tu proyecto súbela.
+        recommendation_two: Dale un título descriptivo a la imagen.
       wrong_price_format: Solo puede incluir caracteres numéricos
       investment:
         add: Votar