WIP #217 SplitButton styling

app/components/split_button_component.html.erb

@@ -2,35 +2,31 @@
 <div class="inline review-<%= @review.item.id %>">
 <div class="relative inline-flex shadow-sm rounded-md">
   <% if @review.persisted? and @review.status.present? %>
-    <%= button_to ("✓ " + Review::STATUSES[@review.status.to_sym]), 
+    <%= button_to ("✔ " + Review::STATUSES[@review.status.to_sym]), 
       review_path(@review, review: {status: ""}),
       remote: true,
       method: :patch,
-      class: "cursor-pointer relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 text-sm leading-5 font-medium bg-gray-300 hover:bg-gray-200 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-indigo-700",
-      "x-on:mouseenter": "$event.target.value = $event.target.value.replace('✓','╳')",
-      "x-on:mouseleave": "$event.target.value = $event.target.value.replace('╳','✓')" 
-    %>
-  <% elsif @review.persisted? %>
-    <%= button_to Review::STATUSES[:want_to_learn],
-      review_path(@review, review: {status: "want_to_learn"}),
-      remote: true,
-      method: :patch,
-      class: "cursor-pointer relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 text-sm leading-5 font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-indigo-700"
+      class: "cursor-pointer relative inline-flex items-center px-4 py-2 rounded-l-md border border-purple-400 text-sm leading-5 font-medium bg-purple-100 hover:bg-purple-200 focus:outline-none",
+      "x-on:mouseenter": "$event.target.value = $event.target.value.replace('✔','╳')",
+      "x-on:mouseleave": "$event.target.value = $event.target.value.replace('╳','✔')" 
     %>
   <% else %>
-    <%= button_to Review::STATUSES[:want_to_learn],
-      reviews_path(review: {status: "want_to_learn", item_id: @item.id}),
+    <%= button_to ("＋ " + Review::STATUSES[:want_to_learn]),
+      (@review.persisted? ? 
+          review_path(@review, review: {status: "want_to_learn"}) : 
+          reviews_path(review: {status: "want_to_learn", item_id: @item.id})
+      ),
       remote: true,
-      method: :post,
-      class: "cursor-pointer relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 text-sm leading-5 font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-indigo-700"
+      method: (@review.persisted? ? :patch : :post),
+      class: "cursor-pointer relative inline-flex items-center px-4 py-2 rounded-l-md border border-purple-400 text-sm leading-5 font-medium text-purple-900 bg-purple-300 hover:bg-purple-200 focus:outline-none"
     %>
   <% end %>
 
 
   <span x-data="{ isopen: <%= @isopen %> }" class="-ml-px relative block">
-    <button @click="isopen = !isopen" type="button" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-indigo-700 transition ease-in-out duration-150" aria-label="Expand">
+    <button @click="isopen = !isopen" type="button" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-purple-400 text-sm leading-5 font-medium bg-purple-300 hover:bg-purple-200 focus:outline-none transition ease-in-out duration-150" aria-label="Expand">
       <!-- Heroicon name: chevron-down -->
-      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <svg class="h-5 w-5 text-purple-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
       </svg>
     </button>

app/models/review.rb

@@ -42,7 +42,7 @@ class Review < ApplicationRecord
   SCORE_TYPES = [:inspirational_score, :educational_score, :challenging_score, :entertaining_score, :visual_score, :interactive_score]
   QUALITY_TAGS = SCORE_TYPES.map(&:to_s).map { |q| q.gsub("_score", "")}
 
-  STATUSES = {want_to_learn: "Want to learn", learning: "Currently learning", learned: "Already learned"}
+  STATUSES = {want_to_learn: "Want to Learn", learning: "Currently Learning", learned: "Already Learned"}
 
   def update_item_ratings
   	SCORE_TYPES.each do |quality_score|