feat(ui): improve QuantityInput spacing

src/components/AnimatedNumber/AnimatedNumber.js

@@ -1,12 +1,17 @@
 import React, { useEffect, useState } from 'react'
 import { tween } from 'shifty'
-import { func, number } from 'prop-types'
+import { func, number, object } from 'prop-types'
 
+import { Span } from '../Elements'
 import './AnimatedNumber.sass'
 
 const defaultFormatter = number => `${number}`
 
-const AnimatedNumber = ({ number, formatter = defaultFormatter }) => {
+const AnimatedNumber = ({
+  number,
+  animatedNumberSx,
+  formatter = defaultFormatter,
+}) => {
   const [displayedNumber, setDisplayedNumber] = useState(number)
   const [previousNumber, setPreviousNumber] = useState(number)
   const [currentTweenable, setCurrentTweenable] = useState()
@@ -42,12 +47,17 @@ const AnimatedNumber = ({ number, formatter = defaultFormatter }) => {
       }
     }
   }, [currentTweenable, number, previousNumber])
-  return <span className="AnimatedNumber">{formatter(displayedNumber)}</span>
+  return (
+    <Span className="AnimatedNumber" sx={animatedNumberSx}>
+      {formatter(displayedNumber)}
+    </Span>
+  )
 }
 
 AnimatedNumber.propTypes = {
   formatter: func,
   number: number.isRequired,
+  animatedNumberSx: object,
 }
 
 export default AnimatedNumber

src/components/Elements/index.js

@@ -0,0 +1,3 @@
+import styled from '@mui/material/styles/styled'
+
+export const Span = styled('span')({})

src/components/QuantityInput/QuantityInput.js

@@ -97,7 +97,11 @@ const QuantityInput = ({
       <span className="quantity">
         /{' '}
         <AnimatedNumber
-          {...{ number: maxQuantity, formatter: integerString }}
+          {...{
+            number: maxQuantity,
+            formatter: integerString,
+            animatedNumberSx: { pl: 1 },
+          }}
         />
       </span>
       <div className="number-nudger-container">

src/components/QuantityInput/QuantityInput.sass

@@ -8,7 +8,7 @@
       margin-left: 1em
 
   .quantity
-    line-height: 2.8em
+    line-height: 2.3em
 
   .MuiInput-root
     max-width: 75px