Style buttons.

neb417 · Nov 6, 2024 · 8753b81 · 8753b81
1 parent 464f76b
commit 8753b81
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -4,7 +4,7 @@
 
 @layer components {
   .btn-primary {
-    @apply rounded-lg px-4 bg-purple-800 inline-block font-medium text-white;
+    @apply rounded-lg px-4 bg-primary-purple inline-block font-medium text-white;
   }
 
   .btn-danger {
@@ -46,7 +46,7 @@
     background-color: white;
     display: inline-block;
     padding: 16px;
-    color: rgb(107 33 168);
+    color: #5521B5;
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
   }
@@ -62,6 +62,11 @@
     color: rgb(75 85 99);
     background-color: rgb(249 250 251);
   }
+
+  input[type="radio"].radio-button:checked {
+    background-color:#5521B5;
+    border:1px solid black;
+  }
 }
 
 
diff --git a/app/views/dashboard/_index.html.erb b/app/views/dashboard/_index.html.erb
@@ -37,7 +37,7 @@
             <div class="flex flex-row">
               <% FederalTaxTableType.all.each do |table| %>
                 <div class="mx-auto">
-                  <%= form.radio_button :federal_tax_table_type_id, table.id, checked: table.id == @federal_tax_table_type_id, onchange: "this.form.requestSubmit()" %>
+                  <%= form.radio_button :federal_tax_table_type_id, table.id, checked: table.id == @federal_tax_table_type_id, onchange: "this.form.requestSubmit()", class: "radio-button" %>
                   <%= form.label :federal_tax_table_type_id, table.filing_status.humanize.capitalize %>
                 </div>
               <% end %>

diff --git a/app/views/federal_tax_brackets/_federal_tax_bracket.html.erb b/app/views/federal_tax_brackets/_federal_tax_bracket.html.erb
@@ -4,6 +4,6 @@
     <% attributes.each do |attribute| %>
       <div class="py-1"><%= attribute %></div>
     <% end %>
-    <div class="py-1"><%= link_to 'Edit', edit_federal_tax_bracket_path(federal_tax_bracket), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %></div>
+    <div class="py-1"><%= link_to 'Edit', edit_federal_tax_bracket_path(federal_tax_bracket), class: "btn btn-primary" %></div>
   </div>
 <% end %>
diff --git a/app/views/federal_tax_brackets/_index.html.erb b/app/views/federal_tax_brackets/_index.html.erb
@@ -5,7 +5,7 @@
         <div class="mx-auto py-6 sm:px-6 lg:px-8">
           <div class="flex flex-row">
             <h1 class="font-bold text-4xl mr-4">Federal Tax Brackets</h1>
-            <%= link_to 'New federal tax bracket', new_federal_tax_bracket_path, class: "rounded-lg py-2 px-5 bg-blue-600 text-white block font-medium" %>
+            <%= link_to 'New federal tax bracket', new_federal_tax_bracket_path, class: "rounded-lg p-2 bg-primary-purple inline-block font-medium text-white" %>
           </div>
         </div>
       </div>

diff --git a/config/tailwind.config.js b/config/tailwind.config.js
@@ -12,6 +12,9 @@ module.exports = {
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },
+      colors:{
+        'primary-purple': '#5521B5',
+      }
     },
   },
   plugins: [