ui: fluid container with wider layout (#703)

* ui(layout): larger jars on main wallet view * ui(layout): wider layout with container-xl
joinmarket-webui · Dec 19, 2023 · 9807f37 · 9807f37
1 parent 11e2c2a
commit 9807f37
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 50 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -94,7 +94,7 @@ export default function App() {
         element={
           <>
             <Navbar />
-            <rb.Container as="main" className="py-4 py-sm-5">
+            <rb.Container as="main" className="py-4 py-lg-5" fluid="xl">
               <Outlet />
             </rb.Container>
             <Footer />

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/Layout.tsx b/src/components/Layout.tsx
@@ -13,7 +13,7 @@ const Col = ({ variant, children }: PropsWithChildren<ColProps>) => {
   }
 
   return (
-    <rb.Col md={10} lg={8} xl={6}>
+    <rb.Col lg={10} xl={10} xxl={8}>
       {children}
     </rb.Col>
   )

diff --git a/src/components/MainWalletView.module.css b/src/components/MainWalletView.module.css
@@ -60,12 +60,3 @@
 .jarsDividerContainer .dividerButton:disabled {
   cursor: not-allowed;
 }
-
-.sendReceiveButton {
-  font-weight: 500;
-  border-color: var(--bs-border-color) !important;
-}
-
-.sendReceiveButton:hover {
-  border-color: transparent !important;
-}
diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
@@ -171,24 +171,24 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
                 <ExtendedLink
                   to={routes.receive}
                   state={{ account: 0 }}
-                  className={`${styles.sendReceiveButton} btn btn-outline-dark w-100`}
+                  className={`${styles.sendReceiveButton} btn btn-lg btn-outline-dark w-100`}
                   disabled={isLoading || serviceInfo?.rescanning}
                 >
                   <div className="d-flex justify-content-center align-items-center">
-                    <Sprite symbol="receive" width="24" height="24" />
-                    <div className="ps-1">{t('current_wallet.button_deposit')}</div>
+                    <Sprite symbol="receive" width="24" height="24" className="me-1" />
+                    {t('current_wallet.button_deposit')}
                   </div>
                 </ExtendedLink>
               </rb.Col>
               <rb.Col>
                 <ExtendedLink
                   to={routes.send}
-                  className={`${styles.sendReceiveButton} btn btn-outline-dark w-100`}
+                  className={`${styles.sendReceiveButton} btn btn-lg btn-outline-dark w-100`}
                   disabled={isLoading || serviceInfo?.rescanning}
                 >
                   <div className="d-flex justify-content-center align-items-center">
-                    <Sprite symbol="send" width="24" height="24" />
-                    <div className="ps-1">{t('current_wallet.button_withdraw')}</div>
+                    <Sprite symbol="send" width="24" height="24" className="me-1" />
+                    {t('current_wallet.button_withdraw')}
                   </div>
                 </ExtendedLink>
               </rb.Col>
@@ -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/Receive.module.css b/src/components/Receive.module.css
@@ -69,7 +69,7 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
   gap: 2rem;
   color: var(--bs-body-color);
@@ -90,6 +90,5 @@
   .jarsContainer {
     gap: 1.5rem;
     flex-wrap: nowrap;
-    justify-content: space-between;
   }
 }
diff --git a/src/components/Send/SourceJarSelector.module.css b/src/components/Send/SourceJarSelector.module.css
@@ -2,9 +2,9 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 2rem;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 1rem;
   color: var(--bs-body-color);
   margin-bottom: 1.5rem;
 }

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>