Update templates/customer_details.html

templates/customer_details.html

@@ -74,19 +74,25 @@
             font-weight: bold;
             cursor: pointer;
             text-transform: uppercase;
-            padding: 2px 5px;
-            display: inline-block;
+            padding: 5px 8px;
+            border-radius: 5px;
+            background-color: rgba(255, 255, 255, 0.8);
+            transition: opacity 0.3s ease;
+        }
+        .change-btn:hover {
+            opacity: 0.8;
         }
         .change-btn.disabled {
             color: #A9A9A9;
             cursor: not-allowed;
+            background-color: rgba(255, 255, 255, 0.5);
         }
         .update-btn {
             width: 100%;
             padding: 12px;
-            background-color: #FFA07A;
-            border-color: #FFA07A;
-            color: #6C757D;
+            background-color: #8B4513; /* Brown */
+            border-color: #8B4513;
+            color: #FFFFFF; /* White text for contrast */
             border: 1px solid;
             border-radius: 10px;
             font-size: 1rem;
@@ -95,8 +101,8 @@
             margin-top: 20px;
         }
         .update-btn:hover {
-            background-color: #FF7F50;
-            border-color: #FF7F50;
+            background-color: #5C2D0C; /* Darker brown */
+            border-color: #5C2D0C;
         }
 
         /* Media Queries for Smaller Screens */
@@ -116,6 +122,10 @@
                 font-size: 0.9rem;
                 padding: 8px;
             }
+            .change-btn {
+                font-size: 0.7rem;
+                padding: 4px 6px;
+            }
             .update-btn {
                 padding: 10px;
                 font-size: 0.9rem;
@@ -128,7 +138,7 @@
             var field = document.getElementById(fieldId);
             var flagField = document.getElementById(flagId);
             var changeBtn = $(field).siblings('.change-btn');
-            changeBtn.hide();
+            changeBtn.hide(); // Hide CHANGE button when clicked
             if (flagField.value === "false") {
                 field.removeAttribute("readonly");
                 field.focus();
@@ -139,7 +149,9 @@
         }
         function onFocusNext(inputField) {
             var changeBtn = $(inputField).siblings('.change-btn');
-            changeBtn.show();
+            if ($(inputField).prop('readonly')) {
+                changeBtn.show(); // Show CHANGE button only if field is readonly
+            }
         }
         function updateProfile(event) {
             event.preventDefault();