From be57b888d25834c0799fe47f85190dcb6b17bba9 Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Thu, 8 Feb 2024 11:28:27 +0000 Subject: [PATCH] Made hover and focus states easier to tell apart refs DES-8 --- apps/admin-x-design-system/src/global/form/TextArea.tsx | 2 +- apps/admin-x-design-system/src/global/form/TextField.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/admin-x-design-system/src/global/form/TextArea.tsx b/apps/admin-x-design-system/src/global/form/TextArea.tsx index d8c8fd3301..a8de4fb1fe 100644 --- a/apps/admin-x-design-system/src/global/form/TextArea.tsx +++ b/apps/admin-x-design-system/src/global/form/TextArea.tsx @@ -56,7 +56,7 @@ const TextArea: React.FC = ({ let styles = clsx( 'order-2 rounded-md border bg-grey-150 px-3 py-2 transition-all dark:bg-grey-900 dark:text-white', - error ? 'border-red bg-white' : 'border-transparent placeholder:text-grey-500 hover:bg-grey-100 focus:border-green focus:bg-white focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:placeholder:text-grey-800 dark:hover:bg-grey-925 dark:focus:bg-grey-925', + error ? 'border-red bg-white' : 'border-transparent placeholder:text-grey-500 hover:bg-grey-100 focus:border-green focus:bg-white focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:placeholder:text-grey-800 dark:hover:bg-grey-925 dark:focus:bg-grey-950', title && 'mt-1.5', fontStyle === 'mono' && 'font-mono text-sm', className diff --git a/apps/admin-x-design-system/src/global/form/TextField.tsx b/apps/admin-x-design-system/src/global/form/TextField.tsx index c94513193e..54eccd2848 100644 --- a/apps/admin-x-design-system/src/global/form/TextField.tsx +++ b/apps/admin-x-design-system/src/global/form/TextField.tsx @@ -69,7 +69,7 @@ const TextField: React.FC = ({ ); const bgClasses = !unstyled && clsx( - 'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-925', + 'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-950', error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900', disabled && 'bg-grey-50 peer-hover:bg-grey-50 dark:bg-grey-950 dark:peer-hover:bg-grey-950' );