Feat/282 283 284 285 UI ux improvements

frontend/src/components/ConfirmMintDialog.jsx

@@ -10,8 +10,8 @@ const box = {
 };
 const row = { display: 'flex', justifyContent: 'space-between', margin: '0.4rem 0', fontSize: '0.9rem' };
 const btnRow = { display: 'flex', gap: '0.75rem', marginTop: '1.5rem' };
-const btnConfirm = { flex: 1, padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'pointer' };
-const btnCancel = { flex: 1, padding: '0.7rem', background: 'transparent', color: '#94a3b8', border: '1px solid #334155', borderRadius: 8, fontSize: '1rem', cursor: 'pointer' };
+const btnConfirm = { flex: 1, padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'pointer', minHeight: '44px' };
+const btnCancel = { flex: 1, padding: '0.7rem', background: 'transparent', color: '#94a3b8', border: '1px solid #334155', borderRadius: 8, fontSize: '1rem', cursor: 'pointer', minHeight: '44px' };
 
 function getFocusableElements(root) {
   if (!root) return [];

frontend/src/components/ConfirmationModal.jsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Confirmation modal for destructive actions.
+ * Keyboard accessible with focus trap and Escape to close.
+ */
+export default function ConfirmationModal({ isOpen, title, message, onConfirm, onCancel, loading = false, isDangerous = true }) {
+  const modalRef = useRef(null);
+  const confirmBtnRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') onCancel();
+      if (e.key === 'Tab') {
+        const focusableElements = modalRef.current?.querySelectorAll('button');
+        if (!focusableElements?.length) return;
+
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    confirmBtnRef.current?.focus();
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(0,0,0,0.5)',
+          zIndex: 9998,
+        }}
+        onClick={onCancel}
+        aria-hidden="true"
+      />
+      <div
+        ref={modalRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-message"
+        style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          background: '#0f172a',
+          border: `2px solid ${isDangerous ? '#ef4444' : '#334155'}`,
+          borderRadius: 12,
+          padding: '1.5rem',
+          maxWidth: 400,
+          width: '90%',
+          zIndex: 9999,
+          boxShadow: '0 20px 25px rgba(0,0,0,0.3)',
+        }}
+      >
+        <h2 id="modal-title" style={{ color: isDangerous ? '#fca5a5' : '#e2e8f0', marginTop: 0, marginBottom: '0.75rem', fontSize: '1.1rem' }}>
+          {title}
+        </h2>
+        <p id="modal-message" style={{ color: '#cbd5e1', marginBottom: '1.5rem', fontSize: '0.95rem', lineHeight: 1.5 }}>
+          {message}
+        </p>
+        <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end' }}>
+          <button
+            onClick={onCancel}
+            disabled={loading}
+            style={{
+              padding: '0.6rem 1.2rem',
+              background: '#334155',
+              color: '#e2e8f0',
+              border: 'none',
+              borderRadius: 6,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.95rem',
+              minHeight: '44px',
+              minWidth: '44px',
+              opacity: loading ? 0.6 : 1,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmBtnRef}
+            onClick={onConfirm}
+            disabled={loading}
+            style={{
+              padding: '0.6rem 1.2rem',
+              background: isDangerous ? '#ef4444' : '#0ea5e9',
+              color: '#fff',
+              border: 'none',
+              borderRadius: 6,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.95rem',
+              minHeight: '44px',
+              minWidth: '44px',
+              opacity: loading ? 0.6 : 1,
+            }}
+          >
+            {loading ? 'Processing…' : 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/CopyButton.jsx

@@ -1,8 +1,10 @@
 import { useState, useCallback } from 'react';
+import Tooltip from './Tooltip';
 
 /**
- * A small copy-to-clipboard button with a brief 'Copied!' tooltip.
+ * A small copy-to-clipboard button with a tooltip.
  * Accessible via keyboard (focusable, responds to Enter/Space).
+ * Touch target: 44×44px minimum for mobile accessibility.
  */
 export default function CopyButton({ text, label }) {
   const [copied, setCopied] = useState(false);
@@ -36,53 +38,34 @@ export default function CopyButton({ text, label }) {
   }, [handleCopy]);
 
   return (
-    <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', marginLeft: '0.4rem' }}>
+    <Tooltip text={copied ? 'Copied!' : (label ? `Copy ${label}` : 'Copy to clipboard')} position="top">
       <button
         type="button"
         onClick={handleCopy}
         onKeyDown={handleKeyDown}
         aria-label={copied ? 'Copied!' : (label ? `Copy ${label}` : 'Copy to clipboard')}
-        title={copied ? 'Copied!' : 'Copy to clipboard'}
         style={{
           background: 'none',
           border: 'none',
           cursor: 'pointer',
-          padding: '0.15rem 0.25rem',
+          padding: '0.5rem',
           borderRadius: 4,
           color: copied ? '#4ade80' : '#64748b',
           fontSize: '0.85rem',
           lineHeight: 1,
           transition: 'color 0.15s',
           verticalAlign: 'middle',
+          minHeight: '44px',
+          minWidth: '44px',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
         onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = '#38bdf8'; }}
         onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = '#64748b'; }}
       >
         {copied ? '✓' : '⎘'}
       </button>
-      {copied && (
-        <span
-          role="status"
-          aria-live="polite"
-          style={{
-            position: 'absolute',
-            bottom: '120%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: '#1e293b',
-            border: '1px solid #334155',
-            color: '#4ade80',
-            fontSize: '0.72rem',
-            padding: '0.2rem 0.5rem',
-            borderRadius: 4,
-            whiteSpace: 'nowrap',
-            pointerEvents: 'none',
-            zIndex: 10,
-          }}
-        >
-          Copied!
-        </span>
-      )}
-    </span>
+    </Tooltip>
   );
 }

