From cfe001ae50497601f4660c9ac6d18d3990b8f1f8 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Tue, 8 Mar 2022 18:51:58 +0530
Subject: [PATCH] Style fix (#18)

* Remove gray bg

* readOnly -> disabled

* gray bg for disabled state
---
 pages/index.tsx    | 6 +++---
 styles/globals.css | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 2d4be19..16f1ca7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -41,17 +41,17 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
         <div className='mx-auto mt-5 flex w-full space-x-6 px-8 lg:w-2/3'>
           <div className='relative flex-1'>
             <label className='text-sm leading-7 text-gray-600'>SSO URL</label>
-            <input readOnly type='text' defaultValue={ssoUrl} className='input w-full' />
+            <input disabled type='text' defaultValue={ssoUrl} className='input w-full' />
           </div>
           <div className='relative flex-1'>
             <label className='text-sm leading-7 text-gray-600'>Entity ID</label>
-            <input readOnly type='text' defaultValue={entityId} className='input w-full' />
+            <input disabled type='text' defaultValue={entityId} className='input w-full' />
           </div>
         </div>
         <div className='mx-auto mt-5 flex w-full px-8 lg:w-2/3'>
           <div className='relative w-full'>
             <label className='text-sm leading-7 text-gray-600'>Certificate</label>
-            <textarea readOnly rows={5} defaultValue={certificate} className='input w-full'></textarea>
+            <textarea disabled rows={5} defaultValue={certificate} className='input w-full'></textarea>
           </div>
         </div>
         <div className='mx-auto mt-5 flex w-full justify-center px-8 lg:w-2/3'>
diff --git a/styles/globals.css b/styles/globals.css
index d97ad1e..947f9d7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -34,10 +34,10 @@ a {
   }
 
   .input {
-    @apply rounded-md border border-gray-300 bg-gray-100 bg-opacity-50 px-3 py-1 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300;
+    @apply rounded-md border border-gray-300 bg-opacity-50 px-3 py-1 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300 disabled:bg-gray-100;
   }
 
   .select {
-    @apply rounded-md border border-gray-300 bg-gray-100 bg-opacity-50 px-3 py-2.5 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300;
+    @apply rounded-md border border-gray-300 bg-opacity-50 px-3 py-2.5 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300 disabled:bg-gray-100;
   }
 }