From 3e4c28e913a90af005153cac552a43fb9a2f446f Mon Sep 17 00:00:00 2001
From: Harsh Khandeparkar <shadowwarriorpro3003@gmail.com>
Date: Sat, 18 Nov 2023 20:51:50 +0530
Subject: [PATCH] feat: better disabled fields

---
 src/components/Form.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 05db7b2d..cd5a239d 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -83,7 +83,7 @@ function Form<S extends InputSettings>(props: IFormProps<S>) {
             <div className="mb-4 text-center">
               <button
                 type="submit"
-                className="h-10 px-5 text-indigo-100 bg-indigo-700 rounded-lg transition-colors duration-150 focus:shadow-outline hover:bg-indigo-800 disabled:bg-gray-600"
+                className="h-10 px-5 text-indigo-100 bg-indigo-700 rounded-lg transition-colors duration-150 focus:shadow-outline hover:bg-indigo-800 disabled:text-gray-300 disabled:bg-gray-600"
                 disabled={
                   (!responsesChanged && !props.submitWithoutChange) || disabled
                 }
@@ -95,7 +95,7 @@ function Form<S extends InputSettings>(props: IFormProps<S>) {
               <div className="mb-4 text-center">
                 <button
                   type="reset"
-                  className="h-10 px-5 text-indigo-100 bg-red-700 rounded-lg transition-colors duration-150 focus:shadow-outline hover:bg-red-800 disabled:bg-gray-600"
+                  className="h-10 px-5 text-indigo-100 bg-red-700 rounded-lg transition-colors duration-150 focus:shadow-outline hover:bg-red-800 disabled:text-gray-600 disabled:bg-gray-600"
                   onClick={() => props.onCancel!(responses)}
                 >
                   Cancel
@@ -128,7 +128,7 @@ function FormInput(props: IFormInputProps) {
       <input
         type={props.type}
         disabled={props.disabled ?? false}
-        className="block w-full mt-2 px-2 py-1 bg-gray-800 text-white border-slate-700 rounded-md shadow-sm focus:border-indigo-700 focus:ring focus:ring-indigo-700 focus:ring-opacity-50"
+        className="block w-full mt-2 px-2 py-1 bg-gray-800 text-white border-slate-700 rounded-md shadow-sm focus:border-indigo-700 focus:ring focus:ring-indigo-700 focus:ring-opacity-5 disabled:text-gray-600 disabled:placeholder:text-gray-600"
         placeholder={props.placeholder}
         required={props.required ?? false}
         defaultValue={props.defaultValue ?? ""}