Disabled username update field in profile page

daily-thought-frontend/src/pages/profile.tsx

@@ -108,7 +108,7 @@ const Profile = () => {
                 Username
               </label>
               <div className="mt-2">
-                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
+                <div className="flex bg-gray-100 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                   <span className="flex select-none items-center pl-3 text-gray-500 sm:text-sm">dialy.com/</span>
                   <input
                     type="text"
@@ -119,6 +119,7 @@ const Profile = () => {
                     placeholder="janesmith"
                     value={user?.username}
                     onChange={(e) => handleItemChange("username", e.target.value)}
+                    disabled
                   />
                 </div>
               </div>