Merge patch commit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeremyckahn/farmhand",
-  "version": "1.18.10",
+  "version": "1.18.11",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "browserslist": "^4.21.9",
     "cross-env": "^7.0.2",
     "electron": "^22.1.0",
-    "electron-builder": "^23.1.0",
+    "electron-builder": "^24.13.3",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "eslint": "^7.13.0",

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>
 }
 

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')({})

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,

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>

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}

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

src/mui-theme.js

@@ -21,9 +21,6 @@ export default createTheme({
       styleOverrides: {
         root: {
           margin: '1rem 0',
-          '& input': {
-            padding: '0.5rem',
-          },
         },
       },
     },