Style cards on dashboard. (#55)

neb417 · Nov 6, 2024 · 107995d · 107995d
1 parent b64bec9
commit 107995d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/app/views/components/_income_switch.erb b/app/views/components/_income_switch.erb
@@ -1,7 +1,6 @@
 <%= form_with url: income_switch_url, local: true do |form| %>
   <label class="relative inline-flex items-center cursor-pointer">
     <%= form.check_box :enabled, class: "sr-only peer", onchange: "this.form.requestSubmit()" %>
-    <div class="w-11 h-6 bg-gray-800 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-800"></div>
-    <span class="ms-3 text-sm font-medium text-gray-900">Switch income type</span>
+    <div class="w-11 h-6 bg-gray-800 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-purple"></div>
   </label>
 <% end %>
diff --git a/app/views/dashboard/_index.html.erb b/app/views/dashboard/_index.html.erb
@@ -2,8 +2,12 @@
   <div class="min-h-full">
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
+        <div class="mb-2">
+          <strong>Budget Calculator</strong>
+        </div>
+
         <div class="grid grid-cols-3">
-          <h3>Final Budget</h3>
+          <div>Switch Income Type</div>
           <div>Savings Rate %</div>
           <div>Investing Rate %</div>
         </div>
@@ -62,8 +66,10 @@
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
         <%= turbo_frame_tag "income_header_frame" do %>
-          <h1>Income</h1>
-          <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes }, class: "btn btn-primary" %>
+          <strong>Incomes</strong>
+          <div class="mt-4">
+            <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes }, class: "btn btn-primary" %>
+          </div>
         <% end %>
 
         <div class="pt-4">
@@ -80,8 +86,10 @@
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
         <%= turbo_frame_tag "fixed_expense_header_frame" do %>
-          <h3>Fixed Expenses</h3>
-          <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
+          <strong>Fixed Expenses</strong>
+          <div class="mt-4">
+            <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
+          </div>
         <% end %>
 
         <%= render "fixed_expenses/index" %>