From 78aea5d608c25f4098f329c463c5980115fceb3b Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 16 Dec 2021 15:18:37 +0100
Subject: [PATCH] Use Tailwind classes to hide/show elements

---
 app/javascript/stylesheets/application.scss |  2 +-
 app/views/wallet/index.html.erb             | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 66d7945..dc76e0f 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -1,4 +1,4 @@
-// version 4
+// version 5
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index 1b9f7db..f87771e 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -29,11 +29,11 @@
   </p>
   <p class="mb-6">
     <button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button>
-    <button id="hide-setup-code" class="btn-sm btn-blue" style="display: none;">Hide setup code</button>
+    <button id="hide-setup-code" class="btn-sm btn-blue hidden">Hide setup code</button>
     <span class="mx-2">or</span>
     <button id="copy-setup-code" class="btn-sm btn-blue">Copy setup code</button>
   </p>
-  <p id="setup-code" style="display: none;">
+  <p id="setup-code" class="hidden">
     <%= raw @svg %>
   </p>
 </section>
@@ -47,18 +47,18 @@
 
     buttonShow.addEventListener('click', function(ev) {
       ev.preventDefault();
-      setupCode.style.display = 'block';
-      buttonShow.style.display = 'none';
-      buttonHide.style.display = 'inline-block';
+      setupCode.classList.remove('hidden');
+      buttonHide.classList.remove('hidden');
+      buttonShow.classList.add('hidden');
       window.scrollTo(0, document.body.scrollHeight);
     });
 
     buttonHide.addEventListener('click', function(ev) {
       ev.preventDefault();
       const el = document.querySelector('#setup-code');
-      setupCode.style.display = 'none';
-      buttonShow.style.display = 'inline-block';
-      buttonHide.style.display = 'none';
+      setupCode.classList.add('hidden');
+      buttonHide.classList.add('hidden');
+      buttonShow.classList.remove('hidden');
     });
 
     buttonCopy.addEventListener('click', function(ev) {