feat(home): add hover state over plans

debtcollective · Nov 26, 2019 · 4245595 · 4245595
1 parent 22b7a58
commit 4245595
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/app/assets/stylesheets/static_pages.scss b/app/assets/stylesheets/static_pages.scss
@@ -102,6 +102,7 @@
       color: $secondary-color;
       border-radius: 0.4rem;
       padding: 1.5rem;
+      text-decoration: none;
 
       @media (min-width: 80rem) {
         min-width: 18rem;
@@ -114,6 +115,11 @@
         color: $primary-color;
       }
 
+      &:hover {
+        background-color:lighten($primary-color,50);
+        border-color: lighten($primary-color,40);
+      }
+
       h3 {
         width: 100%;
         font-weight: bold;

diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -32,27 +32,26 @@
     <p id="notice"><%= notice %></p>
     <div class="subscription--plans">
       <% @plans.each do |plan| %>
-        <div class="subscription--plan" id="subscription-<%= plan.name.parameterize.underscore %>">
-          <h3>
-            <%= plan.name %>
-            <span class="subscription--plan-price"><%= number_to_currency(plan.amount).gsub(/\.00$/, "") %><span>/mo</span></span>
-          </h3>
-          <h4><%= plan.headline %></h4>
-          <%= plan.description %>
-          <% if @current_user_subscription&.plan&.id == plan.id %>
-            <p>Subscribed</p>
-          <% else %>
-            <p><%= link_to 'Subscribe', @current_user ? new_subscription_charge_path(plan_id: plan) : login_path  %></p>
-          <% end %>
-        </div>
+        <%= link_to  @current_user ? new_subscription_charge_path(plan_id: plan) : login_path, class: "subscription--plan", id: "subscription-#{plan.name.parameterize.underscore}" do %>
+          <div>
+            <h3>
+              <%= plan.name %>
+              <span class="subscription--plan-price"><%= number_to_currency(plan.amount).gsub(/\.00$/, "") %><span>/mo</span></span>
+            </h3>
+            <h4><%= plan.headline %></h4>
+            <%= plan.description %>
+            <% if @current_user_subscription&.plan&.id == plan.id %>
+              <p><strong>Current subscription</strong></p>
+            <% end %>
+          </div>
+        <% end %>
       <% end %>
-      <div class="subscription--plan" id="one-time-donation">
+      <%= link_to new_charge_path, class: "subscription--plan", id: "one-time-donation" do %>
         <h3>Other</h3>
         <h4>Pay what you can. Every dollar counts.</h4>
         <p>“To each according to their ability, to each according to their need.” Contributing what you can, where you can is what we’re all about.</p>
         <p>Folks who donate $100 on a one-time basis will receive a free gift from our store. People who pay dues at the rate of $100 per month or more will receive a thank you call from us.</p>
-        <p><%= link_to 'Make a donation today', new_charge_path %></p>
-      </div>
+      <%end%>
     </div>
   </section>