improve card grants

Author: manuthecoder

app/views/card_grants/_actions.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (card_grant:) %>
 
 <% if card_grant.active? %>
-  <div class="mt3 flex flex-wrap align-items-center justify-start g1 justify-center">
+  <div class="card card--breakdown flex flex-col gap-2">
     <% if organizer_signed_in?(as: :member) %>
       <%= render "stripe_cards/actions/freeze", stripe_card: card_grant.stripe_card if card_grant.stripe_card.present? %>
       <%= render "card_grants/actions/convert_to_reimbursement_report", card_grant:, label: card_grant.user == current_user ? "Get reimbursed" : "Create reimbursement report" %>

app/views/card_grants/_balance.html.erb

@@ -1,6 +1,8 @@
 <%# locals: (card_grant:) %>
 
-<div class="stat mt3 mx-auto <%= "muted" if card_grant.balance == 0 %>" style="width: fit-content">
-  <span class="stat__label">Balance remaining</span>
-  <span class="stat__value"><%= card_grant.balance.format(symbol: false) %></span>
+<div class="statset mb-2">
+  <div class="stat">
+    <span class="stat__label">Balance remaining</span>
+    <span class="stat__value"><%= card_grant.balance.format(symbol: false) %></span>
+  </div>
 </div>

app/views/card_grants/_header_banner.html.erb

@@ -21,7 +21,7 @@
       </p>
     </div>
 
-    <section class="details-horiz">
+    <section class="details-horiz px-4">
       <p>
         <strong>Sent by</strong>
         <%= user_mention card_grant.sent_by %>

app/views/card_grants/actions/_convert_to_reimbursement_report.html.erb

@@ -6,7 +6,7 @@
     <%= link_to convert_to_reimbursement_report_event_card_grant_path(id: card_grant.hashid, event_id: @event.slug),
                 method: :post,
                 data: { confirm: "Are you sure? This will cancel your card grant and convert it into a reimbursement report." },
-                class: "btn bg-purple",
+                class: "btn",
                 disabled: !policy(card_grant).convert_to_reimbursement_report? do %>
       <%= inline_icon "attachment", size: 20 %> <%= label %>
     <% end %>

app/views/card_grants/show.html.erb

@@ -26,7 +26,7 @@
   <% end %>
 <% end %>
 
-<div class="mt4 mb4 check--form flex justify-center <%= "flex-wrap" if @frame %>" style="gap: 3rem">
+<div class="sm:mt-5 check--form flex justify-center <%= "flex-wrap" if @frame %>" style="gap: 3rem">
   <%# Grantee has pending invite %>
   <% if @card_grant.user == current_user && @card_grant.pending_invite? %>
     <% if @card_grant.canceled? %>
@@ -36,16 +36,16 @@
     <% end %>
   <%# Grantee has accepted invite %>
   <% elsif @card_grant.user.admin? || organizer_signed_in? || @card_grant.user == current_user %>
-    <div class="justify-center grid grid-cols-1 <%= "md:grid-cols-2" if @card_grant.stripe_card.present? %>">
+    <div class="justify-center flex flex-col sm:flex-row w-full gap-2">
       <% if @card_grant.stripe_card %>
-        <div>
+        <div class="sm:max-w-[300px]">
           <%= render "stripe_cards/stripe_card", stripe_card: @card_grant.stripe_card, headless: true %>
           <%= render partial: "card_grants/balance", locals: { card_grant: @card_grant } %>
           <%= render partial: "card_grants/canceled_warning", locals: { card_grant: @card_grant } %>
           <%= render partial: "card_grants/actions", locals: { card_grant: @card_grant } %>
         </div>
       <% end %>
-      <div class="flex flex-col g2">
+      <div class="flex flex-col flex-1 gap-2 mt-1.5">
         <% if @card_grant.stripe_card %>
           <% admin_tool_if @card_grant.user != current_user do %>
             <%= render partial: "card_grants/card_details", locals: { card_grant: @card_grant } %>

app/views/stripe_cards/actions/_freeze.html.erb

@@ -5,7 +5,7 @@
   <div class="tooltipped tooltipped--n" aria-label="<%= policy(stripe_card).defrost? ? defrost_tooltip : "You don't have permission to perform this action" %>">
     <%= link_to defrost_stripe_card_path(stripe_card),
                 method: :post,
-                class: "btn bg-accent !text-white",
+                class: "btn",
                 disabled: !policy(stripe_card).defrost? do %>
       <%= inline_icon "freeze" %> Defrost card
     <% end %>
@@ -15,7 +15,7 @@
   <div class="tooltipped tooltipped--n" aria-label="<%= policy(stripe_card).freeze? ? freeze_tooltip : "You don't have permission to perform this action" %>">
     <%= link_to freeze_stripe_card_path(stripe_card),
                 method: :post,
-                class: "btn bg-info !text-white",
+                class: "btn",
                 disabled: !policy(stripe_card).freeze? do %>
       <%= inline_icon "freeze" %> Freeze
     <% end %>
@@ -24,7 +24,7 @@
   <div class="tooltipped tooltipped--n" aria-label="This card cannot be frozen because it has not been activated">
     <%= link_to "#",
                 method: :post,
-                class: "btn bg-info",
+                class: "btn",
                 disabled: true do %>
       <%= inline_icon "freeze" %> Freeze
     <% end %>