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..4b636c31 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 @@ -134,7 +134,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) { )} - {currentWalletInfo && jars && isAccountOverlayShown && ( + {currentWalletInfo && jars && ( { return ( {joiningRoute && ( - - + + {t('navbar.joining_in_progress')} { )} {isDebugFeatureEnabled('fastThemeToggle') && ( - + )} @@ -226,13 +222,13 @@ function FastThemeToggle() { ) return ( - setTheme(isLightTheme ? window.JM.THEMES[1] : window.JM.THEMES[0])} - symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]} - width="30" - height="30" - /> + > + + ) } 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; } 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) => { e.stopPropagation() onChange && onChange(e) @@ -16,17 +16,18 @@ function SegmentedTabFormCheck({ id, name, value, label, disabled, defaultChecke return ( <> - +
+ + +
) } @@ -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)} /> ) 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" > 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..7da0271a 100644 --- a/src/components/jars/Jar.tsx +++ b/src/components/jars/Jar.tsx @@ -171,7 +171,13 @@ const SelectableJar = ({ >
-
+ isSelectable && onClick(index)} + className={styles.selectionCircle} + disabled={!isSelectable} + /> {variant === 'warning' && (
@@ -206,7 +212,12 @@ const OpenableJar = ({ tooltipText, onClick, ...jarProps }: OpenableJarProps) => }} overlay={(props) => {tooltipText}} > -
+
e.key === 'Enter' && onClick()} + >