Update styles and layout for new budget investment form

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

@@ -1,5 +1,34 @@
 .budget-investment-form {
 
+  .required-fields {
+    @include full-width-background($adjust-padding: true);
+    background: $light;
+    margin-bottom: $line-height;
+    padding-top: $line-height;
+  }
+
+  > fieldset > legend {
+    float: left;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    margin-bottom: $line-height;
+    text-transform: uppercase;
+
+    + * {
+      clear: left;
+    }
+  }
+
+  select {
+    min-height: $line-height * 2;
+
+    @include breakpoint(medium) {
+      &:not(.js-add-language):not(.js-select-language) {
+        width: 50%;
+      }
+    }
+  }
+
   .globalize-languages,
   .translatable-fields {
     @include grid-row-nest;
@@ -13,6 +42,21 @@
 
   [type="submit"] {
     @include regular-button;
-    width: 100%;
+    font-size: map-get($button-sizes, large);
+    margin-top: $line-height;
+  }
+
+  .actions {
+    border: 6px solid $border;
+    border-radius: rem-calc(12);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $line-height * 2;
+    padding: $line-height * 2 $line-height;
+    text-align: center;
+
+    @include breakpoint(medium) {
+      width: 75%;
+    }
   }
 }

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

@@ -1,19 +1,27 @@
 .budget-investment-new {
   $border-width: 4px;
-
-  > * {
   @include grid-column-gutter;
+
+  > :first-child:not(.print-info) {
+    @include full-width-background($adjust-padding: true);
+    background: $light;
+    margin-top: -$line-height;
+    padding-top: $line-height;
+  }
+
+  h1 {
+    margin-bottom: 0;
   }
 
   header {
     @include has-fa-icon(building, regular, after);
     align-items: center;
+    background-color: $body-background;
     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) {
@@ -38,7 +46,6 @@
       display: flex;
       flex: 1;
       font-size: rem-calc(36);
-      margin-bottom: 0;
       padding: $line-height * 2 0;
 
       @include breakpoint(large) {

app/assets/stylesheets/layout.scss

@@ -1074,7 +1074,6 @@ form {
 
   .checkbox,
   .radio {
-    display: inline-block;
     font-weight: normal;
     line-height: $line-height;
     vertical-align: middle;

app/components/budgets/investments/form_component.html.erb

@@ -2,8 +2,11 @@
 
   <%= render "shared/errors", resource: investment %>
 
+  <fieldset class="required-fields">
+    <legend><%= t("shared.required") %></legend>
+
     <% unless budget.single_heading? %>
-    <div class="small-12 medium-8">
+      <div>
         <%= f.select :heading_id, budget_heading_select_options(budget), { include_blank: true } %>
       </div>
     <% end %>
@@ -26,9 +29,13 @@
               class: "html-area" %>
       </div>
     <% end %>
+  </fieldset>
 
   <%= f.invisible_captcha :subtitle %>
 
+  <fieldset>
+    <legend><%= t("shared.optional") %></legend>
+
     <% if feature?(:allow_images) %>
       <div class="images">
         <%= render "images/nested_image", imageable: investment, f: f %>
@@ -83,7 +90,9 @@
     </div>
 
     <%= render SDG::RelatedListSelectorComponent.new(f) %>
+  </fieldset>
 
+  <div class="actions">
     <% unless current_user.manager? || investment.persisted? %>
       <div>
         <%= f.check_box :terms_of_service,
@@ -95,7 +104,6 @@
       </div>
     <% end %>
 
-  <div class="actions small-12 medium-6 large-4">
     <%= f.submit %>
   </div>
 <% end %>

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

@@ -1,6 +1,6 @@
 <div class="budget-investment-new">
 
-  <div class="clear float-right">
+  <div class="print-info clear float-right">
     <%= render "/shared/print" %>
   </div>
 

config/locales/en/general.yml

@@ -774,6 +774,8 @@ en:
         zero: "0 languages in use"
         one: "1 language in use"
         other: "%{count} languages in use"
+    optional: "Optional"
+    required: "Required"
   social:
     facebook: "%{org} Facebook"
     twitter: "%{org} Twitter"

config/locales/es/general.yml

@@ -774,6 +774,8 @@ es:
         zero: "0 idiomas en uso"
         one: "1 idioma en uso"
         other: "%{count} idiomas en uso"
+    optional: "Opcional"
+    required: "Obligatorio"
   social:
     facebook: "Facebook de %{org}"
     twitter: "Twitter de %{org}"