frontend/src/components/DarkModeToggle.jsx

@@ -1,19 +1,26 @@
+import Tooltip from './Tooltip';
+
 export default function DarkModeToggle({ dark, onToggle }) {
   return (
-    <button
-      onClick={onToggle}
-      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
-      style={{
-        marginLeft: 'auto',
-        padding: '0.4rem 0.75rem',
-        background: 'transparent',
-        border: '1px solid var(--border)',
-        borderRadius: 8,
-        color: 'var(--text-muted)',
-        fontSize: '1rem',
-      }}
-    >
-      {dark ? '☀️' : '🌙'}
-    </button>
+    <Tooltip text={dark ? 'Switch to light mode' : 'Switch to dark mode'} position="bottom">
+      <button
+        onClick={onToggle}
+        aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+        style={{
+          marginLeft: 'auto',
+          padding: '0.6rem 0.75rem',
+          background: 'transparent',
+          border: '1px solid var(--border)',
+          borderRadius: 8,
+          color: 'var(--text-muted)',
+          fontSize: '1rem',
+          minHeight: '44px',
+          minWidth: '44px',
+          cursor: 'pointer',
+        }}
+      >
+        {dark ? '☀️' : '🌙'}
+      </button>
+    </Tooltip>
   );
 }

frontend/src/components/NFTCard.jsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import CopyButton from './CopyButton';
+import Tooltip from './Tooltip';
 import NFTCardSkeleton from './NFTCardSkeleton';
 
 async function exportCertificate(record) {
@@ -94,20 +95,26 @@ export default function NFTCard({ record, onClick, loading = false }) {
         Date: {record.date_administered}
       </p>
       <p style={{ color: '#94a3b8', fontSize: '0.8rem', marginTop: '0.25rem' }}>
-        Issuer: {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+        Issuer: <Tooltip text={record.issuer} position="top">
+          <span style={{ cursor: 'help', borderBottom: '1px dotted #94a3b8' }}>
+            {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+          </span>
+        </Tooltip>
       </p>
       <button
         aria-label={`Export certificate for ${record.vaccine_name}`}
         onClick={(e) => { e.stopPropagation(); exportCertificate(record); }}
         style={{
           marginTop: '0.75rem',
-          padding: '0.35rem 0.85rem',
+          padding: '0.5rem 0.85rem',
           fontSize: '0.8rem',
           background: 'transparent',
           border: '1px solid #38bdf8',
           borderRadius: 6,
           color: '#38bdf8',
           cursor: 'pointer',
+          minHeight: '32px',
+          minWidth: '32px',
         }}
       >
         📄 {t('exportCertificate', 'Export Certificate')}