From 3c91374e265b31acca03c7146d9aae6c6ea94f02 Mon Sep 17 00:00:00 2001 From: camilovegag Date: Fri, 19 Apr 2024 14:52:34 -0500 Subject: [PATCH] Adding disabled button to account and registration pages --- packages/berlin/src/components/button/Button.styled.tsx | 8 ++++++++ packages/berlin/src/pages/Account.tsx | 6 ++++-- packages/berlin/src/pages/Register.tsx | 6 ++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/berlin/src/components/button/Button.styled.tsx b/packages/berlin/src/components/button/Button.styled.tsx index 9ea1a5cc..05f0b579 100644 --- a/packages/berlin/src/components/button/Button.styled.tsx +++ b/packages/berlin/src/components/button/Button.styled.tsx @@ -12,6 +12,14 @@ export const StyledButton = styled.button` padding-inline: 1rem; text-transform: uppercase; + &:disabled { + background-color: var(--color-gray); + cursor: not-allowed; + &:hover { + opacity: 1; + } + } + ${(props) => props.$color === 'primary' && css` diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx index f0235b91..7f9e66c4 100644 --- a/packages/berlin/src/pages/Account.tsx +++ b/packages/berlin/src/pages/Account.tsx @@ -190,7 +190,7 @@ function AccountForm({ const { control, register, - formState: { errors, isValid }, + formState: { errors, isValid, isSubmitting }, handleSubmit, setValue, reset, @@ -474,7 +474,9 @@ function AccountForm({ icon={{ src: `/icons/add-${theme}.svg`, alt: 'Add icon' }} /> - + diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index 9cd27b87..3592cf6b 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -232,7 +232,7 @@ function RegisterForm(props: { const { register, - formState: { errors }, + formState: { errors, isSubmitting }, control, handleSubmit, getValues, @@ -354,7 +354,9 @@ function RegisterForm(props: { ))} - + Need more time? Feel free to come back to these questions later. The deadline is May 15th.