Enhance customer card and delete button styles for improved UX and responsiveness

Author: JohanCodeForFun

client/src/components/CustomerList.css

@@ -58,11 +58,27 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: box-shadow 0.2s;
+  transition: all 0.2s ease;
+  gap: 1rem;
 }
 
 .customer-card:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #bbb;
+}
+
+/* Mobile responsiveness for better delete button visibility */
+@media (max-width: 768px) {
+  .customer-card {
+    padding: 1.2rem;
+    gap: 0.8rem;
+  }
+
+  .delete-btn {
+    min-width: 3.5rem;
+    height: 3.5rem;
+    font-size: 1.2rem;
+  }
 }
 
 .customer-info h3 {
@@ -78,23 +94,48 @@
 }
 
 .delete-btn {
-  background: #ff4444;
+  background: #dc3545;
   color: white;
-  border: none;
-  padding: 0.5rem;
-  border-radius: 4px;
+  border: 2px solid #dc3545;
+  padding: 0.6rem;
+  border-radius: 6px;
   cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
-  min-width: 2.5rem;
-  height: 2.5rem;
+  font-size: 1.1rem;
+  transition: all 0.2s ease;
+  min-width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
 }
 
 .delete-btn:hover:not(:disabled) {
-  background: #cc0000;
+  background: #c82333;
+  border-color: #c82333;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
+}
+
+.delete-btn:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
 }
 
 .delete-btn:disabled {
-  background: #ccc;
+  background: #6c757d;
+  border-color: #6c757d;
   cursor: not-allowed;
-}
+  transform: none;
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+.delete-icon {
+  color: #ffffff;
+  font-size: 0.8rem;
+  font-weight: bold;
+  line-height: 1;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  letter-spacing: 0.5px;
+}

client/src/components/CustomerList.tsx

@@ -52,9 +52,10 @@ const CustomerList = ({ customers, onCustomerDeleted, onRefresh }: CustomerListP
                 onClick={() => handleDelete(customer.id)}
                 className="delete-btn"
                 disabled={loading}
-                title="Delete customer"
+                title={`Delete ${customer.firstName} ${customer.lastName}`}
+                aria-label={`Delete customer ${customer.firstName} ${customer.lastName}`}
               >
-                🗑️
+                <span className="delete-icon">DEL</span>
               </button>
             </div>
           ))}