ui(layout): larger jars on main wallet view

joinmarket-webui · Dec 15, 2023 · 27f78c1 · 27f78c1
1 parent 780c07a
commit 27f78c1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 28 deletions.
diff --git a/src/components/Jars.module.css b/src/components/Jars.module.css
@@ -16,16 +16,16 @@
 .jarsContainer {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
   gap: 2rem;
   color: var(--bs-body-color);
 }
 
 .jarsContainer :global .jar-container-hook {
   flex-direction: row;
   gap: 1rem;
-  min-width: 11rem;
 }
 
 .jarsContainer :global .jar-info-container-hook {
@@ -38,6 +38,7 @@
 @media only screen and (min-width: 768px) {
   .jarsContainer {
     flex-direction: row;
+    align-items: flex-start;
     gap: 1.5rem;
   }
 

diff --git a/src/components/Jars.tsx b/src/components/Jars.tsx
@@ -3,18 +3,18 @@ import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { AccountBalances } from '../context/BalanceSummary'
 import { AmountSats } from '../libs/JmWalletApi'
-import { OpenableJar, jarFillLevel } from './jars/Jar'
+import { JarProps, OpenableJar, jarFillLevel } from './jars/Jar'
 import Sprite from './Sprite'
 
 import styles from './Jars.module.css'
 
-interface JarsProps {
+type JarsProps = Pick<JarProps, 'size'> & {
   accountBalances: AccountBalances
   totalBalance: AmountSats
   onClick: (jarIndex: JarIndex) => void
 }
 
-const Jars = ({ accountBalances, totalBalance, onClick }: JarsProps) => {
+const Jars = ({ size, accountBalances, totalBalance, onClick }: JarsProps) => {
   const { t } = useTranslation()
   const sortedAccountBalances = useMemo(() => {
     if (!accountBalances) return []
@@ -43,6 +43,7 @@ const Jars = ({ accountBalances, totalBalance, onClick }: JarsProps) => {
           return (
             <OpenableJar
               key={account.accountIndex}
+              size={size}
               index={account.accountIndex}
               balance={account.calculatedAvailableBalanceInSats}
               frozenBalance={account.calculatedFrozenOrLockedBalanceInSats}

diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
@@ -205,6 +205,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
                   </rb.Placeholder>
                 ) : (
                   <Jars
+                    size="lg"
                     accountBalances={currentWalletInfo.balanceSummary.accountBalances}
                     totalBalance={currentWalletInfo.balanceSummary.calculatedTotalBalanceInSats}
                     onClick={onJarClicked}

diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
@@ -51,9 +51,9 @@
   /* min width should approximately match width of value "(symbol) 0.00 000 000":
     - 1ch for the symbol
     - 9ch chars for all zeros
-    - 1.5ch for the dot and spaces
+    - 2ch for the dot and spaces
   */
-  min-width: 11.5ch;
+  min-width: 12ch;
   min-height: 1rem;
   font-size: 0.8rem;
 }

diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
@@ -11,22 +11,23 @@ const classNames = classnamesBind.bind(styles)
 
 type JarFillLevel = 0 | 1 | 2 | 3
 
-interface JarProps {
+export type JarProps = {
   index: JarIndex
   balance: AmountSats
   frozenBalance: AmountSats
   fillLevel: JarFillLevel
   isOpen?: boolean
+  size?: 'sm' | 'lg'
 }
 
-interface SelectableJarProps {
+export type SelectableJarProps = JarProps & {
   isSelectable: boolean
   isSelected: boolean
   variant?: 'default' | 'warning'
   onClick: (index: JarIndex) => void
 }
 
-interface TooltipJarProps {
+export type OpenableJarProps = Omit<JarProps, 'isOpen'> & {
   tooltipText: string
   onClick: () => void
 }
@@ -85,7 +86,7 @@ const jarInitial = (index: JarIndex) => {
 /**
  * A jar with index and balance.
  */
-const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarProps) => {
+const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false, size }: JarProps) => {
   const settings = useSettings()
 
   const jarSymbol = useMemo(() => {
@@ -122,7 +123,12 @@ const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarPr
 
   return (
     <div className={`${styles.jarContainer} jar-container-hook`}>
-      <Sprite className={`${styles.jarSprite} ${flavorStyle}`} symbol={jarSymbol} width="32px" height="48px" />
+      <Sprite
+        className={`${styles.jarSprite} ${flavorStyle}`}
+        symbol={jarSymbol}
+        width={size === 'lg' ? '48px' : '32px'}
+        height={size === 'lg' ? '72px' : '48px'}
+      />
       <div className={`${styles.jarInfoContainer} jar-info-container-hook`}>
         <div className={styles.jarIndex}>{flavorName}</div>
         <div className={`${styles.jarBalance} jar-balance-container-hook`}>
@@ -148,15 +154,13 @@ const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarPr
  * A jar with index, balance, and a radio-style selection button.
  */
 const SelectableJar = ({
-  index,
-  balance,
-  frozenBalance,
-  fillLevel,
   isSelectable,
   isSelected,
   onClick,
+  index,
   variant = 'default',
-}: JarProps & SelectableJarProps) => {
+  ...jarProps
+}: SelectableJarProps) => {
   return (
     <div
       className={classNames('selectableJarContainer', {
@@ -165,7 +169,7 @@ const SelectableJar = ({
       })}
       onClick={() => isSelectable && onClick(index)}
     >
-      <Jar index={index} balance={balance} frozenBalance={frozenBalance} fillLevel={fillLevel} />
+      <Jar index={index} {...jarProps} />
       <div className="d-flex justify-content-center align-items-center gap-1 mt-2 position-relative">
         <div className={styles.selectionCircle} />
         {variant === 'warning' && (
@@ -182,14 +186,7 @@ const SelectableJar = ({
  * A jar with index, balance, and a tooltip.
  * The jar symbol opens on hover.
  */
-const OpenableJar = ({
-  index,
-  balance,
-  frozenBalance,
-  fillLevel,
-  tooltipText,
-  onClick,
-}: JarProps & TooltipJarProps) => {
+const OpenableJar = ({ tooltipText, onClick, ...jarProps }: OpenableJarProps) => {
   const [jarIsOpen, setJarIsOpen] = useState(false)
   const onMouseOver = () => setJarIsOpen(true)
   const onMouseOut = () => setJarIsOpen(false)
@@ -210,7 +207,7 @@ const OpenableJar = ({
         overlay={(props) => <rb.Tooltip {...props}>{tooltipText}</rb.Tooltip>}
       >
         <div className={styles.tooltipJarContainer} onClick={onClick}>
-          <Jar index={index} balance={balance} frozenBalance={frozenBalance} fillLevel={fillLevel} isOpen={jarIsOpen} />
+          <Jar {...jarProps} isOpen={jarIsOpen} />
         </div>
       </rb.OverlayTrigger>
     </div>