Change qty button to not need invasive CSS

client/public/locales/en/common.json

@@ -192,7 +192,7 @@
             "settings_extruder_temp": "Extruder Temp",
             "settings_bed_temp": "Bed Temp",
             "color_hex": "Color",
-      "spools": "Spool List"
+	    "spools": "Show Spools"
         },
         "fields_help": {
             "name": "Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example.",

client/src/pages/spools/create.tsx

@@ -131,28 +131,27 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
       isLoading={formLoading}
       footerButtons={() => (
         <>
-          <InputNumber
+          <div style={{ display: 'flex', backgroundColor: '#141414', border: '1px solid #424242', borderRadius: '6px' }}>
-            name="Quantity"
-            min={1}
-            style={{ width: '50%', float: 'right', textAlign: 'center' }}
-            controls={false}
-            value={quantity}
-            addonBefore={
             <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={decrementQty}>
               <MinusOutlined />
             </Button>
-            }
+            <InputNumber
-            addonAfter={
+              name="Quantity"
+              min={1}
+              id="qty-input"
+              controls={false}
+              value={quantity}
+            >
+            </InputNumber>
             <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={incrementQty}>
               <PlusOutlined />
             </Button>
-            }
+          </div>
-          >
-          </InputNumber>
           <Button type="primary" onClick={() => handleSubmit("list")}>{t("buttons.save")}</Button>
           <Button type="primary" onClick={() => handleSubmit("create")}>{t("buttons.saveAndAdd")}</Button>
         </>
-      )}
+      )
+      }
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
@@ -326,7 +325,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
           <TextArea maxLength={1024} />
         </Form.Item>
       </Form>
-    </Create>
+    </Create >
   );
 };
 

client/src/utils/overrides.css

@@ -1,7 +1,3 @@
-.ant-input-number-group-addon {
+#qty-input {
-    padding: 0 !important;
-}
-
-.ant-input-number-input {
     text-align: center !important;
 }