feat(qb): add prominent input for limit editing to nav bar

libs/shared/lib/components/inputs/index.tsx

@@ -255,35 +255,8 @@ export const NumberInput = ({
 
   if (!tooltip && inline && label) tooltip = label;
   return (
-    <div className={styles['input'] + ` relative items-center${containerClassName ? ` ${containerClassName}` : ''}`}>
+    <div className={styles['input'] + `${containerClassName ? ` ${containerClassName}` : ''}`}>
       <TooltipProvider delayDuration={50}>
-        {lazy && value !== inputValue && (
-          <div className="absolute top-0 right-1 h-full flex flex-row items-center">
-            <Button
-              className="hover:bg-success-600 hover:text-white border-none m-0 p-0 h-fit"
-              variant="outline"
-              tooltip="Apply Change"
-              size={size}
-              rounded
-              iconComponent={'icon-[ic--round-check-circle-outline]'}
-              onClick={() => {
-                if (onChange) onChange(inputValue);
-              }}
-            ></Button>
-            <Button
-              className="hover:bg-warning-600 hover:text-white border-none m-0 p-0 h-fit"
-              variant="outline"
-              tooltip="Revert Change"
-              size={size}
-              rounded
-              iconComponent={'icon-[ic--outline-cancel]'}
-              onClick={() => {
-                if (onRevert) onRevert(inputValue);
-                setInputValue(value);
-              }}
-            ></Button>
-          </div>
-        )}
         <Tooltip>
           <TooltipTrigger className={'form-control w-full' + (inline && label ? ' grid grid-cols-2 items-center gap-0.5' : '')}>
             {label && (
@@ -297,35 +270,64 @@ export const NumberInput = ({
                 {info && <Info tooltip={info} placement={'left'} />}
               </label>
             )}
-            <input
-              type="number"
-              placeholder={placeholder}
-              className={`${size} bg-light border border-secondary-200 placeholder-secondary-400 focus:outline-none block w-full sm:text-sm focus:ring-1 ${
-                isValid ? '' : 'input-error'
-              }${className ? ` ${className}` : ''}`}
-              value={inputValue.toString()}
-              onChange={(e) => {
-                if (required && validate) {
-                  setIsValid(validate(e.target.value));
-                }
-                setInputValue(Number(e.target.value));
-                if (!lazy && onChange) {
-                  onChange(Number(e.target.value));
-                }
-              }}
-              required={required}
-              disabled={disabled}
-              onKeyDown={(e) => {
-                if (lazy && e.key === 'Enter') {
-                  if (onChange) {
-                    onChange(inputValue);
+            <div className="relative items-center">
+              <input
+                type="number"
+                placeholder={placeholder}
+                className={`${size} bg-light border border-secondary-200 placeholder-secondary-400 focus:outline-none block w-full sm:text-sm focus:ring-1 ${
+                  isValid ? '' : 'input-error'
+                }${className ? ` ${className}` : ''}`}
+                value={inputValue.toString()}
+                onChange={(e) => {
+                  if (required && validate) {
+                    setIsValid(validate(e.target.value));
                   }
-                }
-                if (onKeyDown) onKeyDown(e);
-              }}
-              max={max}
-              min={min}
-            />
+                  setInputValue(Number(e.target.value));
+                  if (!lazy && onChange) {
+                    onChange(Number(e.target.value));
+                  }
+                }}
+                required={required}
+                disabled={disabled}
+                onKeyDown={(e) => {
+                  if (lazy && e.key === 'Enter') {
+                    if (onChange) {
+                      onChange(inputValue);
+                    }
+                  }
+                  if (onKeyDown) onKeyDown(e);
+                }}
+                max={max}
+                min={min}
+              />
+              {lazy && value !== inputValue && (
+                <div className="absolute top-0 right-1 h-full flex flex-row items-center">
+                  <Button
+                    className="hover:bg-success-600 hover:text-white border-none m-0 p-0 h-fit"
+                    variant="outline"
+                    tooltip="Apply Change"
+                    size={size}
+                    rounded
+                    iconComponent={'icon-[ic--round-check-circle-outline]'}
+                    onClick={() => {
+                      if (onChange) onChange(inputValue);
+                    }}
+                  ></Button>
+                  <Button
+                    className="hover:bg-warning-600 hover:text-white border-none m-0 p-0 h-fit"
+                    variant="outline"
+                    tooltip="Revert Change"
+                    size={size}
+                    rounded
+                    iconComponent={'icon-[ic--outline-cancel]'}
+                    onClick={() => {
+                      if (onRevert) onRevert(inputValue);
+                      setInputValue(value);
+                    }}
+                  ></Button>
+                </div>
+              )}
+            </div>
           </TooltipTrigger>
           {tooltip && <TooltipContent>{tooltip}</TooltipContent>}
         </Tooltip>