Feature: Implement Mobile Responsiveness (#2092)

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* format

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix conflict

* fix conflict

* chore: run rubocop

* fix test

* update PWA logo

* fix tests

* chore: lint

* fix test

* Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>

app/views/accounts/index.html.erb

@@ -4,17 +4,20 @@
     <div class="flex items-center gap-2">
       <%= button_to sync_all_accounts_path,
                       disabled: Current.family.syncing?,
-                      class: "btn btn--outline flex items-center gap-2",
+                      class: "md:btn md:btn--outline flex items-center justify-center gap-2 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg",
                       title: t(".sync") do %>
         <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
-        <span><%= t(".sync") %></span>
+        <span class="hidden md:inline"><%= t(".sync") %></span>
       <% end %>
 
       <%= link_to new_account_path(return_to: accounts_path),
                     data: { turbo_frame: "modal" },
-                    class: "btn btn--primary flex items-center gap-1" do %>
-        <%= lucide_icon("plus", class: "w-5 h-5") %>
-        <p class="text-sm font-medium"><%= t(".new_account") %></p>
+                    class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
+        <div class="flex items-center justify-center w-5 h-5">
+
+        <%= lucide_icon("plus")%>
+                    </div>
+        <p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
       <% end %>
     </div>
   </div>

app/views/accounts/new/_container.html.erb

@@ -1,8 +1,8 @@
 <%# locals: (title:, back_path: nil) %>
 
 <%= modal do %>
-  <div class="flex flex-col w-screen max-w-xl" data-controller="list-keyboard-navigation">
-    <div class="border-b border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
+  <div class="flex flex-col w-screen max-w-xl relative" data-controller="list-keyboard-navigation">
+    <div class="border-b border-tertiary md:border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
       <% if back_path %>
         <%= link_to back_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
           <%= lucide_icon("arrow-left", class: "text-secondary w-5 h-5") %>
@@ -10,6 +10,9 @@
       <% end %>
 
       <span class="text-subdued"><%= title %></span>
+        <button class="absolute top-1/2 -translate-y-1/2 right-4 flex w-8 h-8 items-center justify-center rounded-lg md:hidden outline-0" data-action="click->modal#close">
+        <%= lucide_icon("x", class: "text-secondary w-6 h-6") %>
+      </div>
     </div>
 
     <div class="p-2">
@@ -19,7 +22,7 @@
       <%= yield %>
     </div>
 
-    <div class="border-t border-alpha-black-25 p-4 text-secondary text-sm flex justify-between">
+    <div class="border-t border-alpha-black-25 p-4 text-secondary text-sm justify-between hidden md:flex">
       <div class="flex space-x-5">
         <div class="flex items-center space-x-2">
           <span>Select</span>

app/views/accounts/show/_activity.html.erb

@@ -17,9 +17,11 @@
             <% end %>
 
             <% unless @account.crypto? %>
-              <%= link_to @account.investment? ? new_trade_path(account_id: @account.id) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
+              <%= link_to @account.investment? ? new_trade_path(account_id: @account.id) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "btn btn--primary flex items-center justify-center gap-2 rounded-full md:rounded-lg w-9 h-9 md:w-auto md:h-auto" do %>
+              <span class="flex items-center justify-center">
                 <%= lucide_icon("credit-card", class: "text-secondary w-5 h-5") %>
-                <%= tag.span t(".new_transaction"), class: "text-sm" %>
+              </span>
+                <%= tag.span t(".new_transaction"), class: "text-sm md:block" %>
               <% end %>
             <% end %>
           </div>