Skip to content

Commit

Permalink
chore: small ui changes suggested by @editwentyone (#709)
Browse files Browse the repository at this point in the history
* chore(main): change wallet distribution popover placement

* chore(receive): move new address button below qrcode

* chore(footer): hide app info on small screens

* chore: use standard modal for app info

* ui(menu): increase font size on mobile in side menu

* ui(receive): fix amount input field addon border
  • Loading branch information
theborakompanioni authored Dec 14, 2023
1 parent 643db85 commit 06bf4db
Showing 14 changed files with 5,555 additions and 1,503 deletions.
6,690 changes: 5,352 additions & 1,338 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/components/CopyButton.tsx
Original file line number Diff line number Diff line change
@@ -56,6 +56,7 @@ function Copyable({
<>
<button
{...props}
type="button"
disabled={disabled}
className={className}
onClick={() => copyToClipboard(value, valueFallbackInputRef.current!).then(onSuccess, onError)}
2 changes: 1 addition & 1 deletion src/components/Earn.tsx
Original file line number Diff line number Diff line change
@@ -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">
49 changes: 24 additions & 25 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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">
4 changes: 0 additions & 4 deletions src/components/JarSelectorModal.module.css
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions src/components/JarSelectorModal.tsx
Original file line number Diff line number Diff line change
@@ -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}>
2 changes: 1 addition & 1 deletion src/components/Jars.tsx
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 57 additions & 10 deletions src/components/Modal.tsx
Original file line number Diff line number Diff line change
@@ -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 }
8 changes: 8 additions & 0 deletions src/components/Navbar.module.css
Original file line number Diff line number Diff line change
@@ -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%;
}
46 changes: 24 additions & 22 deletions src/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -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}
4 changes: 2 additions & 2 deletions src/components/Receive.module.css
Original file line number Diff line number Diff line change
@@ -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 {
Loading

0 comments on commit 06bf4db

Please sign in to comment.