Adding disabled button to account and registration pages

lexicongovernance · Apr 19, 2024 · 3c91374 · 3c91374
1 parent 98f5399
commit 3c91374
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git 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<StyledButtonProps>`
   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
@@ -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' }}
             />
           </FlexColumn>
-          <Button type="submit">Submit</Button>
+          <Button type="submit" disabled={isSubmitting}>
+            Submit
+          </Button>
         </FlexColumn>
       </form>
     </FlexColumn>

diff --git 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: {
           ))}
         </FlexColumn>
       </form>
-      <Button onClick={handleSubmit(onSubmit)}>Save</Button>
+      <Button onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
+        Save
+      </Button>
       <Body>
         Need more time? Feel free to come back to these questions later. The deadline is May 15th.
       </Body>