Fixed Undefined tag issue , Refactor Jar Selection logic & some minor…

… css
joinmarket-webui · Jun 8, 2024 · a5e21fb · a5e21fb
1 parent 162d89e
commit a5e21fb
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 152 deletions.
diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx
@@ -39,23 +39,28 @@ interface BalanceComponentProps {
   symbol?: JSX.Element
   showSymbol?: boolean
   frozen?: boolean
+  isColorChange?: boolean
+  frozenSymbol?: boolean
 }
 
 const BalanceComponent = ({
   symbol,
   showSymbol = true,
   frozen = false,
+  isColorChange = false,
+  frozenSymbol = true,
   children,
 }: PropsWithChildren<BalanceComponentProps>) => {
   return (
     <span
-      className={classNames(styles.balance, 'balance-hook', 'd-inline-flex align-items-center', {
+      className={classNames('balance-hook', 'd-inline-flex align-items-center', {
         [styles.frozen]: frozen,
+        [styles.balance]: !isColorChange,
       })}
     >
       {children}
       {showSymbol && symbol}
-      {frozen && FROZEN_SYMBOL}
+      {frozen && frozenSymbol && FROZEN_SYMBOL}
     </span>
   )
 }
@@ -75,7 +80,9 @@ const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
   return (
     <BalanceComponent symbol={BTC_SYMBOL} {...props}>
       <span
-        className={`${styles.bitcoinAmount} slashed-zeroes`}
+        className={classNames(`slashed-zeroes`, {
+          [styles.bitcoinAmount]: !props.isColorChange,
+        })}
         data-testid="bitcoin-amount"
         data-integer-part-is-zero={integerPartIsZero}
         data-fractional-part-starts-with-zero={fractionalPartStartsWithZero}
@@ -101,7 +108,11 @@ type SatsBalanceProps = Omit<BalanceComponentProps, 'symbol'> & { value: number
 const SatsBalance = ({ value, ...props }: SatsBalanceProps) => {
   return (
     <BalanceComponent symbol={SAT_SYMBOL} {...props}>
-      <span className={`${styles.satsAmount} slashed-zeroes`} data-testid="sats-amount" data-raw-value={value}>
+      <span
+        className={classNames(`slashed-zeroes`, { [styles.satsAmount]: !props.isColorChange })}
+        data-testid="sats-amount"
+        data-raw-value={value}
+      >
         {formatSats(value)}
       </span>
     </BalanceComponent>

diff --git a/src/components/Send/ShowUtxos.module.css b/src/components/Send/ShowUtxos.module.css
@@ -1,10 +1,8 @@
-/* ShowUtxos.module.css */
-
 .utxoRowUnfrozen {
   background-color: #27ae600d;
   padding: 8px 30px;
   height: 46px;
-  color: #27ae60;
+  color: #27ae60 !important;
   margin-bottom: 4px;
   cursor: pointer;
 }
@@ -13,7 +11,7 @@
   background-color: #2d9cdb0d;
   padding: 8px 30px;
   height: 46px;
-  color: #2d9cdb;
+  color: #2d9cdb !important;
   margin-bottom: 4px;
   cursor: pointer;
 }
@@ -47,18 +45,18 @@
 }
 
 .NextButton {
-  width: 47%;
+  width: 47% !important;
   height: 3.15rem;
-  padding: 14px 20px 14px 20px;
-  border-radius: 5px;
+  padding: 14px 20px 14px 20px !important;
+  border-radius: 5px !important;
 }
 
 .BackButton {
-  width: 47%;
+  width: 47% !important;
   height: 3.15rem;
-  padding: 14px 20px 14px 20px;
-  margin-right: 19px;
-  border-radius: 5px;
+  padding: 14px 20px 14px 20px !important;
+  margin-right: 33px !important;
+  border-radius: 5px !important;
 }
 
 .utxoTagUnFreeze {
@@ -68,6 +66,7 @@
   border-radius: 0.35rem;
   padding: 0rem 0.25rem;
   display: inline-block;
+  margin-left: 4px;
 }
 
 .utxoTagFreeze {
@@ -77,25 +76,41 @@
   border-radius: 0.35rem;
   padding: 0rem 0.25rem;
   display: inline-block;
+  margin-left: 4px;
 }
 
 .parent-class .utxoTag {
   border: 1px solid #27ae60 !important;
   border-radius: 0.2rem !important;
 }
 
+.utxoListDisplay {
+  margin-left: -27px !important;
+}
+
+.modalBody {
+  padding: 40px !important;
+}
+
 .squareToggleButton {
-  height: 22px !important;
-  border-radius: 3px !important;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid var(--bs-body-color);
+  margin-top: 3.5px;
 }
 
-.squareFrozenToggleButton {
-  height: 22px !important;
-  border-radius: 3px !important;
-  border: 1px solid #2d9cdb !important;
+.selected {
+  visibility: visible !important;
+  background-color: var(--bs-body-color);
 }
 
-.utxoListDisplay {
-  margin-left: -20px;
-  margin-right: 20px;
+.squareFrozenToggleButton {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid #2d9cdb;
+  margin-top: 3.5px;
 }