From f8f9c55f903984c7aa1076d8f46072809d08a5b4 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 5 Feb 2024 15:58:57 +0000
Subject: [PATCH] Improved TextField disabled state

- It's now easier to tell apart disabled and empty states

refs DES-30
---
 .../src/global/form/TextField.stories.tsx                     | 2 +-
 apps/admin-x-design-system/src/global/form/TextField.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/form/TextField.stories.tsx b/apps/admin-x-design-system/src/global/form/TextField.stories.tsx
index 64d7d406b5..47f10bd6e3 100644
--- a/apps/admin-x-design-system/src/global/form/TextField.stories.tsx
+++ b/apps/admin-x-design-system/src/global/form/TextField.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
     component: TextField,
     tags: ['autodocs'],
     decorators: [(_story: () => ReactNode) => (
-        <div style={{maxWidth: '400px'}}>
+        <div style={{maxWidth: '400px', padding: '20px'}}>
             {_story()}
         </div>
     )],
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 83630ce98b..c94513193e 100644
--- a/apps/admin-x-design-system/src/global/form/TextField.tsx
+++ b/apps/admin-x-design-system/src/global/form/TextField.tsx
@@ -71,12 +71,12 @@ const TextField: React.FC<TextFieldProps> = ({
     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',
         error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900',
-        disabled && 'bg-grey-100 dark:bg-grey-925'
+        disabled && 'bg-grey-50 peer-hover:bg-grey-50 dark:bg-grey-950 dark:peer-hover:bg-grey-950'
     );
 
     const textFieldClasses = !unstyled && clsx(
         'peer z-[1] order-2 h-8 w-full bg-transparent px-3 py-1 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-9 md:py-2 md:text-md',
-        disabled ? 'text-grey-700 opacity-60 dark:text-grey-700' : 'dark:text-white',
+        disabled ? 'cursor-not-allowed text-grey-600 opacity-60 dark:text-grey-800' : 'dark:text-white',
         rightPlaceholder ? 'w-0 grow rounded-l-md' : 'rounded-md',
         className
     );