Update new budget investment form header

app/assets/stylesheets/budgets/investments/new.scss

@@ -0,0 +1,74 @@
+.budget-investment-new {
+  $border-width: 4px;
+
+  > * {
+    @include grid-row;
+    @include grid-column-gutter;
+  }
+
+  header {
+    @include has-fa-icon(building, regular, after);
+    align-items: center;
+    border: $border-width solid;
+    color: $brand-secondary;
+    border-bottom-right-radius: rem-calc(12);
+    border-top-right-radius: rem-calc(12);
+    display: flex;
+    margin-bottom: $line-height * 2;
+    margin-top: $line-height * 2;
+
+    @include breakpoint(large) {
+      padding-right: $line-height;
+    }
+
+    &::after {
+      display: none;
+
+      @include breakpoint(large) {
+        display: block;
+        font-size: rem-calc(100);
+        margin-left: $line-height;
+      }
+    }
+
+    h1 {
+      @include brand-background($brand-secondary);
+      @include background-till-left-of-screen;
+      @include has-fa-icon(chart-pie, solid, after);
+      align-items: center;
+      display: flex;
+      flex: 1;
+      font-size: rem-calc(36);
+      margin-bottom: 0;
+      padding: $line-height * 2 0;
+      position: relative;
+
+      @include breakpoint(large) {
+        clip-path: polygon(
+          -100vw -#{$border-width},
+          100% -#{$border-width},
+          calc(100% - #{rem-calc(20)}) 50%,
+          100% calc(100% + #{$border-width}),
+          -100vw calc(100% + #{$border-width})
+        );
+        font-size: rem-calc(44);
+      }
+
+      &::before {
+        top: -$border-width;
+        height: calc(100% + 2 * #{$border-width});
+      }
+
+      &::after {
+        display: none;
+
+        @include breakpoint(medium) {
+          display: block;
+          font-size: 2em;
+          margin-left: auto;
+          margin-right: rem-calc(60);
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/mixins/colors.scss

@@ -1,5 +1,5 @@
-@mixin brand-background($invert-selection: true) {
-  background-color: $brand;
+@mixin brand-background($color: $brand, $invert-selection: true) {
+  background-color: $color;
   color: $white;
 
   @if $invert-selection {

app/assets/stylesheets/mixins/layouts.scss

@@ -27,3 +27,15 @@
     max-width: none;
   }
 }
+
+@mixin background-till-left-of-screen {
+  &::before {
+    background: inherit;
+    content: "";
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 100%;
+    width: 100vw;
+  }
+}

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

@@ -1,7 +1,11 @@
-<div class="budget-investment-new row">
-  <div class="small-12 medium-9 column">
-    <h1><%= t("management.budget_investments.create") %></h1>
+<main class="budget-investment-new">
+  <div>
+    <%= back_link_to budgets_path %>
 
-    <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %>
+    <header>
+      <h1><%= t("budgets.investments.form.title") %></h1>
+    </header>
   </div>
-</div>
+
+  <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %>
+</main>

config/locales/en/budgets.yml

@@ -78,6 +78,7 @@ en:
       milestones: Milestones
     investments:
       form:
+        title: "Create a budget investment"
         tag_category_label: "Categories"
         tags_instructions: "Tag this proposal. You can choose from proposed categories or add your own"
         tags_label: Tags

config/locales/es/budgets.yml

@@ -78,6 +78,7 @@ es:
       milestones: Seguimiento de proyectos
     investments:
       form:
+        title: "Crear nuevo proyecto"
         tag_category_label: "Categorías"
         tags_instructions: "Etiqueta este proyecto. Puedes elegir entre las categorías propuestas o introducir las que desees"
         tags_label: Etiquetas