diff --git a/src/components/atoms/Input/index.module.css b/src/components/atoms/Input/index.module.css index f7d68dd8a..8f4536e50 100644 --- a/src/components/atoms/Input/index.module.css +++ b/src/components/atoms/Input/index.module.css @@ -15,14 +15,15 @@ .error { display: inline-block; font-size: var(--font-size-mini); + line-height: 1.2; font-weight: var(--font-weight-bold); color: var(--brand-white); background: var(--brand-alert-red); border-radius: var(--border-radius); - padding: 0 0.4rem; + padding: 0.2rem 0.4rem; position: absolute; right: 0; - bottom: -0.75rem; + top: 85%; z-index: 1; } @@ -31,7 +32,10 @@ } .hasError input, +.hasError input:focus, .hasError select, -.hasError textarea { +.hasError textarea, +.hasError [class*='prefix'], +.hasError [class*='postfix'] { border-color: var(--brand-alert-red); } diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx index 68b49877f..875bdf65d 100644 --- a/src/components/atoms/Input/index.tsx +++ b/src/components/atoms/Input/index.tsx @@ -71,7 +71,7 @@ export default function Input(props: Partial): ReactElement { - {field && field.name !== 'price' && ( + {field && field.name !== 'price' && hasError && (
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx index 3d3b39ad8..d5e87cbfd 100644 --- a/src/components/organisms/AssetActions/Pool/Add.tsx +++ b/src/components/organisms/AssetActions/Pool/Add.tsx @@ -179,7 +179,7 @@ export default function Add({ - {({ field }: { field: any }) => ( + {({ field, form }: { field: any; form: any }) => ( )}