From 13fadd380b7b131f6cd448840ac2d7a1c1a6de2b Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 00:49:06 +0100
Subject: [PATCH 1/6] fix(dev): make theme toggle button selectable

---
 src/components/Navbar.tsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 04e548f9..33603cb2 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -174,12 +174,8 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
   return (
     <rb.Nav className="justify-content-center align-items-stretch">
       {joiningRoute && (
-        <rb.Nav.Item className="d-flex align-items-center">
-          <NavLink
-            to={joiningRoute}
-            onClick={onClick}
-            className="nav-link d-flex align-items-center justify-content-center"
-          >
+        <rb.Nav.Item className="d-flex align-items-stretch">
+          <NavLink to={joiningRoute} onClick={onClick} className="nav-link d-flex align-items-center">
             <rb.Navbar.Text className="d-md-none">{t('navbar.joining_in_progress')}</rb.Navbar.Text>
             <JoiningIndicator
               isOn={true}
@@ -190,7 +186,7 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
         </rb.Nav.Item>
       )}
       {isDebugFeatureEnabled('fastThemeToggle') && (
-        <rb.Nav.Item className="d-none d-md-flex align-items-center justify-content-center">
+        <rb.Nav.Item className="d-none d-md-flex align-items-stretch">
           <FastThemeToggle />
         </rb.Nav.Item>
       )}
@@ -226,13 +222,13 @@ function FastThemeToggle() {
   )
 
   return (
-    <Sprite
-      className="cursor-pointer"
+    <rb.Button
+      variant="link"
+      className="unstyled"
       onClick={() => setTheme(isLightTheme ? window.JM.THEMES[1] : window.JM.THEMES[0])}
-      symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]}
-      width="30"
-      height="30"
-    />
+    >
+      <Sprite symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]} width="30" height="30" />
+    </rb.Button>
   )
 }
 

From 859938faedeb7ab52e3434d9f8b54e72ade497a8 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 11:18:15 +0100
Subject: [PATCH 2/6] fix(ui): selectable jars can acquire focus

---
 src/components/jars/Jar.module.css | 3 +++
 src/components/jars/Jar.tsx        | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
