From 227d56a2bdae358963b131ecc4fe786270211c93 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 10 Aug 2024 16:43:57 +0200
Subject: [PATCH] feat: enhance accessibility and UI feedback

Added a noscript alert message for users with JavaScript disabled, informing them about the limitations and manual controls available. Improved UI spacing with an additional margin in the conversion button section. Adjusted CSS padding for better visual alignment. Expanded Webpack safelist to include alert classes for proper styling.
---
 index.php          | 9 ++++++++-
 src/css/custom.css | 1 +
 webpack.config.js  | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index 0bdd8b3..6aeca1b 100644
--- a/index.php
+++ b/index.php
@@ -167,7 +167,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
                         <input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
                     </div>
 
-                    <div class="equals-box">
+                    <div class="equals-box mb-3">
                         <button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
                             <span class="equals-text">&darr;</span>
                         </button>
@@ -194,6 +194,13 @@ foreach (array_reverse($preferred_currencies) as $currency) {
                     </div>
                 </form>
 
+                <noscript>
+                    <div class="alert alert-warning" role="alert">
+                        <p>Looks like you have JavaScript disabled. You can still use this tool, but you won't be able to use the &#128203; buttons to automatically copy the results to your clipboard.</p>
+                        <p>Use the &darr; button to convert XMR to fiat, or the &uarr; button to convert fiat to XMR.</p>
+                    </div>
+                </noscript>
+
                 <hr class="gold" />
                 <small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
                     <?php echo $info;
diff --git a/src/css/custom.css b/src/css/custom.css
index 6add851..7d295a5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -51,6 +51,7 @@ input.form-control {
     color: #e9ecef;
     font-weight: 800;
     font-size: 42px;
+    padding-bottom: 1;
 }
 
 .btn-arrow {
diff --git a/webpack.config.js b/webpack.config.js
index 51ab45b..d1a8d91 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,7 +31,7 @@ module.exports = {
       paths: glob.sync([
         path.join(__dirname, 'index.php')
       ]),
-      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow']
+      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
     })
   ]
 };
\ No newline at end of file