follow-up(PR771): quick freeze/unfreeze

src/components/Balance.module.css

@@ -18,7 +18,7 @@
   --jam-balance-deemphasize-color: #1153b5;
 }
 
-.balance {
+.balanceColor {
   color: var(--jam-balance-color);
 }
 
@@ -53,32 +53,32 @@
   justify-content: center;
 }
 
-.bitcoinAmount .fractionalPart :nth-child(3)::before,
-.bitcoinAmount .fractionalPart :nth-child(6)::before {
+.bitcoinAmountSpacing .fractionalPart :nth-child(3)::before,
+.bitcoinAmountSpacing .fractionalPart :nth-child(6)::before {
   content: '\202F';
 }
 
 /** Integer Part **/
-.bitcoinAmount[data-integer-part-is-zero="true"] .integerPart,
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .integerPart,
 /** Decimal Point **/
-.bitcoinAmount[data-integer-part-is-zero="true"] .decimalPoint,
-.bitcoinAmount[data-fractional-part-starts-with-zero="true"] .decimalPoint,
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .decimalPoint,
+.bitcoinAmountColor[data-fractional-part-starts-with-zero="true"] .decimalPoint,
 /** Fractional Part **/
-.bitcoinAmount[data-integer-part-is-zero="false"] .fractionalPart,
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]),
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
-.bitcoinAmount[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="false"] .fractionalPart,
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]),
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
+.bitcoinAmountColor[data-integer-part-is-zero="true"] .fractionalPart :nth-child(1):is(span[data-digit="0"]) + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"] + span[data-digit="0"],
 /** Symbol */
