feat(ui): use end adornment for quantity input

jeremyckahn · Apr 6, 2024 · 7b99217 · 7b99217
1 parent e0a9b51
commit 7b99217
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/src/components/Farmhand/Farmhand.sass b/src/components/Farmhand/Farmhand.sass
@@ -231,12 +231,11 @@ body
     padding: 16px
 
   .MuiCardActions-root
-    flex-wrap: wrap
 
     button
       margin-bottom: 0.3em
       margin-left: 0.25em
-      margin-right: 0.25em
+      margin-right: 1em
 
   h1,
   h2,

diff --git 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" pr={0.5}>
             <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
@@ -61,6 +61,18 @@ const QuantityTextInput = ({
 
       InputProps: {
         inputComponent: QuantityNumberFormat,
+        endAdornment: (
+          <>
+            /{' '}
+            <AnimatedNumber
+              {...{
+                number: maxQuantity,
+                formatter: integerString,
+                animatedNumberSx: { pl: 1 },
+              }}
+            />
+          </>
+        ),
       },
     }}
   />
@@ -94,16 +106,6 @@ const QuantityInput = ({
       <QuantityTextInput
         {...{ handleSubmit, handleUpdateNumber, maxQuantity, value }}
       />
-      <span className="quantity">
-        /{' '}
-        <AnimatedNumber
-          {...{
-            number: maxQuantity,
-            formatter: integerString,
-            animatedNumberSx: { pl: 1 },
-          }}
-        />
-      </span>
       <div className="number-nudger-container">
         <Fab
           disabled={!value}

diff --git a/src/components/QuantityInput/QuantityInput.sass b/src/components/QuantityInput/QuantityInput.sass
@@ -11,12 +11,10 @@
     line-height: 2.3em
 
   .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 +23,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