Adding some icons to registration pages

app/assets/javascripts/templates/registration/address.html.haml

@@ -24,18 +24,18 @@
           %label{ for: 'enterprise_state' } State:
           %input.chunky.small-12.columns{ id: 'enterprise_state', placeholder: "eg. Victoria", ng: { model: 'enterprise.state' } }
     .small-5.columns
-      %h6 Location display
+      %h6
+        Location display
+        %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your enterprise's address on the Open Food Network. By default, full location is shown everywhere including street name and number."} 
       .row
-        .small-2.columns
-          %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } }
-        .small-10.columns
-          %label{ for: 'enterpise_suburb_only' } Hide my street name and street number from the public (ie. only show the suburb)
-      .row          
-      .row
-        .small-2.columns
-          %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } }
-        .small-10.columns
-          %label{ for: 'enterprise_on_map' } Blur my location on the map (show an approximate, not exact pin)
+        .small-12.columns
+          %label.indent-checkbox
+            %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } }
+              Hide my street name and street number from the public (ie. only show the suburb)
+        .small-12.columns
+          %label.indent-checkbox
+            %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } }
+              Blur my location on the map (show an approximate, not exact pin)
   .row
     .small-12.columns
       %input.button.primary{ type: "button", value: "Back", ng: { click: "select('details')" }, style: 'float:left' }

app/assets/javascripts/templates/registration/contact.html.haml

@@ -21,16 +21,18 @@
           %label{ for: 'contact_phone' } Phone number:
           %input.chunky.small-12.columns{ id: 'contact_phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.contact.phone' } }
     .small-12.large-4.columns
-      %h6 Contact display
+      %h6
+        Contact display
+        %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your contact details on the Open Food Network."}
       .row
         .small-12.columns
-          %label{ for: 'contact_display_profile' } 
+          %label.indent-checkbox
             %input{ type: 'checkbox', id: 'contact_name_profile', ng: { model: 'enterprise.contact.name_in_profile' } }   Display name in profile
         .small-12.columns
-          %label{ for: 'contact_display_profile' } 
+          %label.indent-checkbox
             %input{ type: 'checkbox', id: 'contact_email_profile', ng: { model: 'enterprise.contact.email_in_profile' } }   Display email in profile
         .small-12.columns
-          %label{ for: 'contact_display_profile' } 
+          %label.indent-checkbox
             %input{ type: 'checkbox', id: 'contact_phone_profile', ng: { model: 'enterprise.contact.phone_in_profile' } }   Display phone in profile
   .row
     .small-12.columns

app/assets/javascripts/templates/registration/details.html.haml

@@ -15,23 +15,26 @@
         .medium-12.large-4.columns{ 'data-equalizer-watch' => true }
           %a.small-12.columns.panel#producer{ href: "#", ng: { click: "enterprise.type = 'producer'", class: "{selected: enterprise.type == 'producer'}" } }
             .small-2.columns
+              %i.ofn-i_036-producers
             .small-10.columns
               %h6 I'm A Producer
-              %span Producers are anyone making things to eat & drink - whether you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
+              %span{ style: 'font-size: 80%'} Producers are anyone making things to eat & drink - whether you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
 
         .medium-12.large-4.columns{ 'data-equalizer-watch' => true }
           %a.small-12.columns.panel#hub{ href: "#", ng: { click: "enterprise.type = 'hub'", class: "{selected: enterprise.type == 'hub'}" } }
             .small-2.columns
+              %i.ofn-i_040-hub
             .small-10.columns
               %h6 I'm A Hub
-              %span Hubs are anyone connecting the producer to the eater. Hubs may be a co-op, and independent retailer, a buying group, a CSA box scheme, a farm-gate stall, a wholesaler, etc...
+              %span{ style: 'font-size: 80%'} Hubs are anyone connecting the producer to the eater. Hubs may be a co-op, and independent retailer, a buying group, a CSA box scheme, a farm-gate stall, a wholesaler, etc...
 
         .medium-12.large-4.columns{ 'data-equalizer-watch' => true }
           %a.small-12.columns.panel#both{ href: "#", ng: { click: "enterprise.type = 'both'", class: "{selected: enterprise.type == 'both'}" } }
             .small-2.columns
+              %i.ofn-i_039-delivery
             .small-10.columns
               %h6 I'm Both
-              %span Hey there, Jack-of-all-trades! Not only do you produce yummy things to eat and/or drink, you also want to connect directly to those who love buying your products!
+              %span{ style: 'font-size: 80%'} Hey there, Jack-of-all-trades! Not only do you produce yummy things to eat and/or drink, you also want to connect directly to those who love buying your products!
   .row
     .small-12.columns
       %input.button.primary{ type: "button", value: "Continue", ng: { click: "select('address')" }, style: 'float:right' }

app/assets/javascripts/templates/registration/introduction.html.haml

@@ -15,11 +15,11 @@
           %li Your logo image
           %li A pretty image to serve as your profile header
           %li Some 'About Us' text
-    .small-6.columns{ 'data-equalizer-watch' => true, style: 'background-color: #ffffff; padding-bottom: 10px;'}
-      %h6 Your profile entitles you to:
-      A searchable listing in Hub / Producer view
-      %br
-      A pin on the OFN map to help users find you
+    .small-6.columns{ 'data-equalizer-watch' => true, style: 'background-color: #ffffff; padding: 10px;'}
+      %span{ style: 'font-weight: bold;' } Your profile entitles you to:
+      %ul{ style: 'margin-top: 10px;' }
+        %li A searchable listing in Hub / Producer view
+        %li A pin on the OFN map to help users find you
   .row
     .small-12.columns
       %input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" }, style: 'float: right' }

app/assets/stylesheets/darkswarm/registration.css.sass

@@ -9,11 +9,21 @@
   .content
     margin-bottom: 15px
 
+  i
+    font-size: 150%
+
   input.chunky
     padding: 8px
     font-size: 105%
     margin-bottom: 15px
 
+  label.indent-checkbox
+    display: block
+    padding-left: 20px
+    text-indent: -17px
+    input
+      margin: 0px
+
   label
     margin-bottom: 3px
 
@@ -35,7 +45,6 @@
 
 #registration-details
   #enterprise-types
-    margin-bottom: 20px
     a
       background-color: #efefef
       color: black