From 2c5208ce6b9e8aaac7de6ac8a4b20436bf95ffec Mon Sep 17 00:00:00 2001
From: summerscope <summerscope@gmail.com>
Date: Fri, 17 Oct 2014 11:17:46 +1100
Subject: [PATCH] Change ent type page, simplify!

---
 .../templates/registration/type.html.haml     | 36 ++++++++++---------
 .../darkswarm/registration.css.sass           | 18 ++++++++--
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/templates/registration/type.html.haml b/app/assets/javascripts/templates/registration/type.html.haml
index aed5c9c3de..2c39f2a863 100644
--- a/app/assets/javascripts/templates/registration/type.html.haml
+++ b/app/assets/javascripts/templates/registration/type.html.haml
@@ -6,32 +6,34 @@
     .small-12.columns
       %header
         %h2
-          Last step to create your enterprise!
-        %h5
-          Is
+          Last step to add 
           %span{ ng: { class: "{brick: !enterprise.is_primary_producer, turquoise: enterprise.is_primary_producer}" } }
             {{ enterprise.name }}
-          a primary producer?
+          !
+        %h4
+          Are you a producer? 
 
   %form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } }
     .row#enterprise-types{ 'data-equalizer' => true, bo: { if: "enterprise.type != 'own'" } }
       .small-12.columns.field
         .row
-          .small-12.columns
-            %label Choose one:
+          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
+            %a.btnpanel#producer-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = true", class: "{selected: (enterprise.is_primary_producer)}" } }
+              %i.ofn-i_059-producer
+              %h4 Yes, I'm a producer
+              
+          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
+            %a.btnpanel#hub-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = false", class: "{selected: (!enterprise.is_primary_producer)}" } }
+              %i.ofn-i_063-hub
+              %h4 No, I'm not a producer
         .row
-          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
-            %a.panel#producer-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = true", class: "{selected: (enterprise.is_primary_producer)}" } }
-              .left
-                / %render-svg{ path: "/assets/map-icon-producer.svg" }
-              %h4 I'm A Producer
+          .small-12.columns
+            .panel.callout
+              .left 
+                %i.ofn-i_013-help 
+                &nbsp;
               %p Producers make yummy things to eat &amp;/or drink. You're a producer if you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
-          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
-            %a.panel#hub-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = false", class: "{selected: (!enterprise.is_primary_producer)}" } }
-              .left
-                / %render-svg{ path: "/assets/map-icon-hub.svg" }
-              %h4 I'm A Hub
-              %p Hubs connect the producer to the eater. Hubs can be co-ops, independent retailers, buying groups, wholesalers, CSA box schemes, farm-gate stalls, etc.
+              / %p Hubs connect the producer to the eater. Hubs can be co-ops, independent retailers, buying groups, wholesalers, CSA box schemes, farm-gate stalls, etc.
 
     .row.buttons
       .small-12.columns
diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass
index b0d0757720..f63eb30421 100644
--- a/app/assets/stylesheets/darkswarm/registration.css.sass
+++ b/app/assets/stylesheets/darkswarm/registration.css.sass
@@ -118,20 +118,32 @@
 
 #registration-type
   #enterprise-types
-    a.panel
+    a.btnpanel
       display: block
+      padding: 1rem
+      margin-bottom: 1rem
       background-color: #efefef
       color: black
-      @media all and (min-width: 768px)
-        min-height: 200px
+      text-align: center
+      border: 1px solid transparent
+      i
+        font-size: 3rem
+      h4
+        margin-top: 1rem
+
       &:hover
         background-color: #fff
+
       &#producer-panel:hover
+        border: 1px solid $clr-turquoise
         &, & *
           color: $clr-turquoise
+
       &#hub-panel:hover, &#both-panel:hover
+        border: 1px solid $clr-brick
         &, & *
           color: $clr-brick
+
       &.selected
         &, &  *
           color: #fff