From d3b326d2730e7dcf8e280e25c2547cd253a9d8f1 Mon Sep 17 00:00:00 2001
From: Sriram <sriram2520@users.noreply.github.com>
Date: Tue, 27 Feb 2024 22:55:36 +0530
Subject: [PATCH] Make new account modal close as clickable button (#492)

Co-authored-by: Sriram Krishnan <sriram@seafoodsouq.com>
---
 app/javascript/controllers/modal_controller.js | 4 ++++
 app/views/accounts/new.html.erb                | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
index bf2ce753..8d0773d4 100644
--- a/app/javascript/controllers/modal_controller.js
+++ b/app/javascript/controllers/modal_controller.js
@@ -13,4 +13,8 @@ export default class extends Controller {
       this.element.close();
     }
   }
+
+  close() {
+    this.element.close();
+  }
 }
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index 201e090e..7c4e0b39 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -29,7 +29,7 @@
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <span>Close</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
+        <button data-action="modal#close">Close</button> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
       </div>
     </div>
   <% elsif params[:step] == 'method' && @account.accountable.present? %>
@@ -57,7 +57,7 @@
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <span>Close</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
+        <button data-action="modal#close">Close</button> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
       </div>
     </div>
   <% else %>