From 18a1adbf09ca5fd94c9fc331321f9de7ac719552 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <me@jeremyckahn.com>
Date: Sun, 7 Apr 2024 14:13:40 -0500
Subject: [PATCH] feat(ui): Improve `QuantityInput` spacing (#489)

* feat(ui): use end adornment for quantity input
* feat(ui): improve quantity input and card styling
---
 .../AnimatedNumber/AnimatedNumber.js          |  3 ++-
 src/components/Elements/index.js              |  8 +++++++
 src/components/Farmhand/Farmhand.sass         |  8 -------
 src/components/Item/Item.js                   |  5 +++--
 src/components/QuantityInput/QuantityInput.js | 21 ++++++++++++-------
 .../QuantityInput/QuantityInput.sass          | 14 ++-----------
 src/mui-theme.js                              |  3 ---
 7 files changed, 28 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Elements/index.js

diff --git a/src/components/AnimatedNumber/AnimatedNumber.js b/src/components/AnimatedNumber/AnimatedNumber.js
index 3e73cc395..748a6ddd0 100644
--- a/src/components/AnimatedNumber/AnimatedNumber.js
+++ b/src/components/AnimatedNumber/AnimatedNumber.js
@@ -4,7 +4,7 @@ import { func, number } from 'prop-types'
 
 import './AnimatedNumber.sass'
 
-const defaultFormatter = number => `${number}`
+const defaultFormatter = (/** @type {number} */ number) => `${number}`
 
 const AnimatedNumber = ({ number, formatter = defaultFormatter }) => {
   const [displayedNumber, setDisplayedNumber] = useState(number)
@@ -42,6 +42,7 @@ const AnimatedNumber = ({ number, formatter = defaultFormatter }) => {
       }
     }
   }, [currentTweenable, number, previousNumber])
+
   return <span className="AnimatedNumber">{formatter(displayedNumber)}</span>
 }
 
diff --git a/src/components/Elements/index.js b/src/components/Elements/index.js
new file mode 100644
index 000000000..729922f25
--- /dev/null
+++ b/src/components/Elements/index.js
@@ -0,0 +1,8 @@
+import styled from '@mui/material/styles/styled'
+
+// NOTE: Elements in this file are intended to make standard DOM elements easy
+// to style with MUI's sx prop.
+// @see: https://mui.com/system/styled/
+// @see: https://mui.com/system/getting-started/the-sx-prop/
+
+export const Span = styled('span')({})
diff --git a/src/components/Farmhand/Farmhand.sass b/src/components/Farmhand/Farmhand.sass
index db0998726..6820334b1 100644
--- a/src/components/Farmhand/Farmhand.sass
+++ b/src/components/Farmhand/Farmhand.sass
@@ -230,14 +230,6 @@ body
     // Overrides an unhelpful MUI default
     padding: 16px
 
-  .MuiCardActions-root
-    flex-wrap: wrap
-
-    button
-      margin-bottom: 0.3em
-      margin-left: 0.25em
-      margin-right: 0.25em
-
   h1,
   h2,
   h3,
diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
index 675534bea..b3ed3086f 100644
--- a/src/components/Item/Item.js
+++ b/src/components/Item/Item.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp'
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'
 import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
@@ -340,7 +341,7 @@ export const Item = ({
           </>
         )}
         {isSellView && (
-          <>
+          <Box display="flex">
             <Button
               {...{
                 className: 'sell',
@@ -361,7 +362,7 @@ export const Item = ({
                 value: sellQuantity,
               }}
             />
-          </>
+          </Box>
         )}
       </CardActions>
     </Card>
diff --git a/src/components/QuantityInput/QuantityInput.js b/src/components/QuantityInput/QuantityInput.js
index 8ea0117f7..ffd979a1c 100644
--- a/src/components/QuantityInput/QuantityInput.js
+++ b/src/components/QuantityInput/QuantityInput.js
@@ -6,9 +6,9 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'
 import NumberFormat from 'react-number-format'
 import TextField from '@mui/material/TextField'
 
-import AnimatedNumber from '../AnimatedNumber'
-
 import { integerString } from '../../utils'
+import AnimatedNumber from '../AnimatedNumber'
+import { Span } from '../Elements'
 
 import './QuantityInput.sass'
 
@@ -61,6 +61,17 @@ const QuantityTextInput = ({
 
       InputProps: {
         inputComponent: QuantityNumberFormat,
+        endAdornment: (
+          <>
+            <Span sx={{ px: 1 }}>/</Span>
+            <AnimatedNumber
+              {...{
+                number: maxQuantity,
+                formatter: integerString,
+              }}
+            />
+          </>
+        ),
       },
     }}
   />
@@ -94,12 +105,6 @@ const QuantityInput = ({
       <QuantityTextInput
         {...{ handleSubmit, handleUpdateNumber, maxQuantity, value }}
       />
-      <span className="quantity">
-        /{' '}
-        <AnimatedNumber
-          {...{ number: maxQuantity, formatter: integerString }}
-        />
-      </span>
       <div className="number-nudger-container">
         <Fab
           disabled={!value}
diff --git a/src/components/QuantityInput/QuantityInput.sass b/src/components/QuantityInput/QuantityInput.sass
index 23e3d360d..c80404f0a 100644
--- a/src/components/QuantityInput/QuantityInput.sass
+++ b/src/components/QuantityInput/QuantityInput.sass
@@ -1,22 +1,12 @@
 @import ../../styles/variables.sass
 
 .QuantityInput
-  // Needed to override the .MuiCardActions-root to work well with the MUI card
-  // action item spacing.
-  .MuiCardActions-root &
-    button
-      margin-left: 1em
-
-  .quantity
-    line-height: 2.8em
 
   .MuiInput-root
-    max-width: 75px
     margin: 1px 0.25em 0
 
     @media (max-width: #{$break-medium-phone})
       margin: 0 0.25em 0 0.5em
-      max-width: 65px
 
     input
       text-align: right
@@ -25,11 +15,11 @@
     display: flex
     flex-direction: column
     position: absolute
-    top: 0
+    top: 0.25em
     right: 0
 
     button
-      margin: 0.25em
+      margin: 0.25em .5em
 
       svg
         // Needed to override
diff --git a/src/mui-theme.js b/src/mui-theme.js
index 1f20298e7..4df64a359 100644
--- a/src/mui-theme.js
+++ b/src/mui-theme.js
@@ -21,9 +21,6 @@ export default createTheme({
       styleOverrides: {
         root: {
           margin: '1rem 0',
-          '& input': {
-            padding: '0.5rem',
-          },
         },
       },
     },