Update templates/customer_details.html (#12)

- Update templates/customer_details.html (61652feb4fa183718f19da8e9c1b4590eb0d2ff8)


Co-authored-by: geetha <[email protected]>

templates/customer_details.html

@@ -6,7 +6,7 @@
     <title>User Profile</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-       body {
+        body {
             background-color: #FDF4E3;
         }
 
@@ -79,6 +79,8 @@
             padding: 10px 20px;
             font-size: 1rem;
             cursor: pointer;
+            width: 100%;
+            font-weight: bold; /* Making the button text bold */
         }
 
         .update-btn:hover {
@@ -94,6 +96,7 @@
             font-size: 1rem;
             cursor: pointer;
             width: 100%;
+            font-weight: bold; /* Making the button text bold */
         }
 
         .edit-btn:hover {
@@ -118,15 +121,19 @@
             height: 50px; /* Equal height for both buttons */
         }
 
-        /* Change font size for User Profile heading */
-        h1 {
-            font-size: 2rem;  /* Set font size to 2rem (32px) */
-            color:#6c757d; /* Set color for heading */
+        /* Change text color inside input fields to gray */
+        input[type="text"], input[type="email"], input[type="number"], .form-control {
+            color: #808080; /* Change text color to gray */
         }
 
-        /* Gray color for fields and labels */
-        h1, .form-label, .form-control {
-            color: #6c757d; /* Set text color to gray */
+        /* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
+        .form-label {
+            color: #1C1C1C; /* Change heading text color */
+        }
+
+        h1 {
+            color: #1C1C1C; /* Change User Profile heading color */
+            font-size: 28px; /* Change font size of 'User Profile' */
         }
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -226,6 +233,7 @@
                         <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
                     </div>
 
+                    <!-- Flex container for Edit and Update buttons -->
                     <div class="button-container">
                         <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
                         <button type="submit" class="update-btn">Update Profile</button>