Add styles when input is invalid

thesis · Dec 19, 2023 · bacd2ce · bacd2ce
1 parent a26798b
commit bacd2ce
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/dapp/src/components/shared/NumberFormatInput/index.tsx b/dapp/src/components/shared/NumberFormatInput/index.tsx
@@ -29,7 +29,7 @@ const NumberFormatInput = React.forwardRef<
 >((props, ref) => {
   const { field: css } = useMultiStyleConfig("Input", props)
 
-  const { decimalScale, isDisabled, ...restProps } = props
+  const { decimalScale, isDisabled, isInvalid, ...restProps } = props
 
   return (
     <ChakraWrapper
@@ -38,6 +38,7 @@ const NumberFormatInput = React.forwardRef<
       decimalScale={decimalScale}
       __css={css}
       disabled={isDisabled}
+      aria-invalid={isInvalid}
       getInputRef={ref}
       {...restProps}
     />

diff --git a/dapp/src/components/shared/TokenBalanceInput/index.tsx b/dapp/src/components/shared/TokenBalanceInput/index.tsx
@@ -140,6 +140,7 @@ export default function TokenBalanceInput({
           size={size}
           value={amount}
           variant={VARIANT}
+          isInvalid={hasError}
           placeholder={placeholder}
           onValueChange={(values: NumberFormatInputValues) =>
             setAmount(values.value)

diff --git a/dapp/src/theme/Input.ts b/dapp/src/theme/Input.ts
@@ -18,6 +18,10 @@ const variantBalanceField = defineStyle({
     color: "grey.300",
     fontWeight: "medium",
   },
+
+  _invalid: {
+    color: "red.400",
+  },
 })
 
 const variantBalanceElement = defineStyle({