refactor: form label hover on delete modal (#765)

ArdentHQ · Oct 28, 2024 · 3349a92 · 3349a92
1 parent 940af54
commit 3349a92
Show file tree

Hide file tree

Showing 52 changed files with 414 additions and 421 deletions.
diff --git a/src/app/components/Form/FormField.tsx b/src/app/components/Form/FormField.tsx
@@ -7,11 +7,12 @@ import { FormFieldProvider } from "./useFormField";
 
 type FormFieldProperties = {
 	name: string;
+	disableHover?: boolean;
 } & React.FieldsetHTMLAttributes<any>;
 
-export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean }>`
+export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean; disableHover: boolean }>`
 	&:hover .FormLabel {
-		${({ isInvalid }) => !isInvalid && tw`text-theme-primary-600`};
+		${({ isInvalid, disableHover }) => !isInvalid && !disableHover && tw`text-theme-primary-600`}
 	}
 	.FormLabel {
 		${({ isInvalid }) => isInvalid && tw`text-theme-danger-500`};
@@ -21,7 +22,7 @@ export const FormFieldStyled = styled.fieldset<{ isInvalid: boolean }>`
 	}
 `;
 
-export const FormField: React.FC<FormFieldProperties> = ({ name, ...properties }) => {
+export const FormField: React.FC<FormFieldProperties> = ({ name, disableHover = false, ...properties }) => {
 	const FormProvider = useFormContext();
 	const { isInvalid, errorMessage } = React.useMemo(() => {
 		const error: { message: string } | undefined = get(FormProvider?.errors, name);
@@ -33,7 +34,12 @@ export const FormField: React.FC<FormFieldProperties> = ({ name, ...properties }
 	}, [FormProvider, name]);
 
 	return (
-		<FormFieldStyled isInvalid={isInvalid} className="flex min-w-0 flex-col" {...properties}>
+		<FormFieldStyled
+			isInvalid={isInvalid}
+			className="flex min-w-0 flex-col"
+			disableHover={disableHover}
+			{...properties}
+		>
 			<FormFieldProvider value={{ errorMessage, isInvalid, name }}>
 				<>{properties.children}</>
 			</FormFieldProvider>

diff --git a/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap b/src/app/components/Input/__snapshots__/InputDate.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`InputDate > should render 1`] = `
 <DocumentFragment>
   <fieldset
-    class="flex min-w-0 flex-col css-1bcidjh"
+    class="flex min-w-0 flex-col css-ea0il3"
   >
     <div
       class="react-datepicker-wrapper"

diff --git a/src/app/components/PasswordValidation/__snapshots__/PasswordValidation.test.tsx.snap b/src/app/components/PasswordValidation/__snapshots__/PasswordValidation.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PasswordValidation > should render password rules 1`] = `
 <DocumentFragment>
   <fieldset
-    class="flex min-w-0 flex-col css-1bcidjh"
+    class="flex min-w-0 flex-col css-ea0il3"
   >
     <label
       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -266,7 +266,7 @@ exports[`PasswordValidation > should render password rules 1`] = `
     </div>
   </div>
   <fieldset
-    class="flex min-w-0 flex-col css-5kz4tk"
+    class="flex min-w-0 flex-col css-s0h7ue"
   >
     <label
       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"

diff --git a/src/app/components/PasswordValidation/__snapshots__/PasswordValidation.test.tsx.snap.orig b/src/app/components/PasswordValidation/__snapshots__/PasswordValidation.test.tsx.snap.orig
@@ -3,7 +3,7 @@
 exports[`PasswordValidation > should render password rules 1`] = `
 <DocumentFragment>
   <fieldset
-    class="flex min-w-0 flex-col css-1bcidjh"
+    class="flex min-w-0 flex-col css-ea0il3"
   >
     <label
       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -266,7 +266,7 @@ exports[`PasswordValidation > should render password rules 1`] = `
     </div>
   </div>
   <fieldset
-    class="flex min-w-0 flex-col css-5kz4tk"
+    class="flex min-w-0 flex-col css-s0h7ue"
   >
     <label
       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"

diff --git a/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap b/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap
@@ -349,7 +349,7 @@ exports[`WalletListItem > should disable the send button when wallet has no bala
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -944,7 +944,7 @@ exports[`WalletListItem > should render when isCompact = false 1`] = `
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -1359,7 +1359,7 @@ exports[`WalletListItem > should render when isCompact = true 1`] = `
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -2214,7 +2214,7 @@ exports[`WalletListItem > should render when isLargeScreen = true 1`] = `
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -2677,7 +2677,7 @@ exports[`WalletListItem > should render when isLargeScreen = true and wallet is
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -3092,7 +3092,7 @@ exports[`WalletListItem > should render with a N/A for fiat 1`] = `
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -3507,7 +3507,7 @@ exports[`WalletListItem > should render with default BTC as default exchangeCurr
                       data-testid="Form"
                     >
                       <fieldset
-                        class="flex min-w-0 flex-col css-1bcidjh"
+                        class="flex min-w-0 flex-col css-ea0il3"
                       >
                         <label
                           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"

diff --git a/src/domains/contact/components/ContactForm/__snapshots__/ContactForm.test.tsx.snap b/src/domains/contact/components/ContactForm/__snapshots__/ContactForm.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ContactForm > should render responsive 1`] = `
     data-testid="contact-form"
   >
     <fieldset
-      class="flex min-w-0 flex-col css-1bcidjh"
+      class="flex min-w-0 flex-col css-ea0il3"
     >
       <label
         class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -37,7 +37,7 @@ exports[`ContactForm > should render responsive 1`] = `
       class="!-mx-4 !mt-4 !p-4 css-1mwq138"
     >
       <fieldset
-        class="flex min-w-0 flex-col css-1bcidjh"
+        class="flex min-w-0 flex-col css-ea0il3"
       >
         <label
           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -158,7 +158,7 @@ exports[`ContactForm > should render responsive 1`] = `
         </div>
       </fieldset>
       <fieldset
-        class="flex min-w-0 flex-col css-1bcidjh"
+        class="flex min-w-0 flex-col css-ea0il3"
         data-testid="ContactForm__address"
       >
         <label
@@ -244,7 +244,7 @@ exports[`ContactForm > should render responsive 2`] = `
     data-testid="contact-form"
   >
     <fieldset
-      class="flex min-w-0 flex-col css-1bcidjh"
+      class="flex min-w-0 flex-col css-ea0il3"
     >
       <label
         class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -274,7 +274,7 @@ exports[`ContactForm > should render responsive 2`] = `
       class="!-mx-4 !mt-4 !p-4 css-1mwq138"
     >
       <fieldset
-        class="flex min-w-0 flex-col css-1bcidjh"
+        class="flex min-w-0 flex-col css-ea0il3"
       >
         <label
           class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -395,7 +395,7 @@ exports[`ContactForm > should render responsive 2`] = `
         </div>
       </fieldset>
       <fieldset
-        class="flex min-w-0 flex-col css-1bcidjh"
+        class="flex min-w-0 flex-col css-ea0il3"
         data-testid="ContactForm__address"
       >
         <label

diff --git a/src/domains/contact/components/CreateContact/__snapshots__/CreateContact.test.tsx.snap b/src/domains/contact/components/CreateContact/__snapshots__/CreateContact.test.tsx.snap
@@ -78,7 +78,7 @@ exports[`CreateContact > should render 1`] = `
                 data-testid="contact-form"
               >
                 <fieldset
-                  class="flex min-w-0 flex-col css-1bcidjh"
+                  class="flex min-w-0 flex-col css-ea0il3"
                 >
                   <label
                     class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -108,7 +108,7 @@ exports[`CreateContact > should render 1`] = `
                   class="!-mx-4 !mt-4 !p-4 css-1mwq138"
                 >
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                   >
                     <label
                       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -229,7 +229,7 @@ exports[`CreateContact > should render 1`] = `
                     </div>
                   </fieldset>
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                     data-testid="ContactForm__address"
                   >
                     <label

diff --git a/src/domains/contact/components/UpdateContact/__snapshots__/UpdateContact.test.tsx.snap b/src/domains/contact/components/UpdateContact/__snapshots__/UpdateContact.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`UpdateContact > should render responsive 1`] = `
                 data-testid="contact-form"
               >
                 <fieldset
-                  class="flex min-w-0 flex-col css-1bcidjh"
+                  class="flex min-w-0 flex-col css-ea0il3"
                 >
                   <label
                     class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -103,7 +103,7 @@ exports[`UpdateContact > should render responsive 1`] = `
                   class="!-mx-4 !mt-4 !p-4 css-1mwq138"
                 >
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                   >
                     <label
                       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -224,7 +224,7 @@ exports[`UpdateContact > should render responsive 1`] = `
                     </div>
                   </fieldset>
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                     data-testid="ContactForm__address"
                   >
                     <label
@@ -502,7 +502,7 @@ exports[`UpdateContact > should render responsive 2`] = `
                 data-testid="contact-form"
               >
                 <fieldset
-                  class="flex min-w-0 flex-col css-1bcidjh"
+                  class="flex min-w-0 flex-col css-ea0il3"
                 >
                   <label
                     class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -532,7 +532,7 @@ exports[`UpdateContact > should render responsive 2`] = `
                   class="!-mx-4 !mt-4 !p-4 css-1mwq138"
                 >
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                   >
                     <label
                       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -653,7 +653,7 @@ exports[`UpdateContact > should render responsive 2`] = `
                     </div>
                   </fieldset>
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                     data-testid="ContactForm__address"
                   >
                     <label
@@ -975,7 +975,7 @@ exports[`UpdateContact > should render responsive 3`] = `
                 data-testid="contact-form"
               >
                 <fieldset
-                  class="flex min-w-0 flex-col css-1bcidjh"
+                  class="flex min-w-0 flex-col css-ea0il3"
                 >
                   <label
                     class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -1005,7 +1005,7 @@ exports[`UpdateContact > should render responsive 3`] = `
                   class="!-mx-4 !mt-4 !p-4 css-1mwq138"
                 >
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                   >
                     <label
                       class="FormLabel mb-2 flex text-sm font-semibold leading-[17px] text-theme-secondary-text transition-colors duration-100"
@@ -1126,7 +1126,7 @@ exports[`UpdateContact > should render responsive 3`] = `
                     </div>
                   </fieldset>
                   <fieldset
-                    class="flex min-w-0 flex-col css-1bcidjh"
+                    class="flex min-w-0 flex-col css-ea0il3"
                     data-testid="ContactForm__address"
                   >
                     <label