Add new header and style (#801)

* Add new header and style

* Fix failing tests [#152956961]

* Change font size

* Minor css styling changes

* Change header styling

Color, wording, and make more mobile friendly

* Update test header text

* Amend header text and style [Fixes #152956961]

app/assets/stylesheets/volunteer_op.css.scss

@@ -1,3 +1,8 @@
+.volunteer-header {
+  font-size: 2.7em;
+  width: 100%;
+}
+
 .volunteer-ops-search {
   .flex-row {
     margin-bottom: 5px;
@@ -9,6 +14,7 @@
   }
 
   .field-label {
+    font-weight: bolder;
     margin-bottom: auto;
     margin-top: auto;
   }
@@ -23,6 +29,7 @@
   .search-text {
     margin-bottom: 0;
     width: 100%;
+    height: 40px;
   }
 
   .search-btn {

app/views/volunteer_ops/_search_form.html.erb

@@ -1,11 +1,8 @@
 <%= form_tag(search_volunteer_ops_path, :method => "get", class: "volunteer-ops-search") do %>
   <div class="flex-row">
-    <div class="left-side">
-        <%= label_tag(:q, "Search Text", class: 'field-label') %>
-    </div>
     <div class="right-side">
-        <%= text_field_tag(:q, @query, class: 'search-text') %>
-        <%= submit_tag("Search", class: 'btn btn-info search-btn') %>
+        <%= text_field_tag(:q, @query, class: 'search-text', placeholder: 'Help the disabled, elderly, homeless, youth...') %>
+        <%= submit_tag("Search", class: 'btn btn-success search-btn') %>
     </div>
   </div>
 <% end %>

app/views/volunteer_ops/index.html.erb

@@ -1,15 +1,14 @@
-<div>
-  <h1>Harrow Volunteering Opportunities</h1>
-</div> 
+<div class="container-fluid">
+  <h1 class="volunteer-header text-center">Want to volunteer in Harrow?</h1>
+</div>
 <%= render 'search_form' %>
-<br>
 <div id='orgs_scroll' style="height:410px;width:100%;border:1px solid #ccc;overflow:scroll;">
   <div class='table table-bordered'>
     <table>
       <% @volunteer_ops.each do |op| %>
           <tr>
             <td class='center-map-on-op'
-                data-lat="<%= op.latitude %>" 
+                data-lat="<%= op.latitude %>"
                 data-lng="<%= op.longitude %>"  >
               <strong>
                 <%= link_to_vol_op(op, :title) %>

features/admin/seo.feature

@@ -22,9 +22,9 @@ Feature: Would like the site to appear high in Google's listing
   Scenario: Meta Title, Meta Description, Meta Keywords and Description for home page
     Given I visit the volunteer opportunities page
     Then I should have a page with a title tag set to: "Harrow volunteering"
-    And I should see "Harrow Volunteering Opportunities"
+    And I should see "Want to volunteer in Harrow?"
     And it should have a Meta Description
-    
+
   Scenario: Meta Title and Description for organisation show page
     Given I visit the show page for the organisation named "Friendly"
     Then I should have a page with a title tag set to: "Friendly | Harrow volunteering"

features/sign_in_sign_up/sign_in.feature

@@ -58,7 +58,7 @@ Scenario: Sign in for an existing superadmin user after org search
 
 Scenario: Sign in for an existing superadmin user after vol op search
   Given I visit the volunteer opportunities page
-  And I fill in "Search Text" with "search words" within the main body
+  And I fill in "q" with "search words" within the main body
   And I press "Search"
   And I sign in as "superadmin@example.com" with password "pppppppp"
   Then I should be on the volunteer opportunities search page

features/volunteer_opportunities/search_volunteer_opportunities.feature

@@ -16,19 +16,19 @@ Feature: As a potential volunteer
     And I visit the volunteer opportunities page
 
   Scenario: Search a list of current volunteer opportunities by existing keywords
-    Given I fill in "Search Text" with "help" within the main body
+    Given I fill in "q" with "help" within the main body
     And I press "Search"
     Then I should see "Office Support"
     And I should not see "Litter Box Scooper" within "orgs_scroll"
     Then I should see 1 markers in the map
     And the map should show the opportunity titled Office Support
 
   Scenario: Search a list of current volunteer opportunities with a keyword that won't match
-    Given I fill in "Search Text" with "non existent text" within the main body
+    Given I fill in "q" with "non existent text" within the main body
     And I press "Search"
-    Then I should see "Sorry, it seems we don't have quite what you are looking for." 
+    Then I should see "Sorry, it seems we don't have quite what you are looking for."
 
   Scenario: Query string is visible after search
-    Given I fill in "Search Text" with "search words" within the main body
+    Given I fill in "q" with "search words" within the main body
     And I press "Search"
     Then the search box should contain "search words"