diff --git a/src/img/icons/filled-circle-person.svg b/src/img/icons/filled-circle-person.svg
index 69c789891b..8df7831cfa 100644
--- a/src/img/icons/filled-circle-person.svg
+++ b/src/img/icons/filled-circle-person.svg
@@ -1,9 +1,16 @@
+
diff --git a/src/modules/core/components/Fields/Input/Input.tsx b/src/modules/core/components/Fields/Input/Input.tsx
index 9ef781f320..6768f339ef 100644
--- a/src/modules/core/components/Fields/Input/Input.tsx
+++ b/src/modules/core/components/Fields/Input/Input.tsx
@@ -112,7 +112,7 @@ const Input = ({
}: Props) => {
const [id] = useState(idProp || nanoid());
const { formatMessage } = useIntl();
- const [inputFieldProps, { error }] = useField(name);
+ const [inputFieldProps, { error, touched }] = useField(name);
const placeholder =
typeof placeholderProp === 'object'
@@ -122,7 +122,7 @@ const Input = ({
const inputProps: InputComponentProps = {
...inputFieldProps,
appearance,
- 'aria-invalid': !!error || !!forcedFieldError,
+ 'aria-invalid': (!!error || !!forcedFieldError) && touched,
formattingOptions,
id,
innerRef,
@@ -167,6 +167,7 @@ const Input = ({
status={status}
statusValues={statusValues}
error={error || forcedFieldError}
+ touched={touched}
/>
)}
diff --git a/src/modules/core/components/Fields/Input/InputComponent.tsx b/src/modules/core/components/Fields/Input/InputComponent.tsx
index e0067e66b9..2b8a352ca6 100644
--- a/src/modules/core/components/Fields/Input/InputComponent.tsx
+++ b/src/modules/core/components/Fields/Input/InputComponent.tsx
@@ -10,7 +10,7 @@ import { defineMessages } from 'react-intl';
import Cleave from 'cleave.js/react';
import { CleaveOptions } from 'cleave.js/options';
import { ChangeEvent } from 'cleave.js/react/props';
-import { isNil } from 'lodash';
+import isNil from 'lodash/isNil';
import Decimal from 'decimal.js';
import Button from '~core/Button';
diff --git a/src/modules/core/components/Fields/InputStatus/InputStatus.tsx b/src/modules/core/components/Fields/InputStatus/InputStatus.tsx
index 80ab3e4cfe..6566c340bc 100644
--- a/src/modules/core/components/Fields/InputStatus/InputStatus.tsx
+++ b/src/modules/core/components/Fields/InputStatus/InputStatus.tsx
@@ -1,6 +1,7 @@
import { MessageDescriptor, useIntl } from 'react-intl';
import React from 'react';
+import { isNil } from 'lodash';
import { SimpleMessageValues } from '~types/index';
import { getMainClasses } from '~utils/css';
@@ -26,6 +27,7 @@ interface Props {
/** Values for status text (react-intl interpolation) (if applicable) */
statusValues?: SimpleMessageValues;
+ touched?: boolean;
}
const displayName = 'InputStatus';
@@ -35,6 +37,7 @@ const InputStatus = ({
error,
status,
statusValues,
+ touched,
}: Props) => {
const { formatMessage } = useIntl();
const errorText = typeof error === 'object' ? formatMessage(error) : error;
@@ -46,7 +49,7 @@ const InputStatus = ({
{text}
diff --git a/src/modules/core/components/SingleUserPicker/SingleUserPicker.css b/src/modules/core/components/SingleUserPicker/SingleUserPicker.css
index 1bfb086128..64c41f2ae5 100644
--- a/src/modules/core/components/SingleUserPicker/SingleUserPicker.css
+++ b/src/modules/core/components/SingleUserPicker/SingleUserPicker.css
@@ -62,6 +62,8 @@
.baseInput {
flex: 1 1 0;
margin-left: 10px;
+ padding: 5px 3px;
+ height: 32px;
width: 100%;
max-width: 305px;
vertical-align: baseline;
@@ -94,7 +96,6 @@
.input {
composes: baseInput;
- padding: 3px;
width: 100%;
&:focus {
@@ -108,7 +109,6 @@
.recipientName {
composes: baseInput;
- padding: 5px 3px;
overflow: hidden;
font-weight: var(--weight-bold);
text-overflow: ellipsis;
diff --git a/src/modules/dashboard/components/CreatePaymentDialog/CreatePaymentDialog.tsx b/src/modules/dashboard/components/CreatePaymentDialog/CreatePaymentDialog.tsx
index 235cbf8bf0..7580d51c14 100644
--- a/src/modules/dashboard/components/CreatePaymentDialog/CreatePaymentDialog.tsx
+++ b/src/modules/dashboard/components/CreatePaymentDialog/CreatePaymentDialog.tsx
@@ -73,15 +73,11 @@ const CreatePaymentDialog = ({
const validationSchema = yup.object().shape({
domainId: yup.number().required(),
- recipient: yup
- .object()
- .shape({
- profile: yup.object().shape({
- walletAddress: yup.string().address().required(),
- }),
- })
- .nullable()
- .default(null),
+ recipient: yup.object().shape({
+ profile: yup.object().shape({
+ walletAddress: yup.string().address().required(),
+ }),
+ }),
amount: yup
.number()
.required()
diff --git a/src/modules/dashboard/components/PermissionManagementDialog/PermissionManagementDialog.tsx b/src/modules/dashboard/components/PermissionManagementDialog/PermissionManagementDialog.tsx
index 6fe31c51a6..8c43cf3806 100644
--- a/src/modules/dashboard/components/PermissionManagementDialog/PermissionManagementDialog.tsx
+++ b/src/modules/dashboard/components/PermissionManagementDialog/PermissionManagementDialog.tsx
@@ -41,15 +41,11 @@ import styles from './PermissionManagementDialog.css';
const validationSchema = yup.object().shape({
domainId: yup.number().required(),
- user: yup
- .object()
- .shape({
- profile: yup.object().shape({
- walletAddress: yup.string().address().required(),
- }),
- })
- .nullable()
- .default(null),
+ user: yup.object().shape({
+ profile: yup.object().shape({
+ walletAddress: yup.string().address().required(),
+ }),
+ }),
roles: yup.array().ensure(),
annotation: yup.string().max(4000),
forceAction: yup.boolean(),