index 29872fb9..d95b7276 100644
--- a/src/components/jars/Jar.module.css
+++ b/src/components/jars/Jar.module.css
@@ -72,12 +72,15 @@
 }
 
 .selectableJarContainer .selectionCircle {
+  appearance: none;
   height: 1.5rem;
   width: 1.5rem;
 
   border-radius: 50%;
   display: inline-block;
   border: 1px solid var(--bs-body-color);
+
+  cursor: pointer;
 }
 
 .selectableJarContainer:not(.selectable) .selectionCircle {
diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
index 58864a3d..fe726326 100644
--- a/src/components/jars/Jar.tsx
+++ b/src/components/jars/Jar.tsx
@@ -171,7 +171,13 @@ const SelectableJar = ({
     >
       <Jar index={index} {...jarProps} />
       <div className="d-flex justify-content-center align-items-center gap-1 mt-2 position-relative">
-        <div className={styles.selectionCircle} />
+        <input
+          type="radio"
+          checked={isSelected}
+          onChange={() => isSelectable && onClick(index)}
+          className={styles.selectionCircle}
+          disabled={!isSelectable}
+        />
         {variant === 'warning' && (
           <div className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark p-0">
             <Sprite symbol="warn" width="20" height="20" />

From e8a3f58137ae1c1fb78491a1588a1b9b1332c783 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 11:46:13 +0100
Subject: [PATCH 3/6] ui(info): help cursor on info icons

---
 src/components/Jars.module.css                | 1 +
 src/components/MainWalletView.tsx             | 2 +-
 src/components/PaymentConfirmModal.module.css | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Jars.module.css b/src/components/Jars.module.css
index 05241f67..ee2c53c7 100644
--- a/src/components/Jars.module.css
+++ b/src/components/Jars.module.css
@@ -11,6 +11,7 @@
   color: var(--bs-gray-500);
   border: 1px solid var(--bs-gray-500);
   border-radius: 50%;
+  cursor: help;
 }
 
 .jarsContainer {
diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
index 5ba3f59f..f4596c38 100644
--- a/src/components/MainWalletView.tsx
+++ b/src/components/MainWalletView.tsx
@@ -114,7 +114,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
       .catch((err) => {
         if (abortCtrl.signal.aborted) return
         const message = err.message || t('current_wallet.error_loading_failed')
-        !abortCtrl.signal.aborted && setAlert({ variant: 'danger', message })
+        setAlert({ variant: 'danger', message })
       })
       .finally(() => {
         if (abortCtrl.signal.aborted) return
diff --git a/src/components/PaymentConfirmModal.module.css b/src/components/PaymentConfirmModal.module.css
index c2efcd9a..cda9700e 100644
--- a/src/components/PaymentConfirmModal.module.css
+++ b/src/components/PaymentConfirmModal.module.css
@@ -3,4 +3,5 @@
   color: var(--bs-gray-500);
   border: 1px solid var(--bs-gray-500);
   border-radius: 50%;
+  cursor: help;
 }

From 3ea0f62ffd3ec26065f5cb93e047bfbbf08468f7 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 14:14:51 +0100
Subject: [PATCH 4/6] fix(ui): selectable segmented tabs

---
 src/components/SegmentedTabs.module.css | 12 +++++++++--
 src/components/SegmentedTabs.tsx        | 27 +++++++++++++------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/SegmentedTabs.module.css b/src/components/SegmentedTabs.module.css
index 337ad5f3..9d0b2006 100644
--- a/src/components/SegmentedTabs.module.css
+++ b/src/components/SegmentedTabs.module.css
@@ -22,7 +22,12 @@
 }
 
 .segmented-tab input[type='radio'] {
-  display: none;
+  appearance: none;
+  margin: 0;
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
 }
 
 .segmented-tab label {
@@ -52,7 +57,6 @@
 .segmented-tab input[type='radio']:not(:disabled) ~ label {
   cursor: pointer;
 }
-
 .segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-100);
   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);
@@ -61,3 +65,7 @@
 :root[data-theme='dark'] .segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-600);
 }
+
+.segmented-tab input[type='radio']:focus ~ label {
+  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color) !important;
+}
diff --git a/src/components/SegmentedTabs.tsx b/src/components/SegmentedTabs.tsx
index 53fa407f..d0350cd5 100644
--- a/src/components/SegmentedTabs.tsx
+++ b/src/components/SegmentedTabs.tsx
@@ -8,7 +8,7 @@ interface SegmentedTab {
   disabled?: boolean
 }
 
-function SegmentedTabFormCheck({ id, name, value, label, disabled, defaultChecked, onChange }: rb.FormCheckProps) {
+function SegmentedTabFormCheck({ id, name, value, label, disabled, checked, onChange }: rb.FormCheckProps) {
   const _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation()
     onChange && onChange(e)
@@ -16,17 +16,18 @@ function SegmentedTabFormCheck({ id, name, value, label, disabled, defaultChecke
 
   return (
     <>
-      <rb.Form.Check
-        bsPrefix={styles['segmented-tab']}
-        type="radio"
-        id={id}
-        value={value}
-        name={name}
-        label={label}
-        disabled={disabled}
-        defaultChecked={defaultChecked}
-        onChange={_onChange}
-      />
+      <div className={styles['segmented-tab']}>
+        <input
+          id={id}
+          name={name}
+          type="radio"
+          value={value}
+          checked={checked}
+          onChange={_onChange}
+          disabled={disabled}
+        />
+        <label htmlFor={id}>{label}</label>
+      </div>
     </>
   )
 }
@@ -57,7 +58,7 @@ export default function SegmentedTabs({ name, tabs, onChange, initialValue, disa
               label={tab.label}
               disabled={disabled || tab.disabled}
               inline={true}
-              defaultChecked={initialValue === tab.value}
+              checked={initialValue === tab.value}
               onChange={(e) => _onChange(e, tab)}
             />
           )

From b7c0efd0f4a46c8aaf3d15bd98a10b1d77c6bf97 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 14:25:31 +0100
Subject: [PATCH 5/6] fix(ui): selectable openable jars

---
 src/components/jars/Jar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
index fe726326..7da0271a 100644
--- a/src/components/jars/Jar.tsx
+++ b/src/components/jars/Jar.tsx
@@ -212,7 +212,12 @@ const OpenableJar = ({ tooltipText, onClick, ...jarProps }: OpenableJarProps) =>
         }}
         overlay={(props) => <rb.Tooltip {...props}>{tooltipText}</rb.Tooltip>}
       >
-        <div className={styles.tooltipJarContainer} onClick={onClick}>
+        <div
+          tabIndex={0}
+          className={styles.tooltipJarContainer}
+          onClick={onClick}
+          onKeyDown={(e) => e.key === 'Enter' && onClick()}
+        >
           <Jar {...jarProps} isOpen={jarIsOpen} />
         </div>
       </rb.OverlayTrigger>

From c4164e09c5e2a4bed71bee9fa3b791fad1220ad2 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 14:32:26 +0100
Subject: [PATCH 6/6] fix(ui): close jar details modal on key escape

---
 src/components/MainWalletView.tsx                | 2 +-
 src/components/jar_details/JarDetailsOverlay.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
index f4596c38..4b636c31 100644
--- a/src/components/MainWalletView.tsx
+++ b/src/components/MainWalletView.tsx
@@ -134,7 +134,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
         </rb.Row>
       )}
 
-      {currentWalletInfo && jars && isAccountOverlayShown && (
+      {currentWalletInfo && jars && (
         <JarDetailsOverlay
           jars={jars}
           initialJarIndex={selectedJarIndex}
diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
index 5f122e21..b491dc09 100644
--- a/src/components/jar_details/JarDetailsOverlay.tsx
+++ b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -310,7 +310,6 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
       className={`offcanvas-fullscreen ${styles.overlayContainer}`}
       show={props.isShown}
       onHide={props.onHide}
-      keyboard={false}
       placement="bottom"
     >
       <rb.Offcanvas.Header>