chore: small ui changes suggested by @editwentyone

src/components/CopyButton.tsx

@@ -56,6 +56,7 @@ function Copyable({
     <>
       <button
         {...props}
+        type="button"
         disabled={disabled}
         className={className}
         onClick={() => copyToClipboard(value, valueFallbackInputRef.current!).then(onSuccess, onError)}

src/components/Earn.tsx

@@ -575,7 +575,7 @@ export default function Earn({ wallet }: EarnProps) {
   }, [stopMakerService, isLoading, isSending, isWaitingMakerStart, isWaitingMakerStop, t])
 
   return (
-    <div className={styles['earn']}>
+    <div className={styles.earn}>
       <PageTitle title={t('earn.title')} subtitle={t('earn.subtitle')} />
 
       <rb.Row className="mb-2">

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo } from 'react'
+import { Link } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
@@ -7,11 +8,11 @@ import { useWebsocketState } from '../context/WebsocketContext'
 import { useCurrentWallet } from '../context/WalletContext'
 import Sprite from './Sprite'
 import Cheatsheet from './Cheatsheet'
-import packageInfo from '../../package.json'
+import { InfoModal } from './Modal'
 import { isDebugFeatureEnabled, isDevMode } from '../constants/debugFeatures'
-import { toSemVer } from '../utils'
-import { Link } from 'react-router-dom'
 import { routes } from '../constants/routes'
+import { toSemVer } from '../utils'
+import packageInfo from '../../package.json'
 
 const APP_DISPLAY_VERSION = (() => {
   const version = toSemVer(packageInfo.version)
@@ -48,29 +49,26 @@ export default function Footer() {
   return (
     <>
       {showBetaWarning && (
-        <div className="warning-card-wrapper">
-          <rb.Card className="warning-card translate-middle shadow-lg">
-            <rb.Card.Body>
-              <rb.Card.Title className="text-center mb-3">{t('footer.warning_alert_title')}</rb.Card.Title>
-              <p>{t('footer.warning_alert_text')}</p>
-              <p className="text-secondary">
-                JoinMarket: v{serviceInfo?.server?.version?.raw || '_unknown'}
-                <br />
-                Jam: v{APP_DISPLAY_VERSION}
-              </p>
-              <div className="text-center mt-3">
-                <rb.Button variant="dark" onClick={() => setShowBetaWarning(false)}>
-                  {t('footer.warning_alert_button_ok')}
-                </rb.Button>
-              </div>
-            </rb.Card.Body>
-          </rb.Card>
-        </div>
+        <InfoModal
+          isShown={showBetaWarning}
+          size="sm"
+          title={t('footer.warning_alert_title')}
+          submitButtonText={t('footer.warning_alert_button_ok')}
+          onCancel={() => setShowBetaWarning(false)}
+          onSubmit={() => setShowBetaWarning(false)}
+        >
+          <p>{t('footer.warning_alert_text')}</p>
+          <p className="mb-0 text-secondary">
+            JoinMarket: v{serviceInfo?.server?.version?.raw || '_unknown'}
+            <br />
+            Jam: v{APP_DISPLAY_VERSION}
+          </p>
+        </InfoModal>
       )}
 
       <rb.Nav as="footer" className="border-top py-2">
         <rb.Container fluid="xl" className="d-flex justify-content-center py-2 px-4">
-          <div className="flex-1 order-0 justify-content-start align-items-center">
+          <div className="d-none d-md-flex flex-1 order-0 justify-content-start align-items-center">
             <div className="text-small text-start text-secondary">
               <Trans i18nKey="footer.warning">
                 This is pre-alpha software.
@@ -84,12 +82,13 @@ export default function Footer() {
               </Trans>
             </div>
           </div>
-          <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center pt-0">
+          <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center">
             {cheatsheetEnabled && (
-              <div className="order-1 order-sm-0">
+              <>
                 <Cheatsheet show={showCheatsheet} onHide={() => setShowCheatsheet(false)} />
                 <rb.Nav.Item>
                   <rb.Button
+                    type="button"
                     variant="link"
                     className="cheatsheet-link nav-link text-start border-0 px-2"
                     onClick={() => setShowCheatsheet(true)}
@@ -100,7 +99,7 @@ export default function Footer() {
                     </div>
                   </rb.Button>
                 </rb.Nav.Item>
-              </div>
+              </>
             )}
           </div>
           <div className="d-flex flex-1 order-2 justify-content-end align-items-center gap-1">

src/components/JarSelectorModal.module.css

@@ -2,10 +2,6 @@
   background-color: rgba(0, 0, 0, 0.5) !important;
 }
 
-:global .modal-dialog {
-  max-width: 45rem !important;
-}
-
 .modal :global .modal-content {
   background-color: var(--bs-body-bg) !important;
   border-radius: 1rem !important;

src/components/JarSelectorModal.tsx

@@ -59,6 +59,7 @@ export default function JarSelectorModal({
       centered={true}
       animation={true}
       className={styles.modal}
+      size="lg"
     >
       <rb.Modal.Header className={styles.modalHeader}>
         <rb.Modal.Title className={styles.modalTitle}>

src/components/Jars.tsx

@@ -24,7 +24,7 @@ const Jars = ({ accountBalances, totalBalance, onClick }: JarsProps) => {
   return (
     <div className="d-flex flex-column align-items-center gap-5">
       <rb.OverlayTrigger
-        placement="right"
+        placement="bottom"
         overlay={
           <rb.Popover>
             <rb.Popover.Body>{t('current_wallet.jars_title_popover')}</rb.Popover.Body>

src/components/Modal.tsx

@@ -4,29 +4,76 @@ import { useTranslation } from 'react-i18next'
 import styles from './Modal.module.css'
 import Sprite from './Sprite'
 
-export interface ConfirmModalProps {
+type BaseModalProps = {
   isShown: boolean
   title: ReactNode | string
   onCancel: () => void
-  onConfirm: () => void
+  backdrop?: rb.ModalProps['backdrop']
+  size?: rb.ModalProps['size']
 }
-
-const ConfirmModal = ({ isShown, title, children, onCancel, onConfirm }: PropsWithChildren<ConfirmModalProps>) => {
-  const { t } = useTranslation()
-
+const BaseModal = ({
+  isShown,
+  title,
+  children,
+  onCancel,
+  size,
+  backdrop = 'static',
+}: PropsWithChildren<BaseModalProps>) => {
   return (
     <rb.Modal
       show={isShown}
       keyboard={true}
       onEscapeKeyDown={() => onCancel()}
+      onHide={() => onCancel()}
       centered={true}
       animation={true}
-      backdrop="static"
-      className={styles['modal']}
+      backdrop={backdrop}
+      size={size}
+      className={styles.modal}
     >
       <rb.Modal.Header className={styles['modal-header']}>
         <rb.Modal.Title className={styles['modal-title']}>{title}</rb.Modal.Title>
       </rb.Modal.Header>
+      {children}
+    </rb.Modal>
+  )
+}
+
+export type InfoModalProps = Omit<BaseModalProps, 'backdrop'> & {
+  onSubmit: () => void
+  submitButtonText: React.ReactNode | string
+}
+
+const InfoModal = ({
+  isShown,
+  title,
+  children,
+  onCancel,
+  onSubmit,
+  submitButtonText,
+  size,
+}: PropsWithChildren<InfoModalProps>) => {
+  return (
+    <BaseModal isShown={isShown} title={title} onCancel={onCancel} backdrop={true} size={size}>
+      <rb.Modal.Body className={styles['modal-body']}>{children}</rb.Modal.Body>
+      <rb.Modal.Footer className={styles['modal-footer']}>
+        <rb.Button variant="outline-dark" onClick={() => onSubmit()}>
+          {submitButtonText}
+        </rb.Button>
+      </rb.Modal.Footer>
+    </BaseModal>
+  )
+}
+
+export type ConfirmModalProps = Omit<InfoModalProps, 'onSubmit' | 'submitButtonText'> & {
+  onConfirm: () => void
+}
+
+const ConfirmModal = ({ isShown, title, children, onCancel, onConfirm }: PropsWithChildren<ConfirmModalProps>) => {
+  const { t } = useTranslation()
+
+  return (
+    <BaseModal isShown={isShown} title={title} onCancel={onCancel}>
       <rb.Modal.Body className={styles['modal-body']}>{children}</rb.Modal.Body>
       <rb.Modal.Footer className={styles['modal-footer']}>
         <rb.Button
@@ -41,8 +88,8 @@ const ConfirmModal = ({ isShown, title, children, onCancel, onConfirm }: PropsWi
           {t('modal.confirm_button_accept')}
         </rb.Button>
       </rb.Modal.Footer>
-    </rb.Modal>
+    </BaseModal>
   )
 }
 
-export { ConfirmModal }
+export { InfoModal, ConfirmModal }

src/components/Navbar.module.css

@@ -18,3 +18,11 @@
 :global(.jam-reload-wallet-info-in-progress) .loadingIndicator {
   display: inline-block !important;
 }
+
+.offcanvasBody {
+  font-size: calc(var(--bs-body-font-size) * 1.5);
+}
+
+.offcanvasBody :global(.nav-link) {
+  width: 100%;
+}

src/components/Navbar.tsx

@@ -11,9 +11,9 @@ import { CurrentWallet, useCurrentWallet, useCurrentWalletInfo } from '../contex
 import { useServiceInfo, useSessionConnectionError } from '../context/ServiceInfoContext'
 import { routes } from '../constants/routes'
 import { AmountSats } from '../libs/JmWalletApi'
+import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 
 import styles from './Navbar.module.css'
-import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 
 const BalanceLoadingIndicator = () => {
   return (
@@ -174,21 +174,23 @@ 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 pe-2">
-          <div className="d-flex align-items-center px-0">
-            <NavLink to={joiningRoute} onClick={onClick} className="nav-link">
-              <rb.Navbar.Text className="d-md-none">{t('navbar.joining_in_progress')}</rb.Navbar.Text>
-              <JoiningIndicator
-                isOn={true}
-                className="navbar-text text-success"
-                title={t('navbar.joining_in_progress')}
-              />
-            </NavLink>
-          </div>
+        <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.Navbar.Text className="d-md-none">{t('navbar.joining_in_progress')}</rb.Navbar.Text>
+            <JoiningIndicator
+              isOn={true}
+              className="navbar-text text-success"
+              title={t('navbar.joining_in_progress')}
+            />
+          </NavLink>
         </rb.Nav.Item>
       )}
       {isDebugFeatureEnabled('fastThemeToggle') && (
-        <rb.Nav.Item className="d-none d-md-flex align-items-center pe-2">
+        <rb.Nav.Item className="d-none d-md-flex align-items-center justify-content-center">
           <FastThemeToggle />
         </rb.Nav.Item>
       )}
@@ -197,7 +199,7 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
           to={routes.settings}
           onClick={onClick}
           className={({ isActive }) =>
-            'nav-link d-flex align-items-center justify-content-center px-0' + (isActive ? ' active' : '')
+            'nav-link d-flex align-items-center justify-content-center' + (isActive ? ' active' : '')
           }
         >
           <Sprite symbol="gear" width="30" height="30" className="d-none d-md-inline-block" />
@@ -308,25 +310,25 @@ export default function Navbar() {
                   <rb.Offcanvas.Header>
                     <rb.Offcanvas.Title>{t('navbar.title')}</rb.Offcanvas.Title>
                   </rb.Offcanvas.Header>
-                  <rb.Offcanvas.Body>
+                  <rb.Offcanvas.Body className={styles.offcanvasBody}>
                     <rb.Nav className="ms-auto">
                       <rb.Nav.Item>
-                        <Link
+                        <NavLink
                           to={routes.createWallet}
                           onClick={() => isExpanded && setIsExpanded(false)}
-                          className="nav-link"
+                          className="nav-link d-flex align-items-center justify-content-center"
                         >
                           {t('navbar.button_create_wallet')}
-                        </Link>
+                        </NavLink>
                       </rb.Nav.Item>
                       <rb.Nav.Item>
-                        <Link
+                        <NavLink
                           to={routes.importWallet}
                           onClick={() => isExpanded && setIsExpanded(false)}
-                          className="nav-link"
+                          className="nav-link d-flex align-items-center justify-content-center"
                         >
                           {t('navbar.button_import_wallet')}
-                        </Link>
+                        </NavLink>
                       </rb.Nav.Item>
                     </rb.Nav>
                   </rb.Offcanvas.Body>
@@ -362,7 +364,7 @@ export default function Navbar() {
                   <rb.Offcanvas.Header>
                     <rb.Offcanvas.Title>{t('navbar.title')}</rb.Offcanvas.Title>
                   </rb.Offcanvas.Header>
-                  <rb.Offcanvas.Body>
+                  <rb.Offcanvas.Body className={styles.offcanvasBody}>
                     <CenterNav
                       makerRunning={makerRunning}
                       schedulerRunning={schedulerRunning}

src/components/Receive.module.css

@@ -61,7 +61,7 @@
 }
 
 .address {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   padding: 1rem 0 1rem;
 }
 
@@ -73,7 +73,7 @@
   align-items: center;
   gap: 2rem;
   color: var(--bs-body-color);
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .jarsPlaceholder {