From bacd2ce53544e8c5f9992f8a79301f93d13f897c Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 19 Dec 2023 09:25:41 +0100 Subject: [PATCH] Add styles when input is invalid --- dapp/src/components/shared/NumberFormatInput/index.tsx | 3 ++- dapp/src/components/shared/TokenBalanceInput/index.tsx | 1 + dapp/src/theme/Input.ts | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/dapp/src/components/shared/NumberFormatInput/index.tsx b/dapp/src/components/shared/NumberFormatInput/index.tsx index a7792f156..4f657f711 100644 --- 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 ( diff --git a/dapp/src/components/shared/TokenBalanceInput/index.tsx b/dapp/src/components/shared/TokenBalanceInput/index.tsx index 907f533d0..94c5ccd81 100644 --- 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 index 3bc2aeb25..cccff7c7c 100644 --- 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({