Update static/styles.css

static/styles.css

@@ -24,7 +24,7 @@ body {
 }
 
 .chat-header {
-    background-color: #4caf50;
+    background-color: #0288d1;
     color: white;
     padding: 10px;
     text-align: center;
@@ -40,7 +40,7 @@ body {
 }
 
 .bot-message {
-    background-color: #fffbe6;
+    background-color: #e3f2fd;
     padding: 10px;
     margin: 10px 0;
     border-radius: 5px;
@@ -50,7 +50,7 @@ body {
 }
 
 .user-message {
-    background-color: #e1f5fe;
+    background-color: #ffebee;
     padding: 10px;
     margin: 10px 0;
     border-radius: 5px;
@@ -86,7 +86,7 @@ body {
 .chat-input button {
     padding: 8px 15px;
     margin-left: 10px;
-    background-color: #ffbd80;
+    background-color: #ff8f00;
     color: white;
     border: none;
     border-radius: 5px;
@@ -97,7 +97,7 @@ body {
 }
 
 .chat-input button:hover {
-    background-color: #ffa550;
+    background-color: #f57c00;
 }
 
 .suggestions-list, .ingredients-list {
@@ -142,7 +142,7 @@ body {
 .show-desc-button {
     padding: 5px 10px;
     margin-top: 5px;
-    background-color: #2196f3;
+    background-color: #0288d1;
     color: white;
     border: none;
     border-radius: 5px;
@@ -151,14 +151,14 @@ body {
 }
 
 .show-desc-button:hover {
-    background-color: #1976d2;
+    background-color: #0277bd;
 }
 
 .option-button {
     display: inline-block;
     padding: 10px 15px;
     margin: 5px;
-    background-color: #9c27b0;
+    background-color: #7b1fa2;
     color: white;
     border: none;
     border-radius: 5px;
@@ -168,14 +168,14 @@ body {
 }
 
 .option-button.green { background-color: #4caf50; }
-.option-button.red { background-color: #f44336; }
-.option-button.gray { background-color: #9e9e9e; }
-.option-button:hover { opacity: 0.9; }
+.option-button.red { background-color: #d32f2f; }
+.option-button.gray { background-color: #616161; }
+.option-button:hover { background-color: #6a1b9a; }
 
 .selection-box {
-    background-color: #f0f0f0;
+    background-color: #e1f5fe;
     padding: 10px;
-    border: 1px solid #ccc;
+    border: 1px solid #0288d1;
     border-radius: 5px;
     margin: 10px 0;
     font-size: 14px;
@@ -186,7 +186,7 @@ body {
 }
 
 .selection-box span {
-    background-color: #e0e0e0;
+    background-color: #bbdefb;
     padding: 5px 10px;
     border-radius: 5px;
     margin-right: 5px;
@@ -195,7 +195,7 @@ body {
 .selected-item {
     display: flex;
     align-items: center;
-    background-color: #e0e0e0;
+    background-color: #bbdefb;
     padding: 5px 10px;
     border-radius: 5px;
     margin-right: 5px;
@@ -211,7 +211,7 @@ body {
 
 .submit-button {
     padding: 8px 15px;
-    background-color: #2196f3;
+    background-color: #0288d1;
     color: white;
     border: none;
     border-radius: 5px;
@@ -220,12 +220,27 @@ body {
 }
 
 .submit-button:hover {
-    background-color: #1976d2;
+    background-color: #0277bd;
+}
+
+.remove-button {
+    padding: 5px 10px;
+    margin-left: 5px;
+    background-color: #d32f2f;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.remove-button:hover {
+    background-color: #b71c1c;
 }
 
 .manual-input {
     padding: 5px;
-    border: 1px solid #ccc;
+    border: 1px solid #0288d1;
     border-radius: 5px;
     font-size: 14px;
     width: 150px;
@@ -243,8 +258,8 @@ body {
 }
 
 .dietary-button.green { background-color: #4caf50; }
-.dietary-button.red { background-color: #f44336; }
-.dietary-button.gray { background-color: #9e9e9e; }
+.dietary-button.red { background-color: #d32f2f; }
+.dietary-button.gray { background-color: #616161; }
 .dietary-button:hover { opacity: 0.9; }
 
 /* Popup Styles */
@@ -262,7 +277,7 @@ body {
 }
 
 .popup-content {
-    background-color: white;
+    background-color: #ffffff;
     padding: 20px;
     border-radius: 10px;
     max-width: 90%;
@@ -296,7 +311,7 @@ body {
 
 .popup-close-button {
     padding: 8px 15px;
-    background-color: #f44336;
+    background-color: #d32f2f;
     color: white;
     border: none;
     border-radius: 5px;
@@ -305,7 +320,7 @@ body {
 }
 
 .popup-close-button:hover {
-    background-color: #d32f2f;
+    background-color: #b71c1c;
 }
 
 /* Mobile Responsiveness */
@@ -347,4 +362,14 @@ body {
         padding: 6px 12px;
         font-size: 12px;
     }
+    .selection-box {
+        gap: 5px;
+    }
+    .selected-item {
+        padding: 3px 8px;
+    }
+    .remove-button {
+        padding: 3px 8px;
+        font-size: 10px;
+    }
 }