-.bitcoinAmount[data-raw-value="0"] + .bitcoinSymbol {
+.bitcoinAmountColor[data-raw-value="0"] + .bitcoinSymbol {
   color: var(--jam-balance-deemphasize-color);
 }
 
-.satsAmount[data-raw-value='0'],
-.satsAmount[data-raw-value='0'] + .satsSymbol {
+.satsAmountColor[data-raw-value='0'],
+.satsAmountColor[data-raw-value='0'] + .satsSymbol {
   color: var(--jam-balance-deemphasize-color);
 }

src/components/Balance.tsx

@@ -39,23 +39,23 @@ interface BalanceComponentProps {
   symbol?: JSX.Element
   showSymbol?: boolean
   frozen?: boolean
-  isColorChange?: boolean
+  colored?: boolean
   frozenSymbol?: boolean
 }
 
 const BalanceComponent = ({
   symbol,
   showSymbol = true,
   frozen = false,
-  isColorChange = false,
+  colored = true,
   frozenSymbol = true,
   children,
 }: PropsWithChildren<BalanceComponentProps>) => {
   return (
     <span
       className={classNames('balance-hook', 'd-inline-flex align-items-center', {
         [styles.frozen]: frozen,
-        [styles.balance]: !isColorChange,
+        [styles.balanceColor]: colored,
       })}
     >
       {children}
@@ -69,7 +69,7 @@ const DECIMAL_POINT_CHAR = '.'
 
 type BitcoinBalanceProps = Omit<BalanceComponentProps, 'symbol'> & { value: number }
 
-const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
+const BitcoinBalance = ({ value, colored = true, ...props }: BitcoinBalanceProps) => {
   const numberString = formatBtc(value)
   const [integerPart, fractionalPart] = numberString.split(DECIMAL_POINT_CHAR)
 
@@ -78,10 +78,10 @@ const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
   const fractionalPartStartsWithZero = fractionPartArray[0] === '0'
 
   return (
-    <BalanceComponent symbol={BTC_SYMBOL} {...props}>
+    <BalanceComponent symbol={BTC_SYMBOL} colored={colored} {...props}>
       <span
-        className={classNames(`slashed-zeroes`, {
-          [styles.bitcoinAmount]: !props.isColorChange,
+        className={classNames(`slashed-zeroes`, styles.bitcoinAmount, styles.bitcoinAmountSpacing, {
+          [styles.bitcoinAmountColor]: colored,
         })}
         data-testid="bitcoin-amount"
         data-integer-part-is-zero={integerPartIsZero}
@@ -105,11 +105,11 @@ const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
 
 type SatsBalanceProps = Omit<BalanceComponentProps, 'symbol'> & { value: number }
 
-const SatsBalance = ({ value, ...props }: SatsBalanceProps) => {
+const SatsBalance = ({ value, colored = true, ...props }: SatsBalanceProps) => {
   return (
-    <BalanceComponent symbol={SAT_SYMBOL} {...props}>
+    <BalanceComponent symbol={SAT_SYMBOL} colored={colored} {...props}>
       <span
-        className={classNames(`slashed-zeroes`, { [styles.satsAmount]: !props.isColorChange })}
+        className={classNames(`slashed-zeroes`, { [styles.satsAmountColor]: colored })}
         data-testid="sats-amount"
         data-raw-value={value}
       >

src/components/Divider.module.css

@@ -0,0 +1,32 @@
+.dividerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dividerContainer .dividerLine {
+  margin: 0;
+  width: 50%;
+  flex-grow: 0;
+  flex-shrink: 1;
+}
+
+.dividerContainer .dividerButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 1rem;
+  flex-shrink: 0;
+  flex-grow: 1;
+  color: var(--bs-body-color);
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid var(--bs-body-color);
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+}
+
+.dividerContainer .dividerButton:disabled {
+  cursor: not-allowed;
+}

src/components/Divider.tsx

@@ -0,0 +1,27 @@
+import * as rb from 'react-bootstrap'
+import classNames from 'classnames'
+import Sprite from './Sprite'
+import styles from './Divider.module.css'
+
+type DividerProps = rb.ColProps & {
+  toggled: boolean
+  onToggle: (current: boolean) => void
+  disabled?: boolean
+  className?: string
+}
+
+export default function Divider({ toggled, onToggle, disabled, className, ...colProps }: DividerProps) {
+  return (
+    <rb.Row className={classNames('d-flex', 'justify-content-center', className)}>
+      <rb.Col xs={12} {...colProps}>
+        <div className={styles.dividerContainer}>
+          <hr className={styles.dividerLine} />
+          <button className={styles.dividerButton} disabled={disabled} onClick={() => onToggle(toggled)}>
+            <Sprite symbol={toggled ? 'caret-up' : 'caret-down'} width="20" height="20" />
+          </button>
+          <hr className={styles.dividerLine} />
+        </div>
+      </rb.Col>
+    </rb.Row>
+  )
+}

src/components/JarSelectorModal.tsx

@@ -91,9 +91,15 @@ export default function JarSelectorModal({
       </rb.Modal.Body>
       <rb.Modal.Footer className={styles.modalFooter}>
         <rb.Button variant="light" onClick={cancel} className="d-flex justify-content-center align-items-center">
-          {t('modal.confirm_button_reject')}
+          <Sprite symbol="cancel" width="26" height="26" />
+          <div>{t('modal.confirm_button_reject')}</div>
         </rb.Button>
-        <rb.Button disabled={isConfirming || selectedJar === undefined} variant="dark" onClick={confirm}>
+        <rb.Button
+          disabled={isConfirming || selectedJar === undefined}
+          variant="dark"
+          onClick={confirm}
+          className="flex-1 d-flex justify-content-center align-items-center"
+        >
           {isConfirming ? (
             <>
               <rb.Spinner as="span" animation="border" size="sm" role="status" />

src/components/MainWalletView.module.css

@@ -27,36 +27,3 @@
   width: 100%;
   height: 3.5rem;
 }
-
-.jarsDividerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.jarsDividerContainer .dividerLine {
-  margin: 0;
-  width: 50%;
-  flex-grow: 0;
-  flex-shrink: 1;
-}
-
-.jarsDividerContainer .dividerButton {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 1rem;
-  flex-shrink: 0;
-  flex-grow: 1;
-  color: var(--bs-body-color);
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid var(--bs-body-color);
-  border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-}
-
-.jarsDividerContainer .dividerButton:disabled {
-  cursor: not-allowed;
-}

src/components/MainWalletView.tsx

@@ -13,6 +13,7 @@ import { ExtendedLink } from './ExtendedLink'
 import { JarDetailsOverlay } from './jar_details/JarDetailsOverlay'
 import { Jars } from './Jars'
 import styles from './MainWalletView.module.css'
+import Divider from './Divider'
 
 interface WalletHeaderProps {
   walletName: string
@@ -226,21 +227,13 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
             </div>
           </rb.Row>
         </rb.Collapse>
-        <rb.Row className="d-flex justify-content-center">
-          <rb.Col xs={showJars ? 12 : 10} md={showJars ? 12 : 8}>
-            <div className={styles.jarsDividerContainer}>
-              <hr className={styles.dividerLine} />
-              <button
-                className={styles.dividerButton}
-                disabled={serviceInfo?.rescanning}
-                onClick={() => setShowJars((current) => !current)}
-              >
-                <Sprite symbol={showJars ? 'caret-up' : 'caret-down'} width="20" height="20" />
-              </button>
-              <hr className={styles.dividerLine} />
-            </div>
-          </rb.Col>
-        </rb.Row>
+        <Divider
+          toggled={showJars}
+          onToggle={() => setShowJars((current) => !current)}
+          disabled={serviceInfo?.rescanning}
+          xs={showJars ? 12 : 10}
+          md={showJars ? 12 : 8}
+        />
       </div>
     </div>
   )

src/components/Modal.module.css

@@ -8,36 +8,36 @@
   box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25) !important;
 }
 
-.modal-header {
+.modalHeader {
   display: flex !important;
   justify-content: center !important;
   background-color: transparent !important;
   border: none !important;
   padding: 1.25rem 1.25rem 0 1.25rem !important;
 }
 
-.modal-title {
+.modalTitle {
   font-size: 1.3rem !important;
   font-weight: 600 !important;
   color: var(--bs-body-color) !important;
 }
 
-.modal-body {
+.modalBody {
   text-align: center !important;
   font-size: 1rem !important;
   font-weight: 400 !important;
   padding: 0.25rem 1.25rem 1rem 1.25rem !important;
 }
 
-.modal-footer {
+.modalFooter {
   display: flex !important;
   justify-content: center !important;
   gap: 1rem;
   background-color: transparent !important;
   padding: 1rem 1.25rem 1.25rem 1.25rem !important;
 }
 
-.modal-footer :global .btn {
+.modalFooter :global .btn {
   --bs-btn-border-color: var(--bs-border-color);
   flex-grow: 1;
   min-height: 2.8rem;