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/import/uploads/show.html.erb

@@ -4,18 +4,22 @@
 
 <%= content_for :previous_path, imports_path %>
 
-<div class="space-y-12">
+<div class="space-y-4">
   <div class="space-y-4 mx-auto max-w-md">
     <div class="text-center space-y-2">
       <h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <div data-controller="tabs" data-tabs-active-class="bg-container" data-tabs-default-tab-value="csv-paste-tab">
-      <div class="flex justify-center mb-4">
-        <div class="tab-item-active rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
-          <button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
-          <button type="button" data-id="csv-upload-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
+    <div 
+      data-controller="tabs" 
+      data-tabs-active-class="bg-surface shadow-sm text-primary" 
+      data-tabs-inactive-class="text-secondary"
+      data-tabs-default-tab-value="csv-upload-tab">
+      <div class="flex justify-center mb-4 w-full">
+        <div class="bg-surface-inset rounded-lg p-1 flex w-full">
+          <button type="button" data-id="csv-upload-tab" class="w-1/2 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
+          <button type="button" data-id="csv-paste-tab" class="w-1/2 px-2 py-1 rounded-md text-sm text-secondary font-medium" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
         </div>
       </div>
 
@@ -35,11 +39,23 @@
                        placeholder: "Paste your CSV file contents here",
                        "data-auto-submit-form-target": "auto" %>
             <% else %>
-              <label for="import_csv_file" class="flex flex-col items-center justify-center w-full h-56 border-2 border-secondary border-dashed rounded-lg cursor-pointer bg-container-inset">
+              <div class="flex flex-col items-center justify-center w-full h-64 border border-secondary border-dashed rounded-xl cursor-pointer" data-controller="file-upload" data-action="click->file-upload#triggerFileInput" data-file-upload-target="uploadArea">
                 <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                  <%= form.file_field :csv_file, class: "ml-32", "data-auto-submit-form-target": "auto" %>
+                  <div data-file-upload-target="uploadText" class="flex flex-col items-center">
+                    <%= lucide_icon("plus", class: "w-6 h-6 mb-4 text-secondary mx-auto") %>
+                    <p class="mb-2 text-md text-gray text-center">
+                      <span class="font-medium text-primary">Browse</span> to add your CSV file here
+                    </p>
+                  </div>
+                  
+                  <div class="flex flex-col items-center hidden" data-file-upload-target="fileName">
+                    <%= lucide_icon("file-text", class: "w-6 h-6 mb-4 text-primary") %>
+                    <p class="mb-2 text-md font-medium text-primary"></p>
+                  </div>
+                  
+                  <%= form.file_field :csv_file, class: "hidden", "data-auto-submit-form-target": "auto", "data-file-upload-target": "input" %>
                 </div>
-              </label>
+              </div>
             <% end %>
 
             <%= form.submit "Upload CSV", disabled: @import.complete? %>
@@ -49,22 +65,12 @@
     </div>
   </div>
 
-  <div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
-    <div class="text-secondary p-2 mb-2">
-      <div class="flex gap-2 mb-2">
-        <%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
-        <p class="text-sm"><%= t(".instructions_1") %></p>
+<div class="flex justify-center">
+
+<span class="text-secondary text-sm">
+  <%= link_to "Download a sample CSV", "/imports/#{@import.id}/upload/sample_csv", class: "text-primary underline", data: { turbo: false } %> to see the required CSV format
+</span>
+</div>
+
 
-      </div>
-
-      <ul class="list-disc list-inside text-sm pl-8">
-        <li><%= t(".instructions_2") %></li>
-        <li><%= t(".instructions_3") %></li>
-        <li><%= t(".instructions_4") %></li>
-        <li><%= t(".instructions_5") %></li>
-      </ul>
-    </div>
-
-    <%= render partial: "imports/table", locals: { headers: @import.csv_template.headers, rows: @import.csv_template } %>
-  </div>
 </div>